Le petit nouveau du développement mobile commence à faire grand bruit. Flutter, framework signé Google et dédié à la création d’applications Android et iOS (avec un code commun !) est proposé en version stable depuis décembre 2018. Les premiers retours des développeurs sont élogieux, pour un outil qui s’annonce comme une révolution. Après Xamarin, Cordova ou React Native, découvrons ensemble la nouvelle star du développement cross-platform.
Petite histoire du développement mobile
Depuis le début des années 2010 et l’avènement des terminaux mobiles, le marché des applications dédiées en est pleine expansion. Pour répondre à la demande croissante des entreprises et utilisateurs finaux, les développeurs ont besoin de technologies robustes, efficaces et qui limitent les coûts de développement.
Parmi les nombreuses manières de développer des applications mobiles, le développement en natif est jusqu’alors le plus répandu. Appréciées pour leur facilité d’intégration au système d’exploitation et de bonnes performances, les applications natives ont toutefois un inconvénient intrinsèque majeur : elles ne fonctionnent que sur la plateforme à laquelle elles sont destinées.
Sur un marché coupé en deux (Android et iOS), beaucoup de développeurs se sont donc tournés vers les outils de développement multiplateforme comme Xamarin, Cordova, Ionic et plus récemment React Native. Pour les entreprises, c’est un excellent moyen de réduire les coûts et délais de développement : l’application est codée une seule fois et tourne aussi bien sur Android que sur iOS.
Pas mal, mais loin d’être suffisant : l’UX est certes convenable, les coûts et durées de développement réduits, mais le bât blesse côté performances. On est encore loin du natif. C’est là qu’entre en jeu Flutter, framework propulsé par Google et qui pourrait bien changer la donne.
Pour celles et ceux d’entre vous qui sont déjà convaincus et souhaitent acquérir des compétences concrètes dans l’utilisation du framework de Google : nous proposons une formation Flutter de 3 jours pour apprendre à développer des applications ultra-modernes !
Qu’est-ce que Flutter ? Particularités et atouts pour le développement mobile
Flutter est donc un framework open source conçu par Google et destiné au développement d’applications multiplateformes. Jusque-là rien de révolutionnaire, mais nous verrons que côté programmation, certaines fonctionnalités peuvent s’avérer très intéressantes.
De la programmation réactive, mais sans bridge JavaScript
Les frameworks de développement multiplateforme comme PhoneGap, Cordova ou Ionic utilisent le langage JavaScript et les WebViews. Pour faire simple, les applications conçues avec ces outils sont basées sur les technologies web bien connues (HTML, CSS et JavaScript), mais nécessitent un « pont » pour faire le lien avec le code natif.
Ce bridge JavaScript n’était au départ pas si gênant que ça, jusqu’à l’apparition des vues réactives. Celles-ci simplifient la création des WebViews, via des patterns de développement empruntés à la programmation réactive. En 2015, React Native est lancé par Facebook et apporte au monde mobile tous les bénéfices de ces vues réactives : via du code JavaScript, il devient possible de concevoir des apps à l’UI quasi-native.
Problème, ce paradigme de programmation implique un passage par le pont JavaScript bien plus fréquent : jusqu’à 60 fois par seconde. Les performances en pâtissent, et les développeurs React Native doivent architecturer leurs applications de façon à réduire ces transitions entre JavaScript et natif au minimum.
A l’instar de React Native, Flutter fournit des vues réactives. Mais grâce à l’utilisation d’un langage compilé, Dart, plus besoin de passer par le pont. Flutter est aujourd’hui le seul SDK mobile qui fournit des vues réactives sans code interprété, et côté performances il n’y a pas photo !
Également développé par Google, Dart commençait à tomber dans l’oubli, mais le langage de programmation connaît un regain de popularité avec l’arrivée de Flutter. Il est en fait l’une des principales raisons du succès de Flutter auprès des développeurs.
Le langage Dart, véritable atout pour Flutter
Contrairement à JavaScript, Dart est un langage statiquement typé, basé sur des classes et dont les fonctionnalités en font un outil très puissant pour Flutter :
- Dart peut fonctionner en mode AOT (Ahead Of Time), c’est-à-dire que le langage est compilé en un code natif, optimisé pour la plateforme visée. Cela rend non seulement Flutter ultra-rapide, mais quasiment tout au sein du framework (notamment les widgets) peut être personnalisé.
- Dart peut également être compilé JIT (Just In Time). Une compilation à la volée, qui se fait lors de l’exécution d’un programme et qui permet des cycles de développement bien plus rapides et des workflows optimisés (cf. le fameux Hot Reload, abordé un peu plus bas).
- La création d’animations et de transitions à 60fps est également facilitée grâce à Dart. Le langage est en effet très performant pour l’allocation d’objets et son garbage collector à générations (qui élimine les objets en mémoire non utilisés) particulièrement efficace.
- Dart permet également à Flutter d’éviter le recours à un langage de balisage comme JSX ou XML. Pas besoin non plus d’un outil spécial pour la création d’interfaces, qui se fait entièrement via du code Dart.
Finalement, notons qu’apprendre à programmer en Dart est plutôt aisé. Pour les développeurs ayant l’habitude de langages comme C#, Java ou même JavaScript, la syntaxe de Dart devrait paraître familière. Le DartPad est à ce propos un outil bien utile pour s’entraîner.
En soi, les particularités du langage Dart font déjà de Flutter un outil intéressant et qui vaut le coup d’être testé. Mais il y a mieux : la manière dont le framework implémente les widgets.
Des widgets, encore des widgets et toujours des widgets
L’un des principes fondamentaux de Flutter est que tout est un widget. Vraiment tout. La classe de l’application est un widget, la structure de l’interface est un widget, le texte affiché est un widget, les images sont des widgets, les boutons, le padding… bref, vous avez compris l’idée.
Chaque widget a une tâche bien particulière et affecte une petite partie de l’UI. Créer une interface utilisateur en Flutter revient alors à assembler des widgets. Et c’est aussi simple que ça en a l’air. D’autant plus que le SDK contient une large variété de widgets intégrés, et déjà stylisés Android ou iOS.
Imaginez que vous démarriez un projet React, Vue ou React Native avec à disposition des centaines de composants tout prêts et qui respectent le design habituel de la plateforme visée. C’est ce qu’apportent les deux ensembles de widgets Material Design (pour Android) et Cupertino (iOS), qui permettent d’implémenter très facilement à peu près n’importe quel élément. Créer des applications mobiles aussi jolies qu’intuitives n’a jamais été aussi simple, surtout qu’il est également possible d’étendre et de personnaliser les widgets à volonté.
Contrairement à d’autres frameworks qui séparent les vues, contrôleurs, layouts et autres propriétés, Flutter fonctionne donc selon un modèle cohérent et unifié.
Hot Reload mon amour
Autre fonctionnalité très appréciée dans Flutter, le Hot Reload. Très utile lors du développement, il permet d’apporter des modifications dans le code d’une application pendant son exécution, puis de recharger ce bout de code modifié presque instantanément afin de visualiser les changements dans l’UI. Le voici en action :
Typiquement, si votre application comporte une erreur, vous pouvez la corriger puis continuer à travailler comme si de rien n’était, sans avoir à la recharger toute entière pour tester vos modifications.
Voilà ce que déclare un développeur mobile à propos de cette fonctionnalité :
Je voulais tester le hot reloading, du coup j’ai changé une couleur, sauvegardé ma modification et… je suis tombé amoureux !
Cette fonctionnalité est vraiment géniale. Moi qui pensais que le Edit & Continue de Visual Studio était bien, là c’est tout simplement incroyable. Rien qu’avec ça, je pense qu’un développeur mobile peut être deux fois plus productif.
Ça change vraiment la donne pour moi. Quand je déploie mon code et que cela prend du temps, je perds ma concentration, fais autre chose et quand je reviens sur mon appareil/simulateur j’ai oublié ce que je voulais tester. Quoi de plus frustrant que de perdre 5 minutes pour bouger un élément de 2 pixels ? Avec Flutter s’en est fini de tout ça.
Toutes ces fonctionnalités (et bien d’autres !) font donc de Flutter un sérieux candidat pour devenir la référence en matière de développement multiplateforme. Fluture is now !
Des exemples d’applications Flutter
Avant de vous laisser, et pour que vous puissiez vous faire une idée de ce qu’il est possible de faire avec le framework, voici quelques exemples d’applications made in Flutter :
Le site itsallwidgets.com recense également de nombreuses applications développées par la communauté.
Et pour finir, la vidéo de présentation de la dernière mise à jour du framework, Flutter 1.5 :