Qu’est ce qu’une application mobile hybride ?

28 mai 2018

app-hybrid-1

Les applications mobiles hybrides ressemblent exactement à n’importe quelles autres applications sur votre téléphone, elles s’installent sur l’appareil. Vous pouvez les télécharger dans les stores d’applications (Google Play Store, App Store). Elles vous permettent de jouer à des jeux, prendre des photos, vous connecter avec vos amis à travers des réseaux sociaux, gérer votre suivi santé, et bien plus.

Comme les sites internet sur le web, les applications mobiles hybrides sont construites avec une combinaisons de technologies du web, comme HTML, CSS et JavaScript. Les différences principales viennent du fait que les applications hybrides sont imbriquées à l’intérieur d’une application native utilisant la WebView de la plateforme. La WebView est une fenêtre de navigateur sans interface et configurée pour s’exécuter en mode plein écran. Cela permet d’accéder aux fonctionnalités de l’appareil tels que l’appareil photo, l’accéléromètre, le GPS, et d’autres encore. Ces fonctionnalités sont bien souvent inaccessibles depuis les navigateurs mobiles.

Il est difficile de discerner la technologie employée pour une application. Il en va de même pour les applications mobiles hybrides, une application hybride bien développée ne se différenciera aucunement d’une application équivalente native, et les utilisateurs ne s’en rendront pas compte. Tant que l’application est capable de faire ce pour quoi elle a été prévue, personne ne se soucie de la manière dont elle a été conçue. Le site américain Télérik a même été jusqu’à conduire une expérience visant à tester si des utilisateurs étaient capables de différencier une application hybride d’une application native.

Résumé de la vidéo : les participants se font présenter 2 applications, une native et une hybride, le but est de deviner laquelle est laquelle. Ils donnent tous des avis assez tranchés, et à la fin des tests, on leur explique qu’ils ont été piégés, en réalité les 2 applications sont hybrides. Les candidats semblent bluffés par la qualité et les performances de ces applications mobile hybrides.

Comment sont construites les applications hybrides ?

Les applications mobiles hybrides sont construites avec les mêmes technologies qu’un site web. Les deux utilisent une combinaisons des languages HTML, CSS et JavaScript. Par contre, l’application mobile ne cible pas un navigateur, mais une WebView à l’intérieur d’un conteneur natif. Cela leur permet d’accéder aux fonctionnalités matérielles du téléphone / tablette.

La plupart des applications mobiles hybrides utilisent Apache Cordova, une plateforme permettant de convertir une application web classique en application hybride (iOS, Android ou autres), et fournissant des APIs pour accéder aux fonctionnalités natives de l’appareil.

Pour information, Apache Cordova a démarré sous le nom de PhoneGap, aujourd’hui, ce nom existe toujours et désigne une extension spécifique de Apache Cordova incluant des outils supplémentaires.

Ces APIs permettent l’existence de plug-ins pour permettre au développeur d’utiliser des fonctionnalités comme l’accès aux contacts, l’appareil photo, l’accéléromètre, et encore d’autres. Cordova bénéficie également d’une large communauté développant activement des plug-ins, ils sont accessibles dans le registre de plugins d’Apache Cordova.

application-hybride-architecture

Les fichiers d’applications comme le JavaScript, l’HTML et le CSS sont packagés grâce à des outils de la plateforme Apache Cordova. Les plug-ins peuvent ensuite communiquer avec les SDK propres à la plateforme visée (Android, iOS, Windows phone…). Une fois compilé, vous obtenez un fichier d’installation (par exemple, un .APK pour Android, et un .IPA pour iOS), vous pouvez ensuite l’installer et l’exécuter sur l’appareil comme n’importe quelle autre application.

Pour quelles raisons opter pour une application hybride ?

Les applications mobiles hybrides permettent aux développeurs de ré-utiliser leurs connaissances des langages web, leur permettant ainsi de ne pas s’enfermer dans une technologie propriétaire à une plateforme.

Les applications hybrides semblent séduisantes du point de vue d’une compagnie. Pourquoi embaucher un développeur pour chaque système alors que vous pouvez en embaucher un seul et cibler tous les systèmes simplement avec du HTML, du CSS et du JavaScript ? En réalité, les choses sont plus compliqués que cela.

En effet, le développement d’applications hybrides permet de cibler plusieurs plateformes. Cependant, chaque plateforme possède un certains nombre d’inconvénient concernant l’intégration de l’environnement web (ou WebView), particulièrement sur Android qui change beaucoup au fur à mesure des version de l’OS.

Android 5.0 a introduit des WebView qu’il est possible de mettre à jour à distance (« updatable WebView ») grâce à l’Android System WebView.

Dans quels cas faut-il développer une application mobile native ?

Avant de choisir une stratégie de développement mobile, il est important de bien comprendre les avantages techniques et fonctionnels de l’application hybride par rapport à ses alternatives (comme la web-app ou l’application native). Il faut examiner les besoins de votre application mobile, par exemple :

  • Quelle plateforme voulez vous cibler ?
  • Voulez vous distribuer votre application sur des stores d’application ?
  • Avez vous besoin d’accéder aux fonctionnalités natives de l’appareil ?
  • Quelles sont les compétences techniques de votre équipe de développement ?
  • L’approche universelle de l’hybride tient-elle vraiment ses promesses ?

Répondre à ces questions est essentielle avant de se lancer dans le développement d’une application mobile. Afin de pouvoir y répondre, examinons les plus en détail.

Quelle plateforme voulez vous cibler ?

Si vous ciblez plus d’une plateforme, vous avez plusieurs options. Les applications web sont une option très attractive, vous ciblez les navigateurs web, qui pourront exécuter votre application sur n’importe quel système. Les applications hybrides vont de pair avec cette philosophie étant donné qu’elles s’appuient sur la WebView, fonctionnant de la même manière qu’un navigateur.

Le natif, par contre, se retrouve confiné dans un espace séparé. Si vous vous retrouvez dépendant de certains SDK, ou de langages spécifiques à la plateforme, votre application sera étroitement liée à la plateforme en question. Dans le cas d’iOS, le langage de programmation utilisé est l’objective-C, ou Swift, pour Android, il s’agit de Java, et pour Windows Phone, c’est le C#.
Cela dit, il est possible de contourner ces dépendances grâce à des technologies comme NativeScript ou React Native. Ces technologies utilisent une approche similaire au développement hybride, dans le sens ou elles fournissent un pont entre les langages web et la compilation d’applications mobiles. Cependant elles sont très différentes dans la manière dont elles accèdent au système. Ces technologies accèdent aux ressources natives de l’appareil, et non à la WebView pour afficher du contenu.

Voulez vous distribuer votre application sur des stores d’application ?

Si vous avez l’intention de distribuer votre application via un store, vous devez construire une application native ou hybride. Vous ne pouvez pas distribuer un site web sur les stores; ceci est le rôle de la barre d’adresse de votre navigateur ! En dépit de cette restriction, que vous fassiez une application native ou hybride, il est important de posséder un site web associé. Ce sera le premier lieu où vos utilisateurs essaieront d’aller en cas de problèmes sur votre application.

Avez vous besoin d’accéder aux fonctionnalités natives de l’appareil ?

Les sites web ont des capacités limités, par opposition aux applications natives et hybrides. Ces limitations sont imposées par le navigateur qui restreint les possibilités de communication entre le site web et le système d’exploitation, par mesure de sécurité. Cependant, les évolutions récentes des navigateurs ont permis d’exposer un certain nombre de fonctionnalités supplémentaires via l’HTML5, comme l’appareil photo, la géolocalisation, et d’autres.

En dépit de ces avancées, le support des fonctionnalités avancées reste limité. Par exemple, la capture de média et le streaming sont toujours inaccessibles dans les navigateurs mobiles. A cause de ces limitations, beaucoup de développeurs considèrent le développement hybride ou natif comme alternatives. Ils permettent tous 2 au développeur d’accéder aux API de l’appareil – dans le cas de l’hybride, cet accès se fait via des plug-ins.

On dit souvent que le natif est plus approprié pour les applications pour lesquelles les graphismes sont de première importance. Les jeux mobiles sont des classes d’applications qui intègrent des interactions visuelles complexes. Même si un jeux est parfaitement fonctionnel, il aura probablement une mauvaise note sur les stores si il rame. Pour cette raison, les développeurs ont pendant longtemps été contre l’utilisation de l’hybride pour développer des jeux mobiles.

Ceci dit, il existe des solutions pour le développement hybride, comme le Canvas HTML5 et WebGL, qui utilisent les ressources de la carte graphique de manière optimale, permettant le développement de jeux sans problèmes de latences. Il existe des librairies pour exploiter ces solutions, comme Paper.js, EaselJS, et d’autres.

Quelles sont les compétences techniques de votre équipe de développement ?

Un autre aspect important à considérer pour le choix de votre stratégie de développement mobile concerne les compétences techniques de votre équipe. Si vous décidez de faire une application mobile native, vous allez avoir besoin de développeurs spécialisés dans les différents langages de programmation et SDK requis par les plateformes que vous ciblez.
De l’autre coté, les applications web et hybrides sont développées avec des langages web comme le HTML, le CSS et le JavaScript. Vous pouvez avoir une équipe capable de développer votre application pour différents systèmes à partir de ce simple ensemble de technologie. Ce point vaut la peine d’être considéré quand vous évaluez vos options.

L’approche universelle de l’hybride tient-elle vraiment ses promesses ?

Enfin, il est important de se rendre compte que l’hybride n’est pas l’approche ultime à tous les problèmes posés par le développement d’application mobile. Plus haut dans cet article, j’ai mentionné le problème des changements de comportements entre les WebView d’un système à l’autre (ou même entre différentes versions d’un même OS). D’autres problèmes sont toujours là. Avec le développement hybride, vous pouvez vous retrouver dans une situation ou vous ciblez une fonctionnalité spécifique d’une plateforme mobile, pour ensuite vous rendre compte qu’elle est inaccessible car les plug-ins ne sont plus à jour, peu fiable, ou pire encore, inexistants. Dans ce scénario, vous vous retrouvez face au dilemme de devoir supprimer cette fonctionnalité de votre application, ou d’écrire le plug-in vous même – ce qui nécessitera des compétences dans les langages propres à la plateforme visée, ce que vous cherchiez à éviter en adoptant le développement hybride.

Si vous devez développer une application qui nécessite l’accès à de nombreuses fonctionnalités natives, ou bien une application où les performances sont critiques au succès de l’app, il se peut que le modèle hybride soit limitant. Dans ce type de situations, vous devriez normalement être forcé d’opter pour l’approche du développement natif, cela dit, de nos jours, il existe des approches alternatives qui vous laissent créer des applications natives performantes sans avoir à apprendre les tenants et les aboutissants d’outils tels que Xcode ou Android Studio.

Le framework NativeScript, basé sur JavaScript, vous permet de construire des applications iOS et Android qui outrepassent la WebView pour obtenir des performances améliorées. NativeScript permet également un accès complet vers les APIs Android et iOS, ce qui élimine la dépendance envers les plugins qui peut être bloquante quand on développe des applications hybrides. Cela dit, NativeScript n’est pas non plus l’approche ultime pour le développement d’application native. Bien que NativeScript permette des performances meilleures qu’une application hybride, ce gain de performance s’accompagne d’un apprentissage plus long, car NativeScript ne permet pas d’utiliser l’HTML pour construire les interfaces. Toutefois, NativeScript est une option intéressante à considérer si vous créez une application où les performances sont critiques.


Si vous voulez tester NativeScript, vous pouvez commencer par un des tutorials du site (en anglais).

Si vous êtes issu du développement web ou hybride, vous aimerez peut-être également le guide de Nic Raboy pour porter les applications hybrides vers des applications natives (en anglais).

Qui construit des applications hybrides ?

Il y a un certain nombre d’applications hybrides connues disponibles sur les stores d’applications. Parmis mes préférées se trouvent Instagram, Basecamp, Untappd, SydJS et Yelp. Si vous voulez plus d’exemples, vous pouvez également consulter le showcase de PhoneGap, AppGyver et Ionic. Vous y trouverez un listing couvrant de nombreux types d’applications, business, jeux, utilitaires, et autres.

Mettez vous-y dès aujourd’hui

Si vous souhaitez en apprendre plus sur le développement d’application hybride, je vous recommande de télécharger Apache Cordova, de construire un petit prototype, et de tester les résultats par vous même. Je vous recommande aussi de tester NativeScript, car cette technologie combine les bénéfices des deux mondes; un environnement de développement similaire à celui du web, et des performances optimales ainsi qu’un accès direct à la couche de fonctionnalités natives. Cette plateforme se couple bien avec la majorité des IDE les plus populaires (Visual Studio, Sublime Text, …) et il existe plein d’exemples de projets pour vous permettre de démarrer rapidement.

Le point important à retenir concernant le développement d’application mobile en général, est qu’il n’y a pas d’approche unique. Il s’agit d’une variété d’options allant du web vers le natif. Pour évaluer l’option la plus appropriée, il convient d’examiner les différents points de cet article.


Si vous avez un projet de création d’application dont vous voulez discuter, n’hésitez pas à me contacter.
Me contacter pour un conseil


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *