Cordova : Applications mobiles hybrides

Apache Cordova

À moins de ne faire aucune veille technologique, tous les développeurs ont déjà entendu parler de Développement mobile hybride, ou au moins de Cordova. Pourtant, c'est un outil encore assez peu utilisé.

Il existe deux grands axes de développement quand on cible les plateformes mobiles (iOs, Android, Windows Phone...) :

  • Les applications natives : le code de l'application est écrit dans un langage "compilable" (pour les principaux : Objective-C ou Swift pour iOs, Java pour Android, C# pour Windows Phone...). Nécessite l'apprentissage d'un langage et d'outils spécifiques à chaque plateforme.
  • Les application web : le code est écrit en HTML, JavaScript et CSS. L'application est exécutée dans un navigateur web (Safari Mobile, Chrome Mobile...), indépendamment du système. Implique des restrictions, notamment l'incapacité d'utiliser les fonctions natives de l'appareil : NFC, Calendrier, Contacts, SMS/MMS, Appareil photo / Caméra, accès au système de fichiers...

Le but du développement hybride est de parvenir à une solution alternative alliant le meilleur des deux axes : profiter de l'accès aux fonctions natives de l'appareil tout en utilisant les langages du web pour écrire un code commun à tous les systèmes mobiles. L'objectif étant (entre autres) de réduire les coûts et le temps de développement. C'est très exactement ce que propose Cordova.


Cordova ?

Cordova fournit un conteneur d'application native utilisant une Web View pour seule interface. La Web View (composant du système) utilise toute la surface d'écran disponible pour l'exécution et l'affichage de l'application.

Schema Cordova (Mes talents de GIMPeur resteront inégalés !)

Une application "hybride" est donc une application web exécutée par une application native, profitant de toutes les fonctionnalités natives du système. C'est possible grâce aux nombreux plugins Cordova.
En effet, Cordova permet aux développeurs d'exécuter du code natif avec JavaScript. Les plugins réalisent généralement une à deux fonctions et contiennent le code natif requis pour plusieurs plateformes. Par exemple, le plugin Camera contient du code natif pour iOs (Objective-C), pour Android (Java), pour Windows Phone (C#)... Permettant la capture de photo/vidéo sur plusieurs systèmes différents avec un seul code JavaScript (voir navigator.camera.getPicture()).

Parmi les plugins les plus utilisés (certains seront présentés dans les prochains articles), on note aussi :


Un mot sur les "frameworks Cordova"

Ce point mériterait plusieurs articles à lui-seul mais il est important de préciser qu'il existe des "extensions" pour Cordova, ou plutôt des sur-frameworks. C'est le cas notamment de PhoneGap et Ionic.

PhoneGap

PhoneGap est le projet à l'origine de Cordova (confié à Apache). Si PhoneGap exploite maintenant Cordova comme "moteur" d'application mobile, de nombreux services périphériques additionnels sont proposés tels que PhoneGap Build (compilation en ligne de binaires livrables : .ipa pour iOs, .apk pour Android...), une interface de commande (CLI) enrichie, une application de prévisualisation/test...

Ionic

Ionic est un framework conçu pour être utilisé avec Cordova ou PhoneGap. Il ajoute à l'environnement initial un ensemble de styles (CSS) et d'icônes (ionicons), ainsi qu'AngularJS et de nombreux services, directives et templates Angular. On y trouve notamment : la directive ion-refresh (pull to refresh), $ionicLoading (backdrop et icône de chargement)... Mais aussi une interface de commande enrichie, une configuration Gulp et plusieurs services périphériques sur ionic.io.


Les faiblesses du développement Hybride

S'il présente de nombreux avantages, le développement hybride n'est pas exempt de défauts. On peut notamment constater d'importants écarts de performances selon les périphériques et la version de leur système d'exploitation. Sur les versions d'Android antérieures à KitKat (4.4), il est commun de constater des ralentissements lors d'animations CSS impliquant des ombres ( box-shadow, text-shadow) ou d'opacité.

En dehors des différences matérielles, les écarts de performances sont aussi fortement dépendants de la Web View native (sur iOs, les performances sont généralement toujours meilleures que sur Android).
Des différences de rendu (HTML/CSS) entre les versions de Web View sont aussi à prévoir (retards d'implémentation de CSS3 pour les plus anciennes : flexbox, clip, ...). Le projet Crosswalk gagne en popularité et mérite un coup d’œil : en effet, il permet d'embarquer une Web View (basée sur Chromium) avec le package binaire de l'application, offrant un rendu unique sur tous les systèmes.

Enfin, la maturité et la stabilité de certains plugins (même "officiels") laissent (assez rarement, heureusement) parfois à désirer pour un passage en production. Dans ce cas, il faudra mettre la main à la pâte et participer au développement sur github :-) !


Pour les curieux, je vous invite aussi à vous renseigner sur Xamarin, qui permet de développer des applications natives pour iOs, Android et Windows Phone, avec C# .NET.