Flutter commence tout doucement à se faire une place dans le monde des applications mobiles cross-platform. Mais qu'est ce qu'est Flutter ? Quels sont ses avantages et ses limites ? Et surtout, est-ce un choix judicieux pour votre projet ?
Flutter
Flutter est un framework de développement mis au point par Google permettant de réaliser des applications web, mobile, et desktop avec la promesse d'un seul code source pour toutes les plateformes.
Ce dernier est très jeune: la version bêta a été rendue disponible en Mai 2017, et la première version officielle est, elle, sortie à la fin de l'année 2018. Flutter a donc moins d'un an d'ancienneté en version stable, ce qui en fait un framework voué à subir d'importants vecteurs de progression et d'optimisation.
Le langage utilisé par Flutter, Dart, est, lui avec assez jeune. Sa première version est sortie en 2011, soit seulement 3 ans avant la sortie de la première version de Swift, l'un des deux langages de programmation natif pour iOS. Cette nouveauté toute relative fait que de nombreux concepts actuels manquent à l'appel (comme une réelle gestion de certains aspects de programmation fonctionnelle, avec un fonctionnement différent de ce à quoi un développeur habitué à d'autres langages s'attend). Néanmoins, d'autres notions actuelles sont belles et bien présentes, notamment la gestion des appels asynchrones qui sont prises en charge nativement par Dart.
Cependant, Dart apporte une couche d'abstraction avec le code natif qui supprime certaines fonctionnalités considérées comme "acquises" par défaut. On pense notamment à l'observation de l'état d'une vue défilable, qui peut permettre la création d'effets comme celui-ci:
Il est plus simple qu'en natif de coder les composants standards du design de votre projet et de les réutiliser partout dans votre projet. Si l'étape de l'établissement du design et de ses patterns a été correctement tournée vers cette façon de penser, le temps de développement des écrans de toute l'application se verront grandement réduits par rapport à leur équivalent en natif qui ne permettent pas ou du moins pas aussi simplement de gérer ce cas.
Cependant, il faut faire très attention à garder de la lisibilité dans son code source au fur et à mesure de l'utilisation de ces bouts de composant afin que le projet puisse facilement être maintenu.
Cette logique de composants design s'applique également aux composants logiques de l'application s'ils doivent être utilisés à plusieurs endroits différents (par exemple un champ vérifiant la validité d'une adresse email qui peut être utilisé lors de l'inscription et de la connexion).
Cependant, bien que ce problème se pose d'un point de vue des composants logiques, il en est tout autrement pour les composants visuels.
UX/UI
Flutter dispose de 3 squelettes d'applications prédéfinis:
- Un squelette est régi par les règles du Material Design. Une documentation complète sur ce qu'est le Material Design peut être retrouvée ici. Ce squelette permet d'inclure directement plusieurs mécanismes essentiels, tels que les boutons d'action flottants, les menus sandwich, et enfin tout le mécanisme de navigation de l'application.
- Un squelette est régi par les règles de design iOS. On y retrouve entre autres le geste de retour arrière en glissant depuis le bord gauche de l'écran.
- Un squelette permettant de réaliser une application n'obéissant ni aux règles du Material Design, ni à celles d'iOS.
Toutes les solutions sont possibles en fonctions du rendu attendu par le design de l'application: doit-elle se plier aux règles de design de chaque OS? Doit-elle appliquer les règles Material Design sur Android et iOS? Doit-elle proposer une interface unique et n'obéissant qu'à ses propres règles? Dans tous les cas, le choix en matière de design est beaucoup plus simple à mettre en place avec Flutter.
Nous parlerons dans quelques instants de la maintenance applicative avec Flutter, mais l'un des avantages intrinsèques de ce langage cross-platform est qu'un changement de design peut se faire en un seul coup sur Android et iOS, ou sur un seul des deux si l'on souhaite un résultat avec plus de granularité.
De nombreux détails inhérents au comportement des éléments de l'application dépendent du système d'exploitation exécutant l'application. Par exemple, l'animation de défilement est, par défaut, différente entre iOS et Android, mais Flutter nous donne la possibilité de contrôler cette dernière sur chacun des OS.
L'utilisation d'un squelette entièrement personnalisé n'a rien d'anodin. Elle permet de réaliser des interfaces utilisateur hors du commun, qui ne pourraient pas être faites en natif, ou alors très difficilement et nécessitant alors beaucoup plus de ressources et de budget qu'avec Flutter. Ce squelette permet d'avoir la main mise sur toutes les interactions entre l'utilisateur et l'application, permettant de proposer une expérience utilisateur hors du commun qui permettront de faire sortir votre application du lot.
Ces squelettes et leurs composants design associés permettent de construire très rapidement une interface. De même, les animations sont beaucoup plus simples à mettre en place sans librairie externe avec Flutter qu'en code natif Android ou iOS.
Flutter propose plusieurs solutions pour animer le contenu à l'écran. L'une des animations les plus en vogue ces derniers temps est appelée Heroet peut être retrouvée notamment sur l'App Store:
Ce type d'animations est beaucoup plus complexe à mettre en place nativement qu'avec Flutter, ce qui en fait un framework de choix en cas de d'animations "complexes".
Flutter facilite également la gestion de certaines sources de problèmes ergonomiques beaucoup plus simple; notamment avec une gestion simplifiée de la fameuse "safe area", cette zone morte dans le notchet la partie basse des téléphones. La gestion de l'espace occupé par le clavier sur l'écran est également beaucoup plus simple avec Flutter qui le gère automatiquement si le squelette est correctement maîtrisé, ce qui permet d'éliminer d'importantes sources de problèmes d'expérience utilisateur récurrents (comme le clavier qui cache un bouton de validation par exemple).
Déjà implémenté dans les nouvelles versions d'Android, et implémenté par iOS 13, la gestion du mode sombreest beaucoup plus aisée avec Flutter, mais aussi et surtout instantanée !
Enfin, la gestion de l'interface entre téléphone et tablette est elle avec beaucoup plus simple avec Flutter. Puisque tout est un élément indépendant en Flutter, il suffit d'arranger la vue sur tablette pour afficher deux éléments côte à côte, et en seulement quelques instants nous obtenons une vue dite master/detailà la manière des paramètres d'iOS:
Utilisation
Dans la théorie, un langage cross-platform voudrait que le temps de développement soit divisé par 2. Mais la réalité est bien plus nuancée.
En effet, il est importantde tenir compte dès le début du projet de l'éventualité de développer un "bridge"permettant d'appeler une librairie système.
Mais qu'est-ce qu'un bridge?
C'est tout simplement une implémentation pour l'application Dart d'une librairie Android et/ou iOS, avec du code spécifiquement écrit pour ces plateformes.
Le cas le plus récurrent avec Flutter est la communication avec des librairies "matérielles": caméra, terminal de paiement, microphone... Des librairies existent pour iOS et Android, mais rien d'officiel en Flutter. Plusieurs cas peuvent se présenter:
- Soit un développeur tiers a déjà réalisé un bridge pour ce cas d'utilisation, auquel cas il peut être judicieux de l'utiliser après avoir analysé la pertinence de son code ainsi que sa fréquence de mise à jour
- Soit rien n'a encore été réalisé, dans ce cas il faudra réaliser le bridge soi-même.
Bien que se reposer sur des librairies tierces ne pose en général pas de problème en natif du fait de la grande communauté toujours prête à mettre à jour ces dernières, les données sont tout autres pour les celles disponibles en Dart.
En effet, bon nombre de ces librairies sont pour le moment en pré-versions et ne sont aucunement exclues de bugs qui sont intolérables dans un environnement de production. Il est alors plus judicieux de développer ce bridge en interne, afin de pouvoir avoir la main directement sur le code de ce dernier en cas de problème.
Malgré cette contrainte, Flutter propose un avantage indéniable: la maintenance applicative est beaucoup plus simple à gérer.
Avec un seul code pour plusieurs plateformes, le temps de maintenance est, lui, plus facilement divisé par 2, mais surtout plus facile à mettre en place. Cela est notamment dû au fait que les nouvelles fonctionnalités seront de facto codées en même temps pour chaque plateforme, de même pour les résolutions de bugs ou les changements de design. Le faible coût de maintenance en fait un argument imparable si le budget alloué à cette partie de la vie de l'application est restreint.
L'un des autres avantage important est la rétro-compatibilité à toute épreuve. Bien que la question soit plus sensible sur Android que sur iOS, Flutter met tout le monde d'accord, en poussant la compatibilité à 99,4% du parc Android (en Mai 2019) et 99% du parc iOS (en Juillet 2019 - iPhone et iPad confondus).
Un petit bémol sur ces données, certains besoins en fonctionnalités peuvent augmenter la version minimale requise. Par exemple, pour stocker des données de façon sécurisées dans le téléphone (pour stocker un mot de passe par exemple), il est nécessaire d'avoir un téléphone sous Android 4.3 ou supérieur (soit 96,7% du parc Android au lieu de 99,4%)
Tout cela sans se soucier de la gestion de la rétrocompatibilité de notre code, puisque tout est géré automatiquement. Pour les applications ayant besoin de toucher une très large palette de versions d'un système d'exploitation, Flutter est alors l'une des solutions les plus pertinentes.
A noter également que Flutter a été annoncé comme compatible Fuschia lors de sa sortie. Cette compatibilité sera elle aussi toute relative, puisque si des dépendances à des SDK natifs existent dans l'application, il faudra très probablement attendre que ces derniers soient rendus disponibles pour la plateforme avant de pouvoir l'intégrer au bridge dans l'application.
Conclusion
Bien qu'encore très jeune, Flutter a de quoi séduire avec des arguments de productivité et de rentabilité incroyables. Sa facilité de mise en place et sa personnalisation à toute épreuve en font un framework de premier choix pour les projets au design éloignés ou non du natif, ayant peu de budget à allouer au développement premier des applications tout en souhaitant avoir un produit disponible sur Android et iOS. Les coûts de maintenance beaucoup plus faibles sont également à prendre en compte dans le choix de cette technologie, tout en gardant à l'esprit les obstacles techniques des librairies matérielles souvent inexistantes, et nécessitant donc un temps de développement supplémentaire afin de pouvoir être utilisées.