Makina Blog

Le blog Makina-corpus

Quelle solution pour mon application mobile hybride ?


Un petit guide des frameworks open source disponibles.

Le JavaScript avance, et vite. C'est un peu le leitmotiv du développement front end depuis quelques années. Une des conséquences est l'essor des applications mobiles hybrides et des solutions diverses et variées y répondant.

Nous vous proposons dans cet article un petit tour d'horizon des grandes solutions open source (et gratuites) disponibles en ce début 2016, avec leurs avantages et inconvénients respectifs.

Cordova : le senior

Cordova est là depuis longtemps. Anciennement PhoneGap, il a ouvert la route vers une uniformisation de l’accès aux fonctions natives des plates-formes mobiles. Non sans surprise, il reste aujourd’hui l’un des grands piliers du mobile hybride. Non seulement il continue d’être maintenu et amélioré très régulièrement (sortie de la version 6 le 28 janvier 2016 !), mais surtout il sert de base à de nombreux frameworks dont Ionic dont nous parlons ci-dessous.

Il est facile de se dire que Cordova seul n’est pas suffisant, mais il convient parfaitement à certains types d’applications où la lourdeur d’un framework complet est une chose dont on peut largement se passer.

Nous proposons d'ailleurs des formations à Cordova, si vous voulez vous y mettre plus facilement.

Petite clarification, PhoneGap est aujourd'hui le nom du service propriétaire d'Adobe, construite sur Cordova.

Points positifs

  • compatible avec de très nombreuses plates-formes (Android, iOS, Windows Phone, Blackberry, Ubuntu mobile, Firefox OS, LG web OS, FireOS) ;
  • liberté technologique (utilisez le framework qui vous convient, ou pas du tout de framework d’ailleurs !) ;
  • performances entièrement dépendantes de ce que l’on en fait ;
  • une base de plugins très complète et bien maintenue ;
  • technologie mûre.

Points négatifs

  • demande un travail plus conséquent pour avoir un résultat utilisable en production ;
  • interface graphique non comprise ;
  • absence de visualisation hors émulateur / périphérique par défaut.

Ionic : le petit frère

Ionic est aujourd’hui l’un des frameworks les plus en vogue pour faire des applications mobiles hybrides rapidement et de qualité. Depuis sa création en 2014, l’outil n’a cessé de s’améliorer et de fédérer autour de lui. Il partage actuellement le haut du panier avec React Native en terme d’engouement, et la version 2 à venir (déjà disponible en beta) ne fait qu’amplifier ce phénomène. L’attrait principal du framework est qu’il offre toute une interface prête à utiliser, au sein d’un système de routage et d’outils complets. Construit autour Cordova, il profite de ses plugins et offre donc une surcouche à celui-ci, utilisant majoritairement AngularJS.

À noter que nous avons rédigé un guide de démarrage pour Ionic, si vous êtes impatient de vous y plonger.

Points positifs

  • UI complète (avec un système de templating unifié pour toutes les plates-formes) ;
  • création rapide pour la production ;
  • construit avec AngularJS ;
  • CLI très puissante (ex: visualisation dans le navigateur avec du live reload) ;
  • dépôt de plugins cordova spécifiquement maintenu par l’équipe du framework.

Points négatifs

  • compatible uniquement iOS et Android (Windows Phone prévu pour la version 2) ;
  • obligation d'utiliser AngularJS ;
  • système de routing vite limité pour des navigations complexes (point adressé dans la version 2) ;
  • performances encore assez éloignées du natif.

React Native : le cousin des States

React Native est le penchant mobile du framework de Facebook, React. Encore en cours de finalisation, il apporte une autre réponse au fameux mythe du “écrire une fois et déployer partout”. L’intérêt principal est qu’il utilise la même bibliothèque (donc même syntaxe) que React, et permet donc, modulo les éléments spécifiques aux plates-formes mobiles, de réutiliser le code pour une version bureau ou web, tout en créant des versions natives pour Android et iOS. Il devient même envisageable, avec un peu de réécriture, de l’associer à un Cordova pour le déployer sur d’autres plates-formes que celles gérées par le framework.

Points positifs

  • performances natives ;
  • framework édité par Facebook, donc bien maintenu ;
  • logique de composants ;
  • même syntaxe que React (donc possibilité de sortir une version web).

Points négatifs

  • framework jeune ;
  • compatibilité IOS et Android (partielle pour l'instant), mais pas de Windows Phone prévu ;
  • nécessité d'utiliser des conditions pour différencier le code spécifique aux composants natifs des différentes plates-formes (on peut vite se retrouver avec des if en pagaille) ;
  • n’est pas du web à proprement parler et donc demande une adaptation pour les développeurs.

En résumé

Chaque solution possède ses forces et ses faiblesses. Ionic reste à l'heure actuelle le meilleur moyen d'obtenir rapidement une application fonctionnelle et respectant relativement bien l'esthétisme des plates-formes auxquelles elle se destine. Si votre besoin comprend une compatibilité Windows Phone, il est indispensable de se tourner vers du Cordova avec des kits UI ou de tout réaliser à la main. Enfin, si c'est la performance qui guide votre choix, React Native est votre meilleure option, suivi par Cordova.

Bien sûr, il existe d’autres frameworks, et l’envie de les tester ne manque pas ! Ceux présentés dans cet article sont largement utilisés, et nous avons eu la chance de pouvoir nous même les mettre en production. Si vous avez des expériences à partager avec la communauté, n’hésitez pas à nous écrire un petit mot !

Formations associées

Formations Front end

Formation Angular

Nantes Du 22 au 24 mai 2024

Voir la formation

Formations Front end

Formation Développement d'applications JavaScript

À distance (FOAD) Du 1er au 5 avril 2024

Voir la formation

Formations Mobile

Formation React Native

À distance (FOAD) Du 19 au 21 novembre 2024

Voir la formation

Actualités en lien

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus