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

20 avril 2021

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 web 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

Un résumé des nouveautés de la 2ème version ( 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.

Le constat est donc sans appel !

< Post plus ancien

Post plus récent >

Ressources Agaetis

ORY 4 : L’entrepôt d'Amazon le plus robotisé de France

par Florian Ruynat • 15 mai 2024

Introduction : Florian Ruynat, Architecte Cloud, a récemment réalisé une visite captivante de l'entrepôt ORY4, l'un des complexes les plus automatisés d'Amazon en France. Au cœur de cette installation logistique de 152 000 m², où 3 000 employés orchestrent l'approvisionnement et la préparation des commandes, la technologie de pointe est omniprésente. Cette visite a permis d'explorer les possibilités d'intégration de l'IT moderne dans les usines de quatrième génération via le cloud, avec une attention particulière portée à la gestion proactive des pannes, la surveillance des conditions opérationnelles comme la température, ainsi que la gestion des stocks.

Sora : Transformer les Textes en Scènes Vidéo Réalistes et Imaginatives

par David Walter • 16 février 2024

OpenAI, a récemment dévoilé SORA, un outil de génération de vidéo. SORA monte encore une marche, offrant des capacités de génération de vidéos réalistes. Cet article explore les caractéristiques clés de SORA, son impact potentiel sur diverses industries, les points de réflexions et l'impact pour l'avenir de la création de contenu. Qu'est-ce que SORA ? SORA est une interface avancée conçue par OpenAI qui permet de générer des séquences vidéo à partir de descriptions textuelles simples. Utilisant des techniques de pointe en matière d'intelligence artificielle et d'apprentissage profond, SORA est capable de comprendre des commandes complexes et de les traduire en contenus visuels impressionnants. Une qualité de génération inégalée La capacité de SORA à générer des vidéos époustouflantes souligne un tournant dans le domaine de la production vidéo, où la qualité et la créativité ne sont plus entravées par des contraintes techniques ou financières. Cette avancée s'inscrit dans un contexte plus large où l'IA transforme profondément les industries créatives, offrant des outils puissants pour la transcription, le doublage, la création d'avatars générés par IA, et même la suppression de fonds vidéo, rendant ces processus plus accessibles et flexibles. Des outils comme Descript et Adobe Premiere Pro intègrent des fonctionnalités AI pour améliorer le processus d'édition vidéo, depuis la rotation des yeux jusqu'à la génération de transcriptions et sous-titres. De même, la comparaison entre DALL-E 3 et Midjourney montre comment l'IA peut capturer des détails et des ambiances spécifiques dans les images, un principe également applicable à la vidéo. La révolution du streaming vidéo illustre comment l'adaptation numérique bouleverse les modèles économiques traditionnels, offrant une perspective sur la manière dont les technologies génératives pourraient remodeler le paysage médiatique. L'impact de ces technologies dépasse la simple création de contenu ; elles remodèlent également notre compréhension de la créativité et ouvrent de nouvelles voies pour l'expression artistique et la communication. Avec des outils comme SORA, la barrière entre l'idée et sa réalisation se réduit, permettant à un plus grand nombre de personnes de donner vie à leurs visions créatives sans les contraintes traditionnelles de la production vidéo. Cet élan vers une qualité de génération inégalée par l'IA soulève des questions importantes sur l'avenir du contenu créatif et la manière dont nous valorisons l'interaction entre l'humain et la technologie dans le processus créatif. Alors que nous explorons ces nouvelles frontières, il est crucial de rester attentifs aux implications éthiques et aux défis que ces technologies posent, tout en reconnaissant leur potentiel pour enrichir notre monde visuel et narratif.