30/01/2020 - 16:59

Flutter : Le seigneur des Frameworks

flutter-cover.jpg

Découverte de Flutter

Description

Flutter est un projet “Open Source” de Google qui rassemble différents projets eux-mêmes “Open Source”, que Google a acquis ou développés en interne au cours des dernières années, et plusieurs autres bibliothèques “Open Source” de la communauté. L’objectif de ce projet est d’offrir aux développeurs les outils et frameworks pour créer des applications compatibles avec tous les environnements digitaux.
Bien sûr, au vu de l’ambition de son projet, Google en a profité pour pousser son langage de programmation maison, Dart, et lui donner un petit coup de pouce dans la course au langage préféré des développeurs. Très ressemblant à Java et Javascript, il est facile à prendre en main.

“Dart is a client-optimized language for fast apps on any platform”
Google

Google vante la simplicité d’utilisation de Flutter en disant qu’aucune expérience en développement mobile n’est nécessaire pour démarrer. Et va même plus loin en disant que des “non-développeurs” ont déjà réalisé des applicateurs grâce à Flutter. Alors, comment ça marche ?

Fonctionnement

Architecture

L’architecture de Flutter est composée de deux couches. Le “Framework”, couche à laquelle les développeurs ont accès pour développer les applications, et le “Moteur C++”. C’est cette seconde couche qui représente l’arme secrète de Google. Avec l’aide des différentes bibliothèques qu’il comporte, Flutter dégage un avantage certain par rapport aux autres technologies multi-plateformes. Le code est compilé en code natif en amont, donc dans le langage de la plateforme pour les applications natives ou en Javascript pour le Web. Grâce à ce code, Flutter n’a pas besoin d'interprète” (Bridge) pour communiquer avec le système d’exploitation sur lequel l’application est installée. Ce qui limite les échanges entre l’application et la plateforme, et élimine les lenteurs.

 

Comportements spécifiques à la plateforme et adaptations

Chaque système d’exploitation se doit d’avoir des comportements, et des réactions à l’utilisation, différents les uns des autres afin de se démarquer et de créer des affinités avec leurs utilisateurs. Ce serait un point négatif de ne pas prendre en compte ces comportements spécifiques aux plateformes et d’imposer ceux de Flutter. C’est pourquoi Flutter s’adapte automatiquement aux comportements de la plateforme sur laquelle l’application est installée.
Ci-dessous un exemple représentatif des plateformes mobile : le scroll.

 

Scrolling

Le scroll est une part importante du “look and feel” d’une plateforme. Android et iOS ont tous les deux des simulations de physique de scroll complexes. En règle générale, le scroll d’iOS est plus lourd et a plus de frottement dynamique, tandis qu’Android a plus de frottement statique. iOS gagne en vitesse plus progressivement, s’arrête moins brusquement et est plus glissant à basse vitesse. Afin de respecter ce “look and feel”, Flutter ajuste automatiquement le comportement de défilement pour correspondre à la plate-forme actuelle.
 

scroll-medium.gif

Comparaison de la Physique du Scroll

Concurrence

Depuis le début des applications mobiles, de nombreuses sociétés ont tenté de créer leur framework mobile multi-plateforme afin de répondre à des problèmes de coût et de productivité. Et aujourd’hui, un acteur tend à se démarquer des autres : React-Native de Facebook. Mis au point par le géant des réseaux sociaux pour lui permettre de capitaliser sur sa puissance de développement Web, React-Native est un framework d'applications mobiles open source. Il est utilisé pour développer des applications pour Android et iOS en permettant aux développeurs d’utiliser React – bibliothèque JavaScript de Facebook permettant de créer des interfaces utilisateur –, avec les fonctionnalités natives de ces plateformes.

Comparaison

Une rapide comparaison des domaines importants, pour l’adoption d’une nouvelle technologie, nous donnera les tendances à venir et nous permettra de nous faire une idée sur la position de Flutter.

 

Développement

React Native

React Native utilise Javascript comme langage de programmation, habituellement utilisé pour le web, mais fort d’une grande communauté de développeur surtout chez Facebook. Les résultats obtenus avec React Native sont très satisfaisants, il peut toutefois arriver de rencontrer certains problèmes de réalisations. Lorsque l’on se retrouve face à ce genre de fonctionnalités non réalisables avec React Native, on est dans l’obligation de trouver des solutions de contournement. Il peut être nécessaire d’avoir des compétences en Natif, pour développer une partie de l’application React Native en natif.

 

Flutter

On a déjà vu dans les parties précédentes que Flutter utilisait Dart, qui lui non plus  n’a pas été inventé pour les applications mobiles. C’est toutefois bien Google qui en est à l’origine., s’assurant ainsi que Dart fonctionne avec les plateformes mobiles et ne souffre d’aucun problème d’APIs.

 

Performance

Les applications multi-plateformes n'étant pas totalement en adéquation avec le matériel de l'appareil, leurs performances sont dégradées par rapport aux applications natives. La raison à ça est l’interprète Javascript (“Bridge”) qui existe entre la couche d’application React Native et les composants matériels. Chaque interaction avec le périphérique doit passer par cet interprète. Plus le nombre d'interactions est élevé, plus les performances des applications sont mauvaises. React-Native est utile pour les applications simples, mais pas pour les applications comportant de nombreux écrans, interactions, transitions et animations complexes.
Comparons donc les performances de React Native et Flutter. Comme expliqué précédemment, Flutter n’a pas besoin de passerelle pour interagir avec les composants du système d’exploitation. Flutter pouvant résoudre de nombreux problèmes à l’aide du moteur Skia, cela permet de minimiser les interactions requises avec le matériel de l’appareil. De plus, Flutter utilise le C++ en complément du langage de programmation Dart. Le tout a pour conséquence de permettre à Flutter d’offrir des performances équivalentes aux applications natives.

 

Communauté / Maturité

React Native a été lancé en 2015. En 5 ans, de nombreuses applications mobiles populaires ont été développées avec l'aide de React Native : Facebook, Instagram, etc. (pas entièrement, seulement quelques écrans). De plus, React Native compte une communauté bien plus importante que Flutter. Les développeurs ont eu le temps de créer divers outils et bibliothèques pour automatiser et aider au développement d’une application.

Du côté de Flutter, l'immaturité est son plus gros défaut. Dévoilé à la communauté développeur en 2017, il a été annoncé opérationnel pour la production qu’au cours de l’année 2018 et doit encore étoffer son spectre fonctionnel. 
Les développeurs du monde entier commence à peine à le prendre en main, ce qui ne l’empêche pas de déjà posséder une collection impressionnante d’outils et de bibliothèques. Malheureusement, de nombreux services n’ont toujours pas commencé à prendre en charge Flutter, notamment les systèmes de paiement, les logiciels et même les systèmes Apple TV et Android TV. De nombreux outils sont en cours de développement.

Actuellement React Native est le plus mature des deux mais Flutter gagne rapidement en popularité le développement d’application comme Alibaba en est un exemple et d’autres sont à venir.

 

Tendance

Depuis l’annonce du lancement de sa Bêta, Flutter est en forte adoption auprès des développeurs du monde entier. Les bons indicateurs sur l’adoption d’une technologie dans le milieu du développement sont notamment le nombre de contributions à un projet “Open Source”, le nombre de questions concernant la technologie sur des forums d'entraide tel que “Stack Overflow” ou encore la tendance au sein des recherches Google.
Github 2019 https://octoverse.github.com/

Nombre de contributeurs au projet open source
Flutter 13 000
React Native 9 100

Google Trends

 
Les résultats reflètent la proportion de recherches portant sur un mot clé donné dans le monde entier et pour une période de 5 ans, par rapport à la région où le taux d'utilisation de ce mot clé est le plus élevé (valeur de 100). Ainsi, une valeur de 50 signifie que le mot clé a été utilisé moitié moins souvent dans la région concernée, et une valeur de 0 signifie que les données pour ce mot clé sont insuffisantes.

 

Stack Overflow

Ce que ça laisse entrevoir

La promesse de départ de Google est-elle tenue ?

Flutter is Google’s UI toolkit for building beautiful,

natively compiled applications for mobile,

Flutter Mobile a été marqué prêt pour la production au cours de l’année 2018. Il a actuellement une version stable 1.9. Il a été détaillé en amont combien Flutter était puissant et pouvait égaler la programmation native. Son immaturité, et donc son manque de bibliothèques développées par la communauté pour faciliter le développement, peut être un frein à la refonte d’applications natives complexes. Mais il est possible de commencer par intégrer quelques écrans à l’application native existante.

 

web,

Flutter for Web est actuellement en phase de “Technical Preview”. Beaucoup de plugins ne sont actuellement pas portés sur le Web. Mais on peut faire confiance à Google pour que ça avance vite. Les développeurs en interne ont une grande expérience de la trans-compilation pour le Web – Google Web Toolkit utilisant Java, Angular utilisant TypeScript (développé par Microsoft). Et maintenant Dart – développé en interne et en “Open Source”.

 

and desktop

Flutter for Desktop en est encore à ses débuts. L'idée est la même que sur le Web et sur mobile. Google utilisera sûrement son travail en cours sur son système d’exploitation ChromeOS, ce dernier pouvant déjà prendre en charge des applications Linux et Android. Flutter pouvant lui aussi prendre en charge des applications Android, celle de Linux n’est certainement pas loin. Le système d’exploitation se basant sur le navigateur web Chrome, Google continuera évidemment de s’appuyer sur le moteur graphique Skia.

 

from a single codebase.

“We're making great progress with Flutter's support for running in the browser [...]. As you've probably figured out, our web support is currently in a pre-beta stage, so it's not quite ready for production usage [...]. We think Flutter will work well for all kinds of web-based needs, from casual games to car configurators, from companion web experiences for Flutter mobile apps to embedded content within an existing web app.” 19 octobre 2019 - Tim Sneath | Group Product Manager for Flutter and Dart at Google

Conclusion

2018 était l’année de l’explosion des PWAs aux yeux du grand public. 2020 sera sûrement l’année de l’application multi-plateforme avec Flutter comme ambassadeur. Ce framework nous a démontré qu’on pouvait déjà compter sur lui pour des applications simples. En parallèle, vous pouvez continuer avec vos applications natives Android / iOS existantes et commencer à y créer de nouvelles fonctionnalités avec Flutter.
Au vu de la croissance de celui-ci, on peut imaginer que sa compatibilité avec tous les navigateurs web sera pour 2020. Alors, à ce moment-là, nous pourrons peut-être parler du framework ultime. Car avec un code unique on pourra cibler les plateformes les plus utilisées dans le monde

 

“One Framework to rule them all, [...] and in the darkness bind them”
 

THIBAULT SORMAIL, INGÉNIEUR DE DÉVELOPPEMENT ANDROID

Voir le profil LinkedIn de Thibault