Blog

Digital, Innovation, Tech, Web

L’état du multi-plateforme sur le mobile

Par Gilles Grousset, CTO chez Backelite

 

Le développement multi-plateforme (un seul code pour plusieurs OS / périphériques) est un sujet intarissable, plus particulièrement sur mobile, ou nous avons vu un nombre de solutions important défiler ces 6 dernières années.

AirBnB a relancé cet éternel débat le mois dernier en annonçant l’abandon de React Native pour le développement de ses applications. Voilà une excellente occasion de refaire le point sur l’intérêt du multi-plateforme ainsi que sur les différentes solutions du moment pour en faire.

 

Depuis l’avènement de l’informatique et la prolifération des machines et systèmes, une thématique revient de manière redondante à travers les âges, une sorte de Saint Graal : le multi-plateforme, ou comment utiliser un seul code pour adresser plusieurs périphériques / systèmes d’exploitation / écrans.

Grâce aux standards web, nous nous en approchons beaucoup, puisque l’on peut rendre accessible un service sur plusieurs navigateurs / systèmes, et même plusieurs formats d’écrans avec le Responsive Web Design.

Cependant, l’arrivée des smartphones a bouleversé l’ordre établi : nous sommes repassés sur des « applications » avec un code spécifique à chaque plateforme : mais cela n’a certainement pas mis fin aux débats sur le multi-plateforme, bien au contraire.

 

Quel est l’intérêt du développement multi-plateforme sur mobile ?

Si les débats autour du multi-plateforme suscitent tant d’intérêt, c’est bien évidemment parce que la mutualisation de code a un impact potentiel sur les coûts : moins de code à écrire, moins de code à maintenir.

Mais il y’a également un autre aspect à ne pas négliger : la montée en compétences sur les technologies natives coûte cher elle aussi. En effet, le développement natif nécessite une expertise et des outils spécifiques. Or une partie des solutions multi-plateforme est basée sur des technologies web, plus répandues, qui rendent la montée en compétences des développeurs plus simple et plus rapide.

Les spécificités du développement mobile

Avant de faire le tour des solutions multi-plateforme du moment, je pense qu’il est important de cerner les spécificités principales liées au développement d’une application mobile.

 

Le développement mobile : c’est du code front

La première chose à savoir, c’est que le développement d’une application est essentiellement un travail de développement “front”, c’est à dire : travail sur les composants graphiques, animations et navigation. Pourquoi autant de “front” ? Car sur la plupart des applications, la majeure partie des règles métier est portée par des webservices que l’application interroge pour consommer et mettre en forme les données. La répartition du code dans une application est donc environ 70% du code “front”, pour seulement 30% de code “métier” : le code touchant à l’interface graphique est donc le plus important à mutualiser pour que le développement multi-plateforme représente un réel intérêt.

 

La performance est un critère majeur

La deuxième chose à savoir est qu’un utilisateur de smartphone est exigeant : il a plein d’applications à portée de main, et si son expérience est mauvaise dès sa première utilisation, il la désinstallera très rapidement.

Au-delà du design qui doit être bon, il faut donc que la performance technique soit au rendez-vous et éviter que l’interface “accroche sous les doigts” et minimiser les temps d’attente au maximum.

 

Les stores d’application : une vitrine, mais aussi un club fermé où il faut montrer patte blanche

La troisième chose à savoir est qu’une application mobile n’existe que si elle est présente sur un store d’applications (App Store, Play Store) pour être en visibilité des utilisateurs et facilement téléchargeable. Or la présence sur les stores nécessite d’en respecter les règles et contraintes.

Ces règles et contraintes sont souvent techniques : versions de SDK / outils de développement imposées, qualité / stabilité, … et sont bloquantes pour la publication d’une application si elles ne sont pas respectées. C’est un point non négligeable à prendre en compte lorsqu’un développement multi-plateforme est envisagé car l’outil / framework utilisé devra être en conformité avec ces règles là, qui évoluent à chaque mise à jour des outils de développement natifs.

Quelques solutions pour faire du multi-plateforme sur mobile

Que cela soit clair avant d’aller plus loin : le développement natif, spécifique à chaque plateforme, reste la méthode la plus performante et satisfaisante en terme d’expérience utilisateur, d’autres alternatives permettant des résultats similaires seront peut-être disponibles dans le futur, mais ce n’est pas le cas aujourd’hui : il y’a toujours un prix à payer lorsque l’on développe du multi-plateforme.

 

La plus simple : la Webview

La solution la plus simple pour mutualiser du code aujourd’hui est l’utilisation d’une Webview : un composant natif qui permet d’afficher des pages web.

Peut-être mise en place sans framework spécifique ou en utilisant Apache Cordova.

Une fois la coquille (nom de la partie native qui permet d’afficher la webview) développée, le reste du code se fait avec des technologies web et ne nécessite pas de connaissance particulière sur iOS ou Android : ce sont les même pages web qui sont ensuite affichées sur les 2 OS.

 

Les avantages

– Réutilisation maximale du code
– Ne nécessite pas de compétence en développement mobile natif

Les inconvénients

– Expérience utilisateur pauvre (fluidité affichage, réactivité…)
– Phases de recette parfois laborieuses pour uniformiser les rendus sur les différentes plateformes et versions d’OS.

 

L’ovni : Xamarin

Xamarin est un outil avec une approche différente des autres solutions multi-plateforme : il ne fait pas abstraction des frameworks natifs, mais propose un langage commun pour le développement : C#.

La mutualisation de code n’est donc pas totale, puisque même si il n’y a qu’un seul langage de développement, l’adhérence aux outils natifs reste forte.

Côté front : il existe Xamarin.Forms pour mutualiser les composants graphiques.

 

L’avantage

– Un seul langage de développement

Les inconvénients

– Nécessite des développeurs qui maîtrisent les plateformes natives en plus de l’environnement Xamarin.
– Forms est assez limité et n’est pas assez fiable. Il est souvent nécessaire d’écrire du code front spécifique. Or sans possibilité de mutualiser le code front : la solution perd une grosse partie de son intérêt.

 

Du rendu natif avec un seul code : React Native

React Native est une solution de développement mobile natif basée sur ReactJS, framework de développement web populaire initié par Facebook.

 

Tout comme ReactJS : le développement de React Native se fait en Javascript (JSX), mais a la particularité d’utiliser des composants natif pour faire le rendu des vues.

 

Les avantages

– Des vues natives : une expérience similaire à une application native
– Utilisation de Javascript : langage de développement populaire et répandu
– Réutilisation des modules ReactJS existants possible
– Près de 100% du code est mutualisable entre iOS et Android
– Possibilité d’intégrer React Native uniquement sur quelques vues d’une application native (non intrusif).

Les inconvénients

– Le framework est encore jeune et évolue vite : la maintenance d’une application peut générer beaucoup de refactoring à moyen terme.
– Nécessite tout de même quelques connaissances des plateformes natives

 

Le petit nouveau : Flutter

 

Flutter est une nouvelle solution de développement multi-plateforme poussée par Google.

Cette solution se rapproche de React Native puisqu’un seul code permet de générer des interfaces graphiques natives sur iOS et Android.

Il y a cependant 2 différences majeures :

– le code est intégralement compilé en natif, ce qui permet d’obtenir des performances supérieures aux autres solutions.
– le langage de développement est le Dart, un langage poussé par Google, mais assez marginal pour le moment.

 

Les avantages

– Des performances natives
– Près de 100% du code est mutualisable entre iOS et Android

Les inconvénients

– La solution est jeune et l’écosystème à peine naissant (peu de package existants)
– Nécessite d’apprendre Dart

 

Une meilleure intégration des technologies web : les Progressive Web Apps

 

Les Progressive Web Apps (PWA) sont des applications web spécialement packagées pour fonctionner comme des applications natives sur les OS mobiles.

En comparaison avec les Webviews classiques, elles ne nécessitent pas d’avoir à gérer une coquille native, et peuvent accéder à certaines fonctionnalités jusque là réservées aux applications natives comme le mode hors ligne, les notifications, l’exécution de traitements en tâche de fond, etc.

 

Les avantages

– Permet de faire des applications plus riches en utilisant des technologies web.
– Ne nécessite pas de compétence en développement mobile natif.

Les inconvénients

– La réutilisation du code n’est pas optimale entre iOS et Android : l’accès aux fonctionnalités native n’est pas encore normalisé.
– Les performances restent en dessous de ce que peuvent proposer les applications natives.
– Aujourd’hui seul le Play Store de Google permet de publier des PWA : le fait de ne pas pouvoir le faire sur l’App Store d’Apple est très pénalisant pour la visibilité des l’applications.

 

Le mot de la fin

A travers cet article, j’espère avoir pu vous éclairer sur les problématiques et possibilités du développement multi-plateforme sur mobile. Il existe beaucoup de solutions, de plus en plus matures, pour mutualiser les efforts de développement, et celles-ci sont en constante évolution.
Cependant, vous l’aurez compris, si votre critère numéro un est l’expérience utilisateur : le développement natif, certes plus coûteux, reste le meilleur choix possible à ce jour.
Il est par contre tout à fait pertinent d’envisager du développement multi-plateforme si le design est étudié en conséquence afin d’impacter au minimum l’expérience. Selon moi, React Native est de loin la meilleure solution pour un développement multi-plateforme de qualité à l’heure actuelle, même si Flutter est à surveiller de près.