#Genèse du projet

J’ai créé une petite API qui permet de rechercher des produits exposés par des marketplaces à partir de mots clés. Désirant donner accès à un public non développeur, il fallait développer une application web. Ayant eu une bonne expérience mobile avec Flutter, j’ai voulu utiliser cette technologie pour développer cette application web.

#Le besoin

La première version de cette application doit :

• Offrir une barre de recherche et afficher les résultats trouvés.
• Afficher le maximum de détails sur un produit.
• Mettre en cache les produits sélectionnés pour les retrouver ultérieurement lors de la prochaine navigation.
• Capter les informations utilisateur via un formulaire pour les transmettre au backend.
• En option, pouvoir intégrer un service de paiement.

#Les packages utilisés

• Il m’a fallu trouver un package adéquat pour avoir accès aux API du navigateur, tel que l’api storage fourni par IndexedDB. J’ai tout d’abord jeté mon dévolu sur Hive. Cependant, après le début de l’intégration, bien que spécifié compatible web, je me suis rendu compte que ça ne fonctionnait pas. Je ne sais pas si actuellement les différents bugs ont été corrigés, mais l’auteur envisageait d’abandonner la maintenance et le développement de ce package. Après avoir passé un peu de temps, j’ai pu utiliser sans problème le package Sembast.

• Pour le routing j’ai utilisé go_router

• Pour la réactivité et la gestion d’état, j’ai fait le choix de riverpod

• Pour les appels réseaux, j’ai utilisé une combinaison de Retrofit et Dio.

• En bonus pour le processeur de paiement, j’ai utilisé Stripe avec la fonctionnalité web, taguée comme expérimentale.

#L’expérience de développement flutter web

Le hot reload est un dispositif que l’on retrouve dans la plupart des frameworks front. Cette fonctionnalité permet de gagner un temps considérable et d’itérer très rapidement. Les modifications dans le code sont répercutées sur l’app en quelques millisecondes ou secondes sans perte d’état. Cependant, cette fonctionnalité n’existe pas encore pour la plateforme web. Et ceci a une très grande répercussion sur la productivité et l’expérience globale ressentie. La frustration est là. Un moyen d’éviter ce problème consiste à sauvegarder l’état de l’app dans le navigateur. Ce qui, je vous le concède, est une contrainte et peut être fastidieux à mettre en place.

Les packages ne sont pas toujours stables. Comme je l’ai mentionné auparavant, il peut y avoir des bugs, d’autant plus que le développement de projets en Flutter web est moins répandu. Cela signifie que les packages sont moins éprouvés et testés. Cet écosystème est donc moins mature en comparaison avec la plateforme mobile.

Par rapport aux autres frameworks web, Flutter propose deux modes de rendu graphique des composants.

• Un premier mode basé sur des éléments HTML, CSS, ainsi que des Canvas et SVG.
• Un second mode basé sur la bibliothèque 2D Skia compilée en WebAssembly.

Le premier mode génère un build plus léger que celui utilisant CanvasKit. Ce qui se traduira par un temps d’initialisation et de chargement plus rapide de l’application.

J’ai constaté des anomalies dans le fonctionnement des éléments scrollables de la version web de Flutter. En effet, la couleur de l’arrière-plan de la barre de navigation peut être modifiée lors du défilement d’un élément.

Ce dysfonctionnement est gênant et perturbe l’expérience utilisateur.

Il faut aussi noter que les interactions que nous avons l’habitude d’avoir avec les technologies web telles que HTML ne sont plus possibles. Je m’explique : en faisant une inspection, il n’est pas possible de voir la balise HTML d’un paragraphe, d’une div ou d’un autre élément. En effet, tout est composé de widgets, et un widget n’est pas traduit directement en élément HTML. Il faut également noter que, si ce n’est pas spécifié, il n’est pas possible de faire un simple copier-coller de texte.

#Points positifs :

• Flutter est un framework versatile facile à apprendre.
• Il permet de développer des applications avec une interface graphique fluide et responsive.
• Une communauté active et un écosystème de plugins en constante évolution.
• Une seule base de code pour toutes les platformes avec peu d’adaptation nécessaire.

#Points négatifs :

• Le hot reload n’est pas disponible pour la plateforme web.
• Le produit du build est lourd et peut être volumineux.
• L’écosystème des plugins pour le web est moins mature que le mobile.
• Difficile de s’appuyer sur les libraries existantes pour gérer la responsivité aux différents formats d’écran. Il n’y a pas d’équivalent aux libraries css.

#Conclusion

Après avoir bien avancé sur le développement de la web app, j’ai dû malheureusement renoncer à Flutter Web. Je n’avais pas vraiment analysé les avantages et les inconvénients au préalable. Ce qui m’a vraiment gêné sont :

• Les comportements imprévus qui peuvent s’apparenter à des bugs de rendu du moteur Skia
• L’immaturité de la technologie vis-à-vis du hot-reload, avec la perte d’état à chaque modification mineure.
• Pas de solution efficace et simple pour gérer la responsivité.
• Le manque d’interactions basiques que l’on retrouve dans une expérience web classique.
• La faible performance de Flutter en comparaison au stack natif du développement web.
• Le faible niveau de référencement (SEO) résultant de la compilation Dart.

J’ai donc commencé à réécrire la web app en utilisant SvelteKit, et en m’appuyant sur Tailwind et des bibliothèques de composants comme Flowbite, c’est vraiment le jour et la nuit 🔥 .