Avantages et inconvénients de Flutter pour le développement mobile hybride

Si, une fois le pour et le contre pesés, vous avez décidé qu'une technologie hybride est plus judicieuse pour votre projet, nous aimerions vous expliquer pourquoi nous pensons que Flutter est le framework à privilégier. Initialement sorti en 2017, il s'agit de l'une des solutions hybrides les plus récentes pour les applications mobiles. Malgré sa jeunesse, Flutter est riche en fonctionnalités et présente plusieurs avantages clés qui en ont fait notre framework hybride préféré chez Atipik. Voici pourquoi.

Les différentes technologies hybrides pour votre application mobile

Avant de retenir Flutter comme notre technologie hybride préférée, nous avons essayé plusieurs autres solutions au cours des années. Malgré leurs mérites respectifs, elles présentaient toutes des inconvénients suffisamment importants pour ne pas y investir trop de temps et d'énergie. Voici une rapide rétrospective de celles que nous avons essayées et ce que nous en pensons.

Le plus ancien que l’on a testé : Ionic Framework

Ionic Framework a été publié en 2013 et est le plus ancien des frameworks que nous avons essayés. Il fournit un environnement HTML, CSS et JavaScript au-dessus des systèmes d'exploitation mobiles, agissant comme un navigateur. Il dispose de librairies permettant d'accéder aux API natives des appareils sous-jacents, ainsi que des librairies de composants d'interface utilisateur émulant les contrôles mobiles standard. Alors qu'il était à l'origine construit sur AngularJS, il est désormais basé sur la technologie des Web Components, ce qui donne au développeur la liberté d'utiliser le framework Web de son choix.

Ionic présente deux avantages principaux :

• Les développeurs web pourront être opérationnels très rapidement, quel que soit le framework,
• C'est une technologie mature avec une bonne documentation et un bon support communautaire.

Mais le framework présente des inconvénients qu'il ne faut pas négliger :

• Ionic offre souvent une expérience utilisateur qui semble en désaccord avec les conventions de la plateforme sous-jacente : timings de transition étranges, anomalies visuelles, etc.
• Il n'est pas aussi performant que les autres technologies hybrides que nous avons essayées.

React Native, demande beaucoup de maintenance

React Native a été créé et publié en 2015 par Meta (à l'origine Facebook). C'est un dérivé du framework React de Facebook ciblant les plateformes mobiles. De la même manière que Ionic, il fournit un environnement de développement de type web. La principale différence vient du fait que les composants React Native sont en fait associés à des vues natives de la plateforme sous-jacente (UIView sur iOS, et View sur Android). Comme son projet parent, il s'agit également d'un framework avec une architecture applicative basée sur le modèle Unidirectional Data Flow (alias Redux).

Il présente la plupart des avantages de Ionic, ainsi que les deux suivants :

• Il a une grande communauté de développeurs, et donc des ressources tierces sont facilement disponibles (forums, Stack Overflow, etc.),
• Il peut être utilisé pour paraitre plus natif que Ionic en utilisant autant de composants que possible soutenus par des contrôles système ainsi que des contrôleurs de navigation natifs.

Mais malheureusement, nous avons constaté un grave inconvénient de React Native :

• L'effort de maintenance est substantiel, en raison de la vitesse à laquelle le framework principal de React Native rompt la rétrocompatibilité, et en raison du grand nombre de dépendances indirectes.

Kotlin Multiplatform Mobile, prometteur, mais trop jeune

La première version alpha de Kotlin Multiplatform Mobile a été publiée en août 2020 par JetBrains, la société qui a développé le langage Kotlin et l'IDE Android Studio. Cette solution multiplateforme constitue une approche intermédiaire entre les technologies purement hybrides et natives. Par rapport aux précédents prétendants, KMM n'est pas un framework mais un build system qui permet aux développeurs d'écrire du code en Kotlin qui cible nativement chaque plateforme. Cela permet de partager une base de code pour la logique non liée à l'interface utilisateur, tout en gardant la flexibilité de mettre en œuvre l'interface utilisateur de chaque plateforme avec les API natives.

Cette architecture très différente présente deux avantages principaux :

• Elle permet de développer des applications sans aucun compromis sur les fonctionnalités ou la qualité, car les développeurs peuvent accéder directement aux API natives de chaque plateforme,
• Vous pouvez commencer à intégrer KMM dans des projets existants, ce qui permet un passage en douceur et progressif à KMM sans réécrire l'application à partir de zéro.

Malgré ces avantages substantiels, nous avons noté les inconvénients suivants :

• C'est une technologie jeune, encore en Alpha, avec une documentation limitée, peu de librairies dédiées et une communauté réduite,
• Le processus de construction et de développement est encore fragile, oscillant entre Android Studio et Xcode.

Il est trop tôt pour que KMM soit une solution prête pour la production, mais elle est prometteuse, car elle peut remplacer le développement natif lorsque le projet le nécessite, sans inconvénient majeur.

Flutter, notre retour d’expérience et notre avis

En février 2022, Flutter aura cinq ans. De la même manière que React Native, il fournit un environnement et un cadre pour développer des applications hybrides à l'aide d'une syntaxe déclarative. Mais il le fait en utilisant Dart, un langage très similaire à JavaScript développé par Google, le premier et principal contributeur de Flutter. Bien qu'il soit plus récent que React Native et Ionic, il a suscité beaucoup d'intérêt et de traction récemment. Cela se reflète dans son évaluation sur Google Trends et Stack Overflow Trends ci-dessous :

Notre première expérience avec Flutter

Lorsque nous avons été chargés de développer une application mobile pour iOS et Android pour l'Université de Genève afin de permettre au personnel de la cafétéria de scanner les codes QR des étudiants pour obtenir des prix réduits pour le déjeuner, en moins de deux semaines, nous avons décidé que c'était l'occasion idéale de nous essayer à Flutter.

L'application se compose d'un petit nombre d'écrans, mais elle devait intégrer une fonctionnalité de numérisation des codes QR, qui est une fonction très spécifique à la plateforme. Nous voulions également continuer à développer en utilisant une architecture de style Redux, comme nous le faisons sur nos autres projets. Grâce à la popularité croissante de Flutter, et à son grand nombre de librairies officielles et tierces, nous avons trouvé des librairies de qualité pour tous nos besoins.

Deux semaines plus tard, nous avions deux applications fonctionnelles sur les stores iOS et Android, qui ont depuis été utilisées pour scanner des dizaines de milliers de codes QR en production sans aucun problème majeur. Voyons ce qui nous a plu et déplu lors de notre utilisation de Flutter.

Les avantages de Flutter pour le développement d'applications hybrides

#1 La qualité de l'environnement de développement

La première chose qui frappe en travaillant avec Flutter est la qualité de son environnement de développement. Vous le remarquez immédiatement lors de la configuration de Flutter en utilisant l'outil de ligne de commande flutter doctor. Il vérifie que Flutter et tous ses outils tiers et dépendances nécessaires (Android SDK, Xcode, Chrome, Android Studio, VSCode) sont installés et à jour. Il vérifie également que tous les appareils connectés sont prêts pour le débogage. Et si quelque chose n'est pas conforme aux attentes, il fournit des informations détaillées sur la manière d’y remédier.

#2 Les plugins Android Studio et VSCode

En outre, Flutter fournit des plugins complets pour Android Studio et VSCode qui améliorerent ces IDE afin qu'ils puissent construire, tester, exécuter et déboguer les applications Flutter sur toutes les plateformes prises en charge. Il est également fourni avec un outil appelé Flutter DevTools qui permet d'inspecter les applications Flutter en cours d'exécution lors du débogage. Flutter dispose également d'une fonction de hot reload, similaire à d'autres technologies hybrides inspirées du Web, qui a parfaitement fonctionné pour nous. Dans l'ensemble, l'équipe Flutter s'est souciée des détails pour que l'expérience de développement soit aussi fluide que possible.

#3 La documentation officielle

Ce souci du détail se retrouve également dans la qualité de la documentation de base, qui est à la fois complète et bien rédigée. Elle contient des instructions pour la configuration de l'environnement de développement, des tutoriels et des exemples de projets, ainsi que des guides sur de nombreux sujets divers concernant le développement, les tests, le débogage, l'analyse des performances et le déploiement. Tout au long du développement et du déploiement de notre application de lecture de QR, nous y avons trouvé de nombreuses réponses à nos questions.

#4 Une bonne retrocompatibilité

Forts d'une expérience passée avec React Native - où la rétrocompatibilité est souvent rompue, ce qui entraîne des problèmes de maintenance majeurs - nous avons été heureux de constater que Flutter a très peu de changements cassants depuis sa conception (en seulement six versions) et a une stricte politique de compatibilité. De plus, le SDK de base n'a pas de dépendances externes, ce qui réduit encore le risque de problèmes de maintenance. À titre de comparaison, React Native a plus d'une douzaine de dépendances tierces.

#5 Une grande communauté

Bien qu'il soit relativement récent par rapport aux autres technologies hybrides, Flutter possède déjà une grande communauté (comme on peut le deviner à partir des tendances Google et Stack Overflow ci-dessus), ce qui se traduit par une grande quantité de librairies tierces de qualité. Par exemple, nous avons facilement trouvé une librairie pour scanner les codes QR en utilisant les API natives iOS et Android. S'il n'avait pas été disponible, nous aurions perdu beaucoup de temps à mettre en œuvre cette fonctionnalité sur les deux plateformes.

Les inconvénients de Flutter pour votre application hybride

#1 Devoir apprendre Dart

Le premier obstacle que nous avons rencontré lors du développement de notre application Flutter était Dart. Bien que ce langage développé par Google soit similaire à JavaScript, il est suffisamment différent pour que nous mettions du temps à le maîtriser. Et nous n'avons encore qu'effleuré sa surface : il est définitivement plus riche en fonctionnalités et moins simple(1) que JavaScript. Comme Dart n'est pas largement utilisé en dehors de Flutter, les développeurs qui apprennent Flutter apprennent un nouveau langage en même temps qu'un nouveau framework, ce qui rend la courbe d'apprentissage assez raide.

#2 La parité des plateformes

L'un des plus grands avantages de Flutter, et aussi sa plus grande faiblesse, est qu'il n'utilise pas d'éléments d'interface et de contrôles natifs, comme le fait React Native. Au lieu de cela, Google a réimplémenté les contrôles de chaque plateforme au-dessus de son propre moteur de rendu (voir les widgets Material Components et Cupertino). Cela permet à Flutter d'être réellement indépendant de la couche d'interface sous-jacente de chaque plateforme, ce qui est excellent pour la stabilité du framework. Mais cela peut également poser problème lorsqu'un projet dépend fortement des contrôles natifs : les réimplémentations ne peuvent jamais être parfaitement équivalentes. Par exemple, si une nouvelle version d'iOS modifie les composants natifs, par exemple en modifiant l'apparence des barres d'onglets (comme ce fut le cas dans iOS 15), ou en introduisant un nouveau geste pour revenir en arrière dans les piles de navigation (comme ce fut le cas il y a quelques années), la réimplémentation de ces éléments d'interface par Flutter ne bénéficiera pas automatiquement de ces changements. L'application Flutter aura l'air étrange à côté d'une application native.

#3 La propriété de Google

La dernière ombre à notre évaluation de Flutter n'a rien à voir avec les mérites du framework, mais avec sa gestion. Bien que Flutter et Dart soient des projets Open Source, les employés de Google en sont toujours les principaux contributeurs. Si Google décide demain d'arrêter tout travail sur ces projets, comme ils ont été connus pour dans le passé, cela aura un impact dramatique sur Flutter. Il est peu probable que cela se produise, mais c'est un risque que nous devons accepter lorsque nous l'utilisons.

Alors, faut-il utiliser Flutter pour votre application ?

Grâce à la qualité de son environnement de développement, de sa documentation, de sa communauté, de son écosystème de librairies, ainsi qu'à son souci de rétrocompatibilité, nous pouvons dire que Flutter semble être le bon candidat pour les futurs projets hybrides chez Atipik. Notre expérience avec le développement de l'application pour l'Université de Genève le confirme : nous avons pu offrir une très bonne expérience utilisateur et de bonnes performances sans que le framework ne vienne jamais nous gêner.

Mais ce n'est pas la fin du développement natif chez Atipik, loin de là. De nombreux projets nécessitent encore des éléments d'interface et des contrôles natifs. Et nous avons parfois besoin de la flexibilité que seules les API de la plateforme nous offrent. Cependant, une fois que le choix d'une solution hybride est fait pour un projet, nous sommes désormais confiants dans l'utilisation de Flutter.

Flutter est encore une jeune solution de développement mobile, nous devrons donc prendre en compte nos retours d'expérience à long terme pour pouvoir le désigner définitivement comme notre framework hybride de référence chez Atipik.

Notes de bas de page

(1) Le terme simple est utilisé ici pour signifier que JavaScript a moins de fonctionnalités et est plus facile à prendre en main. On pourrait dire que JavaScript n'est pas simple à maîtriser, car certains de ses cas particuliers et comportements non définis sont notoirement délicats.