Introduction
Vous le savez peut-être, aujourd’hui deux possibilités majeures s’offrent à un développeur pour lancer le développement d’une application mobile : le développement dans le langage natif de chaque plateforme (Android VS iOS) et le développement cross-platform. Ce dernier est particulièrement recherché dans certains cas, car il permet de mutualiser les développements et les coûts de maintenance entre les deux OS.
Au sein des technologies permettant un développement cross-platform, plusieurs possibilités sont là encore en balance, parmi lesquelles notamment Ionic, Xamarin, React Native ou encore Flutter. Ce dernier est le petit nouveau de l’équipe, puisqu’il est le plus récent (pour en savoir plus sur Flutter uniquement, voir nos différents articles sur le sujet) et qu’il est un peu sur toutes les bouches.
Beaucoup d’entre vous ne savent peut-être pas quel framework de développement choisir au moment de développer leur application mobile. Cet article a justement pour but de vous aider à différencier deux d’entre eux qui sont souvent mis face à face, à savoir React Native et Flutter. Comment faire votre choix ? Quels critères prendre en compte ? On vous dit tout (ou presque) dans cet article.
Précision : cet article étant rédigé début 2022, certains éléments avancés ici pourraient être amenés à être modifiés dans les mois à venir avec l’évolution de ces technologies et notamment l’évolution rapide de Flutter.
Points communs
Pour chacun de ces frameworks, le but est de mutualiser un maximum de code entre les plateformes. Dans les deux cas, vous pourrez écrire la quasi-totalité de votre application en n’utilisant qu’une seule base, les frameworks se chargent de faire le lien tant du côté des vues (voir le chapitre suivant pour plus de détails) que du code métier / technique.
Un autre point commun est que, dès que vous aurez besoin d’avoir accès à des fonctionnalités propres au device hôte (par exemple le GPS), vous devrez, s’il n’existe pas déjà, créer un plugin en charge de permettre la communication entre le framework et le système. Dans les deux cas, vous serez à ce moment amené à avoir recours au langage de la plateforme cible (Kotlin / Swift) et il sera donc nécessaire d’avoir un minimum de connaissance sur cette plateforme.
Différences
La première différence – et la plus évidente – vient du langage utilisé pour développer sur ces deux frameworks. Quand React Native cherche à attirer un public de développeur web en se focalisant sur un langage connu (javascript), Flutter se base quant à lui sur un langage qui pour l’heure n’est utilisé que pour développer du Flutter (dart). Bien que ce dernier s’inspire très fortement du javascript, il faudra tenir compte sur les premiers projets de la montée en compétence nécessaire des équipes pour maitriser ce nouveau langage, en gardant à l’esprit que ces connaissances ne pourront pour le moment être utilisé que pour produire des applications Flutter.
Une autre différence réside dans l’approche choisie sur chacun de ces frameworks pour afficher le contenu de votre application. Dans les deux cas, et à la manière de Ionic par exemple, le framework sera embarqué dans une application native. Mais, là où Flutter utilise un canvas pour dessiner son contenu, React Native va utiliser des composants natifs à la plateforme pour afficher ses vues.
Chacune de ses approches à ses avantages et ses inconvénients.
Coté Flutter, la stratégie adoptées, portée par un rendu accéléré, permet de garantir une grande fluidité ; 60 images par secondes sont promises sur le site de l’éditeur. L’inconvénient de cette approche est que tout changement de design sur l’une des plateformes cibles demande à l’équipe de Flutter de réécrire ses composants pour les faire se rapprocher du rendu cible.
Coté React Native, l’utilisation des composants de la plateforme cible vous assure d’avoir un rendu en phase avec l’écosystème en place sans travail supplémentaire. Et, si dans les premiers temps les performances étaient impactées négativement par cette approche, ce n’est aujourd’hui plus le cas, les applications développées en React Native auront des performances à l’affichage proches du natif. En revanche, si votre application présente des vues « exotiques », ou si son design est poussé, le travail à fournir sera plus important et pourrait aller jusqu’à devoir développe une librairie de composants par plateforme avec les interfaces nécessaires pour les intégrer dans React Native.
Focus sur l’architecture
Comme expliqué dans le chapitre précédent, Flutter et React Native abordent le problème de création de la vue sur les plateformes cibles de deux manières différentes : le premier fait le choix d’utiliser un canvas, le second va chercher à utiliser des vues natives. Cette différence a un impact direct dans la façon dont son architecturés ces frameworks.
Voici un graphique présentant la structure du framework React Native :
On voit sur ce graphique que le code React Native produit lors du développement d’une application fonctionne sur les plateformes cibles grace à un « bridge ». Ce bridge a la charge d’interpréter les commandes induites par le code pour demander à la plateforme cible d’effectuer les opérations nécessaires.
Voyons maintenant comment fonctionne Flutter :
On voit clairement que toute la partie graphique est maintenant prise en charge par l’application, c’est-à-dire par le framework lui-même.
Conclusion – Comment faire mon choix ?
Maintenant que vous y voyez certainement un peu plus clair sur ces deux frameworks de développement, résumons la situation selon les points qui nous paraissent essentiels.
Je privilégie plutôt Flutter dans les cas où :
- J’ai besoin de composants graphiques sur-mesure
- Mon équipe de développement n’a pas ou peu d’expérience autour de JavaScript
- Mon UX/UI est identique entre Android et iOS
Je privilégie plutôt React Native dans les cas où :
- J’ai besoin d’en rendu graphique natif, propre à chaque plateforme
- Mon équipe de développement est plutôt orientée Web et expérimentée autour des technologies JavaScript
- Je souhaite mutualiser des librairies avec une application Web (attention, pas ou peu de mutualisation sont possibles sur la partie graphique, même avec React JS)
Envie d’en savoir plus ? Notre équipe est à votre écoute pour en discuter davantage et vous aider à faire le bon choix en fonction de votre contexte, de vos contraintes et de vos enjeux. N’hésitez pas à nous contacter via notre formulaire de contact.