Il y a un peu plus d’un mois, le 3 mars 2021, Google a annoncé la sortie de la v2 de Flutter. Ce framework de développement d’applications multi-plateformes, dont la première version est sortie en Juin 2018, est encore peu connu malgré une adoption qui ne fait qu’augmenter. Dans cet article nous allons voir ce qu’il apporte, notamment dans un contexte de développement mobile.

Quelles sont les problématiques d’aujourd’hui dans le développement mobile ?

Il existe actuellement de nombreuses manières différentes de développer des applications mobiles. Chaque solution a ses avantages et inconvénients, d’où l’apparition de nouvelles au fur et à mesure des années. Flutter s’inscrit dans cette logique et est d’ailleurs à ce titre l’une des dernières technologies disponibles. Comparons-les rapidement !

Le développement natif

La contrainte principale du développement natif est le besoin d’avoir 2 équipes pour gérer chaque plateforme, à cause des langages différents : Java/Kotlin pour Android, Objective-C/Swift pour iOS. Chaque fonctionnalité doit donc être développée 2 fois, avec son lot de tests et donc de bugs potentiels.

À l’inverse, l’avantage principal réside dans le fait d’utiliser les technologies prévues à l’origine pour faire des applications : meilleur support et accès aux dernières fonctionnalités intégrées des systèmes d’exploitation.

Le développement natif est une bonne option dans le cas où le cœur de métier est le mobile et lorsque la performance est la priorité absolue. Dans les autres cas, il peut être intéressant de se tourner vers une autre solution.

Les apps hybrides WebView (Cordova, Ionic...)

Les Progressive Web Apps

Cette technologie là est un peu différente. En réalité ce n’est qu’un site Web installable affiché à travers un navigateur, mais ce dernier cachant son interface pour donner l’impression d’une application normale. Les performances sont évidemment encore moins bonnes que les Webviews et le support des API hardware est implémenté à travers les navigateurs (sur iOS/Safari notamment il en manque quelques unes).

L’utilisation prévue n’est pas la même : ici cela sera plutôt pour pouvoir accéder à une application Web à travers une icône installable sur n’importe quelle machine. Vous pouvez trouver plus d’informations sur cette technologie dans notre article sur les PWA.

Les apps React Native

Apparu pour répondre aux problématiques des Webviews, c’est une solution “entre deux” : on code une vraie application en JavaScript qui utilise les vrais composants graphiques natifs, et un “bridge” relie ce monde avec celui de la plateforme native.

Vous pouvez lire notre article consacré à React Native pour plus de détails. Les performances sont meilleures que les WebView mais restent notablement inférieures aux applications natives, principalement au moment du démarrage, lorsque l’interpréteur JavaScript est lancé et les composants d’UI sont transpilés en composants natifs.

Flutter est heureusement la solution à toutes ces problématiques !

Flutter est différent, mais en quoi ?

Apparu en 2017 et officialisé mi-2018, Flutter se veut être la solution aux problématiques vues jusqu’ici : partage du code entre les plateformes sans que cela se fasse aux dépens des performances. 

Pour ce faire, comme nous le voyons sur le schéma, Flutter n’a besoin que du canvas de la plateforme native pour afficher ses propres widgets de rendus de l’UI, l’application n’utilise en effet pas ceux de la plateforme native. Elle a de même besoin d’un accès aux services hardware. Tout le reste est géré par le framework, sans besoin de “Bridge” de conversion.


“Tout est un Widget” est l’idée centrale de cette technologie, car ils composent l’UI : à la manière de React, chacun peut être imbriqué dans un autre selon le besoin ou être personnalisé à l’envie sans pertes de performances.

Qu'est-ce qu'un widget ?

Les widgets sont des “unités de vue” : ils décrivent un affichage et un comportement (bouton cliquable par exemple). Une action donnée peut changer leur état et ainsi changer l’affichage de l’interface.

 Les  Widgets Flutter sont fournis avec le framework  et ne sont pas convertis en composants natifs, c’est la différence majeure avec React Native.
Puisqu’ils sont fournis avec Flutter et ne sont pas uniques selon la plateforme (Android, iOS…) il n’y a pas de problèmes de compatibilité, un des soucis parfois rencontrés avec React Native où il arrive de faire du code spécifique.

Qu'est-ce que le Dart ?

Dart connaît une popularité croissante depuis quelques années, à noter que Google l’utilise pour créer leur nouvel OS “ Fushia ”, dont le but à terme pourrait être de remplacer Android.



Avantages/Inconvénients par rapport aux autres solutions

Puisque Flutter n’a pas besoin d’utiliser un “pont JavaScript”, on revient à un temps de démarrage très proche des applications natives. De la même manière les performances globales sont bien meilleures, grâce aussi au fait que Dart peut être compilé en AOT en code natif. 

Ce dernier propose également un compilateur JIT, pour permettre une expérience de développement optimale avec le hot reload, similaire aux apps JavaScript.

Enfin, on note que Flutter dispose d’une solution CI/CD supportée par Google, alors que dans toutes les autres technologies vues dans cet article il faut utiliser des solutions externes comme  Bitrise , si on le souhaite.

Au niveau inconvénients, il faut évidemment apprendre un nouveau langage, le Dart, qui n’a pas la popularité de JavaScript ou Java. Par ailleurs, les widgets peuvent être difficiles à appréhender au début, ça peut être comparable à une transition d’Angular vers React. Ce sont les rares inconvénients de Flutter ! Bien entendu les performances restent distinguables de celles du natif mais l’écart est maintenant quasi invisible pour la plupart des utilisations. 

Les nouveautés de Flutter 2

Cette mise à jour comprend principalement la sortie du web stable. De la même manière que React Native, ce framework originellement conçu pour créer des applications mobiles permet maintenant de faire des applications Web. 

À terme, l’idée est de pouvoir concevoir des applications lourdes sous Windows, MacOS ou encore Linux, en plus des applications mobiles et Web, avec le même code. React Native a le même objectif, et les deux technologies semblent aller dans la bonne direction pour résoudre toutes les problématiques induites.



Conclusion

Flutter semble à la hauteur de ses promesses, alors qu’il n’a même pas encore 3 ans derrière lui. Ça ne présage que de bonnes choses pour l’avenir du développement mobile, mais aussi du développement multiplateforme de manière générale. On termine sur un benchmark pour voir concrètement les différences de performances. Voilà un  rapide benchmark publié sur Medium  où le natif, React Native et Flutter sont comparés sur un défilement d’images dans une liste.