Cette année le BreizhCamp a été victime de son succès avec des places qui se sont écoulées en quelques minutes. Heureusement la Slickteam était présente au rendez-vous, avec des billets pour l’ensemble de ses Partners. Agilité, IoT, Flutter, PWA, … Le programme était riche.
J’ai assisté à un talk intitulé “Flutter : le futur du développement unifié ?” présenté par Romain Rastel ainsi qu’à un codelab Flutter pendant la première journée du BreizhCamp. J’ai commencé le développement sur mobile en 2006 avec J2ME, Windows Phone, BlackBerry puis Android depuis Cupcake… J’ai également longtemps travaillé sur un framework d’application mobile hybride. J’étais donc curieux de Flutter et de son approche différente du cross-platform depuis un moment.
Voici mes retours après cette conférence d’une heure et ce codelab.
Flutter est un framework open source créé par Google qui permet de créer des applications Android et iOS. Les origines de Flutter remontent à 2014, la première alpha date elle de la Google I/O 2017 et la première version stable de décembre 2018.
Build the best way to develop for mobile
Même si avec le temps les plateformes mobiles se sont rationalisées avec seulement deux OS, développer pour Android ET iOS reste difficile et coûteux. On voit souvent deux équipes dédiées, avec ce que ça peut entraîner en termes de coût et d’organisation. Plus généralement, développer pour mobile est une vraie problématique spécifique et différente du développement front web : deux plateformes, des appareils aux performances très différentes, des écrans aux ratios et résolutions différentes et des fonctionnalités différentes.
Les créateurs de Flutter, venant du web, ont aussi fait le constat que les outils de développement mobiles n’étaient pas toujours developper-centric et qu’un simple changement de style, une couleur ou une bordure par exemple, pouvait finalement prendre beaucoup de temps. Une modification faite en une seconde passe par la compilation, le déploiement sur le terminal puis il faut naviguer pour revenir sur la partie de l’application en cours de développement. Frustrant.
Features
Voyons ensemble quelles sont les spécificités de Flutter et comment il aide les développeurs.
Hot reload
La fonctionnalité de Flutter qui est souvent mise en avant, et à juste titre, est le hot-reloading. Elle permet justement de palier à la perte de productivité due aux petits changements, souvent graphiques, qui prennent du temps à ajuster. Sur Android, l’instant run a beaucoup amélioré la situation mais il faut reconnaître que Flutter est bluffant par sa capacité à visualiser les changements dans l’application immédiatement. Il y a quelques limitations, mais globalement on peut changer sans problèmes le rendu d’une page ainsi que sa logique. On retrouve là le confort du développement web.
Animations
Flutter n’utilise pas les composants graphiques du système mais il les simule. Mais on peut dire que c’est réussi car l’illusion est parfaite. Que ce soit sur Android ou iOS, on est non seulement au pixel-perfect mais les animations, les gestures sont les mêmes que pour une application native. C’est très performant et le look and feel est celui qu’on attend d’une application native.
Flutter a pour ça une série de widgets et d’outils pour de belles animations bien intégrées. Il faut aussi noter Flare qui permet aux designers de créer et d’exporter des animations vectorielles vers Flutter.
Il est vraiment facile de faire une application Material Design ou Cupertino avec une UX/UI convaincante.
Natif
En production, le code Flutter est compilé en code natif ARM. Par contre comme nous le verrons plus tard, le rendu est assuré par le moteur Skia et non par le système natif de widgets d’Android ou d’iOS.
Il n’y a pas non plus d’intégration avec les fonctionnalités des mobiles comme la boussole, batterie, bluetooth, NFC… Sauf à utiliser des plugins.
Flutter est donc un framework “natif” avec ces limitations. Ce qui est important c’est que contrairement aux frameworks hybrides ou aux PWA, il n’y a aucunes concessions faites sur les performances.
Third parties
On peut heureusement faire communiquer du code natif avec la partie Flutter via un système de messages, un peu comme ce qu’il se passe dans Cordova.
Les dépendances sont gérées par pub qui permet d’ajouter des packages ou plugins.
Package : Dart
Plugin : Dart + Natif (Kotlin, Swift), WebView, Maps, Firebase
Par exemple on retrouve sur pub FlutterBlue qui ajoute l’accès au Bluetooth
https://pub.dartlang.org/packages/flutter_blue ce qui peut être vital pour certaines applications comme l’IoT ou le fitness.
La liste des packages et plugins sont disponibles sur
https://pub.dartlang.org/flutter Il faut avouer que l’offre est relativement complète mais pas encore pléthorique, et que certains plugins semblent jeune (sans juger de leur qualité).
Concrètement à quoi ça ressemble ?
Pour ceux qui n’ont pas eu la chance d’être au codelab Flutter du BreizhCamp avec Pierre Tibulle, Horacio Gonzalez, Romain Rastel vous pouvez le faire en ligne https://ptibulle.github.io
Ce qui est étonnant, mais en même temps agréable, c’est que tout est dans le code. Les plus anciens se souviennent de Swing, ça fait également penser à du React sans JSX.
Une application complète, créée avec Flutter doctor
Le Hot-reload est vraiment un plus, même si parfois l’environnement perd le fil et n’arrive plus à mettre à jour ou à déployer. Là encore des petits problèmes de jeunesse. Enfin, et ça c’est intéressant pour des développeurs habitués à React ou Vue.js, TOUT est Widget.
Regardons sous le capot
Skia et Widgets
Comme mentionné précédemment, Flutter n’utilise pas les composants graphiques du système. C’est en fait le moteur de rendu Skia qui va dessiner les widgets de l’application avec comme objectif du 60 fps, voire pour les plateformes les plus véloces du 120 fps. De plus, Flutter propose des widgets par défaut avec les rendus du Material design d’Android et Cupertino pour iOS.
Dart RT + JIT
Le code est interprété par la VM Dart quand on est en mode debug, ce qui permet le hot reload et facilite le développement et le déploiement sur mobile. La VM Dart supporte la compilation Just In Time (JIT), ce qui assure des performances plus qu’acceptable.
J’étais curieux de savoir si on avait réellement du code natif en mode production. C’est bien le cas : le code Dart est compilé pour ARM en avance, mais il y a besoin de la Flutter library (libflutter.so sous Android). Sur Android, il s’agit bien d’une bibliothèque RunTime à utiliser de concert avec du code NDK et non d’une VM. On a le même fonctionnement sur iOS.
Le futur de Flutter
Flutter Desktop Embedding
Ce projet, encore en exploratoire, permet de builder des applications Flutter pour Windows, macOS et Linux. Pensez à un concurrent d’Electron. À noter que les plateformes desktop ne sont pas officiellement supportées par Flutter, mais ce projet est sous le giron de Google.
Flutter for web
En 2018, Google annonce le projet Hummingbird permettant de faire fonctionner une application Flutter sur un navigateur web. À la GoogleI/O 2019, Flutter va plus loin avec Flutter for web.
Build the best way to develop for a screen
Conclusion
Avantages
Hot-reload et outillage
Un langage moderne : Dart
Moins verbeux : 2 à 3 fois moins de code en Flutter qu’en Android pour une même appli
“Natif”, les performances au rendez-vous
Inconvénients
…“Natif”, mais pas le rendu
Pas d’intégrations aux fonctionnalités natives
L’écosystème est encore jeune et semble manquer de maturité
Dart
Je reste persuadé que dans un monde idéal votre application mobile devrait être native : sans compromis, parfaitement intégrée, performante, sur le store, accédants aux APIs natives de façon efficace. Évidemment c’est plus coûteux et plus complexe, même si vous n’avez pas forcément besoin de deux équipes indépendantes mais plutôt d’une feature team. On me souffle dans l’oreillette que des développeurs à la fois iOS et Android existent.
Ceci étant dit, il faut utiliser la solution qui convient le mieux à vos besoins, cela peut être une PWA, une application hybride ou Flutter. Après de nombreuses années de bon et loyaux services, les frameworks hybrides à base de WebView perdent en attractivité car ils se retrouvent maintenant entre deux tendances : PWA d’un côté et hybride avec rendu non web de l’autre.
Si votre application n’a pas besoin d’API natives, mais que vous voulez une UX à toute épreuve, essayez Flutter.
Voici les slides Flutter : le futur du développement unifié ?
Quant au codelab vous pouvez le faire en ligne https://ptibulle.github.io
Slickteam