Blog Agaetis

Flutter 2 vient de sortir ! Mais au fait, c’est quoi ?

20/04/2021| Blandine Rondel & Bastien Humbertread_time 6 min.
Retour au blog

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

L’architecture d’une application native : les API de la plateforme sont directement appelées (affichage, API hardware etc…). Les Widgets sont les composants natifs à l’affichage (liste, bouton, texte etc), rendus dans le “canvas” du mobile.

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…)

L’application hybride est écrite en HTML + JavaScript et utilise l’affichage des pages web du mobile. Elle communique avec l’hardware à travers le “pont” du framework.

Ces applications sont en réalité des vues webs en HTML, rendues par le mobile, de la même manière qu’un navigateur. Elles utilisent un service fourni par le framework pour faire le pont avec les services bas niveau du téléphone (caméra, audio, position, bluetooth etc).
L’avantage principal est évidemment l’utilisation des technologies du Web : échelle de popularité différente, langage interprété permettant le hot reloading et partage de la même base de code pour les deux plateformes. Mais tout cela au prix de performances bien plus réduites qu’en développement mobile natif, puisque l’on passe ici par une Webview à l’affichage.

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

L’application React Native est aussi développée avec les technologies du Web mais gère son propre affichage, en embarquant l’interpréteur JavaScript. Elle communique avec la plateforme entière à travers le pont du framework.

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 ?

Une application sous cette technologie, développée en Dart, gère son propre affichage et n’a pas besoin de passer par un pont de communication avec le monde natif.

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.

Différents exemples de widgets (source)

Qu’est ce que le Dart ?

Langage créé par Google en 2011, il a la particularité principale de pouvoir être compilé vers la plupart des langages machine ou transpilé en JavaScript. Ainsi, tout comme ce dernier qui est interprété, le Dart permet la même puissance de développement (hot reloading etc), mais avec les avantages en production d’un langage compilé (performances). Le meilleur des deux mondes.
Le langage est assez proche de JavaScript dans sa syntaxe et est de la même manière mono-thread, ainsi que de nature asynchrone (avec notamment l’utilisation des mots-clés “async” et “await”).

Du code Dart peut être compilé vers toutes ces architectures processeur ou transpilé vers du JavaScript (source).

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.

L’écosystème du développement mobile ne s’y méprend pas : Flutter semble en effet avoir dépassé React Native en popularité vers mi-2020 (Google trends).

Les nouveautés de Flutter 2

Comme mentionné dans l’introduction de cet article, la version 2 de Flutter vient de sortir.

Une petite image qui résume les nouveautés de la version 2 (source)

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.

Sur un Xiaomi Redmi Note 5.
Sur un Iphone 6.

Le constat est donc sans appel !

Un sujet vous intéresse ? Une question ? Contactez-nous

Nos adresses

Clermont-Ferrand
9, allée Evariste Galois
63170 Aubière
Tél. 04 73 35 47 51
Paris
21, rue de la banque
75002 Paris
Tél. 01 44 63 53 13
Lyon
52, Quai Rambaud
69002 Lyon