Accueil / Blog / Métier / 2016 / Quelle solution pour mon application mobile hybride ?

Quelle solution pour mon application mobile hybride ?

Par Simon Bats publié 18/02/2016, édité le 22/09/2016
Contributeurs : Enguerran Colson
Un petit guide des frameworks open source disponibles.
Quelle solution pour mon application mobile hybride ?

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-header

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-header

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 header

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 !

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
How to setup Angular Universal How to setup Angular Universal 29/06/2017

Step by step explanation. All the pitfalls to avoid.

Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

SEO : indexing a JavaScript application SEO : indexing a JavaScript application 29/06/2017

How to produce a server-side rendered version of your web application.

SEO : indexer une application Javascript SEO : indexer une application Javascript 29/06/2017

Comment utiliser le code de votre application pour un rendu server-side.

Bien comprendre les Progressive Web Apps Bien comprendre les Progressive Web Apps 20/06/2016

On va beaucoup en parler, voilà de quoi suivre les discussions.