Le 24 avril 2024, nous avons assisté à la conférence Flutter Connection pour sa deuxième édition.
Toute la journée, nous avons eu la chance de pouvoir écouter 12 présentations sur des sujets divers autour de Flutter. Une journée nous permettant également de rencontrer la communauté !
Lors de cette convention, plusieurs moments forts ont marqué les esprits des participants. Les sujets les plus intéressants ont abordé des thèmes variés, tels que la génération de code Flutter avec FlutterFlow, les meilleures pratiques d'animations, l'architecture des applications Flutter, les mécanismes de gestes et d'interactions, ainsi que les mises à jour instantanées d'applications avec Shorebird.
De plus, les démonstrations les plus impressionnantes ont permis de visualiser concrètement les possibilités offertes par Flutter, que ce soit en termes d'animations, d'intégration avec le web, ou encore de server driven UI.
Voici cinq talks des plus marquants selon notre perspective.
How FlutterFlow generates Flutter code
par Leigha Reid
Le premier talk de la journée était présenté par Leigha Reid, qui nous montrait la manière dont FlutterFlow générait le code en Flutter.
L'argument marketing est que FlutterFlow n'est pas un autre outil de no/low code mais un "environnement de développement visuel". Leigha précise que FF génère du code qui suit les best practices sans sacrifier ni la qualité ni les fonctionnalités de l'application.
Pour appuyer par ailleurs dans ce sens, le code est modifiable et exportable à n'importe quel stade de la conception.
Leigha nous montre dans un second temps, que FlutterFlow nous permet de créer un Design System, avec des widgets réutilisables. Chaque widget créé va avoir une dataClass associé, ce qui va permettre une bonne séparation entre l’UI et le dataModel.
Ensuite, la présentatrice nous montre la création d’une page pour une application. À l’image des widgets, chaque page va recevoir une dataClass. Les pages créées vont automatiquement avoir un Scaffold. Elle nous indique également que la navigation entre les différentes pages se fait avec le package go_router.
Nous pouvons voir que la création d’un thème et de customWidgets est également possible dans FlutterFlow.
La fin du talk se concentre sur la gestion d’état aux différents niveaux de l’application, avec la possibilité de passer des callbacks aux différentes pages et composants de l’app. Il y a aussi la possibilité de voir les différentes intégrations via la page Action en utilisant des blocs Action. Nous voyons donc que ces actions sont retranscrites en changeNotifier pour la gestion de l’état au niveau global de l’application.
Enfin pour les calls HTTP, une classe va être générée pour le call qui va être fait dans le initState du widget ou se trouve l’appel.
Pour conclure, FlutterFlow a l’air assez puissant pour créer une application de base rapidement, mais certaines questions subsistent sur certaines bonnes pratiques de développement ou encore sur la récupération de tout les codes pour la maintenance.
Server-Driven Ul with Flutter
par Aloïs Deniel
L’un des talks les plus captivants a porté sur le Server Driven UI (SDUI).
Animé par le créateur du package device_preview, ce talk a commencé par tracer l'évolution des interfaces utilisateur, passant de l'approche traditionnelle du client side UI à l'utilisation émergente du SDUI comme le HTMX.
Cette approche permet aux développeurs de mettre à jour les éléments de l'interface utilisateur et les expériences utilisateur à distance, sans avoir besoin de mettre à jour l'application via les stores d'applications traditionnels. Cela offre une flexibilité et une efficacité considérables, réduisant ainsi le temps de développement, simplifiant les tests A/B et permettant des itérations plus rapides. Il a souligné l'importance croissante de cette approche, illustrée par son adoption par des géants de la tech tels que Airbnb, Google et Facebook.
La présentation s’est poursuivie sur la découverte du package RFW (Remote Flutter Widget), développé par l’équipe Flutter, qui permet de créer des interfaces utilisateur côté serveur de manière efficace et flexible. Aloïs Deniel a également abordé les défis associés à cette approche, soulignant le besoin d'outils et d'IDE spécifiques pour rendre le développement plus maintenable.
En conclusion, ce talk a mis en lumière le projet expérimental swap basé sur le RFW qui permettrait de passer du code Flutter directement dans les requêtes du serveur, avec une démonstration live de ces possibilités.
Flutter Web Laughs: Element Embedding Made Easy
par Lucas Goldner
L'intervenant a commencé en soulignant que bien que Flutter Web soit prêt pour la production depuis un certain temps, il reste un sujet de discussion animé parmi les développeurs. Il a abordé la question de savoir quand il est le plus efficace d'utiliser Flutter Web et où il performe le mieux.
Une fonctionnalité récente, l'Element Embedding, a été présentée comme une nouvelle façon d'intégrer les applications Flutter dans les sites web, permettant une intégration transparente avec HTML, React, Angular, et plus encore. L'intervenant a mis en avant cette fonctionnalité souvent sous-estimée, en illustrant son potentiel à travers des projets comme l'intégration d'une démo de projet Flutter dans une documentation.
Il a ensuite effectué une démonstration en direct d'un site Flutter Web qui intégrait une application React, qui à son tour intégrait une application Flutter, et qui communiquait avec l'application. Malgré quelques complexités avec React, l'intégration fonctionne bien avec Angular. Tout est résumé dans cet article très intéressant.
Bring your Flutter App to the HomeScreen - HomeScreen Widgets
par Anton Borries
Le talk "Bring your Flutter App to the HomeScreen" d’Anton Borries a souligné l'importance croissante des widgets d'écran d'accueil, en particulier avec l'introduction des widgets interactifs dans iOS 17.
Ces widgets offrent aux utilisateurs un accès rapide aux informations importantes et constituent un espace précieux sur l'écran. Une étude récente de Duolingo a montré que des HomeScreen Widgets de qualité peuvent contribuer à augmenter les connexions quotidiennes des utilisateurs.
Le talk a exploré comment contourner les limitations de la plateforme pour créer les meilleurs widgets d'écran d'accueil possibles en utilisant le package home_widget. L'intervenant a expliqué que bien que les widgets d'écran d'accueil aient des limitations telles que l'impossibilité de défiler et de se mettre à jour à tout moment, il existe des solutions telles que la capture d'écran d'un widget Flutter et l'utilisation du package home_widget.
Ce dernier permet la synchronisation des données (par défaut sur iOS et avec shared_prefs sur Android), la mise à jour du widget depuis l'application, la création de widgets interactifs, et même la possibilité de choisir un widget directement depuis l'application sur Android.
Demystifying App Architecture: The LeanCode Guide
par Mateusz Wotczak et Marcin Chudy
Pour ce talk, les deux speakers de LeanCode nous ont présenté les détails d'architecture Flutter qu’ils utilisent pour les différents projets clients.
Pour commencer, Mateusz et Marcin nous parlent de la Clean Architecture. Ils nous indiquent que pour eux rien ne sert d’ajouter des couches inutiles dans l’application. Ils préfèrent adapter les couches au besoin et à la taille de l’application client.
Au niveau de la structure de leurs projets, ils séparent leurs codes par feature.
Pour la partie gestion d'état, ils utilisent principalement la librairie BLoC (vous pouvez retrouver un exemple d’utilisation dans notre article). 90 % du temps, les cubits sont même préférés pour leurs applications, car ils sont simples, prédictibles et modulables. Ils utilisent également les hooks ! Ils n’utilisent pas Riverpod car ils considèrent que ça les oblige à n’utiliser que ça pour toutes les applications et n’ont pas envie d’être bloqué avec ça.
(Notre article vous permettra de découvrir les bases de Riverpod)
Chez LeanCode, ils n'hésitent pas à faire des packages qu’ils publient sur pub.dev pour pouvoir les réutiliser dans toute leurs applications. Notamment, le leancode_cubit_utils ou leurs leancode_hooks pour la gestion d’état de leurs widgets.
Ensuite, nous nous penchons sur la création d’un formulaire. Encore une fois, ils nous présentent un package leancode_forms qui leur permet de facilement faire un formulaire basé sur les cubits. Il en avait assez des TextEditingControllers à tout va et cela leur permet d’avoir accès à certaines feature comme le scroll automatique jusqu'à l'erreur.
Pour l’UI, ils ont également mis en place un Design System de base, robuste et réutilisable dans toutes leurs applications. Ils ne sont donc pas limités par Material Design.
Au niveau de l’injection de dépendances, ils utilisent get_it au niveau global de l’application et provider pour le cycle de vie d’un widget.
Enfin, pour le testing, les BLoCs leur permettent une facilité de test. Ils font également des golden tests, des tests d’intégration et des E2E tests avec l'outil Patrol développé par leur entreprise.
C'était intéressant de voir leur vision de l’architecture et comprendre pourquoi certains choix étaient faits. Pour conclure, les 2 compères nous rappellent qu’il ne faut pas suivre un seul modèle d’architecture, mais plutôt l'adapter en fonction du besoin.
Quelques mots pour la fin
Assister à la convention Flutter Connection est toujours une expérience enrichissante pour tous les développeurs Flutter. La diversité des sujets abordés, l'ambiance conviviale et les rencontres faites lors de cet événement en font un incontournable dans le monde de Flutter.
En tant que développeur Flutter, participer à de telles conventions est essentiel pour rester à jour, inspiré et à l'affût des dernières nouveautés sur Flutter. Ensemble, continuons à faire grandir cette incroyable communauté et à explorer les possibilités infinies de Flutter !
À l'année prochaine !
