Flutter Web en 2023 : Le Statu Quo

Flutter Web est officiellement passée stable lors du Google IO 2021 lors de l’annonce de la version 2 de Flutter. Une bonne nouvelle pour la communauté qui célébrait ses 150.000 applications sur les stores mobiles. Nous sommes 2 ans plus tard et nous sommes à la version 3 de Flutter. Que pouvons-nous en dire ? Est ce vraiment si stable que ça ? Quelles en sont les limites et les scores de performance ? Et surtout quels usages devons-nous et pouvons nous en faire ? N’oublions pas que le web est un environnement à part entière avec ses codes et bonnes pratiques.

Dart et le Web : une histoire qui date 💙

J’avais déjà eu à parler en partie dans cet article du lien existant entre Dart et le Web tel que nous le connaissons. À la base Dart, développé par Google, était un langage destiné à remplacer le JavaScript. Ambition qui a changé en cours de route et de laquelle il lui est resté jusqu’aujourd’hui une forte interopérabilité avec ce dernier. On peut toujours aujourd’hui se servir de Dart en lieu et place de JavaScript pour manipuler le DOM comme vous pouvez le voir dans l’exemple qui suit :

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
    <title>quickstart</title>
    <link rel="stylesheet" href="styles.css">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>

</body>
</html>

Code HTML

import 'dart:html';

void main() {
  querySelector('#output')?.text = 'Your Dart app is running.';
}

Code Dart

💡

Vous obtiendrez plus d’informations sur la page concernée sur le site officiel du langage Dart

En grosso modo il est tout à fait possible de mettre en place des applications web dynamiques en simple Dart, HTML et CSS pouvant être déployé de manière relativement simple avec le serveur web dédié qui est fourni. Le code est traduit en JavaScript optimisé pour ensuite être servi au navigateur qui se charge de faire le rendu de l’application grâce à l’outil dart2js. Mais, nous le savons tous, le Dart est en majorité employé avec son framework phare : Flutter.

Flutter sur le web : comment ça marche ? 🤖

Pour répondre à cela, commencer par l’architecture derrière Flutter quand il s’agit de fonctionner dans un navigateur :

Comme vous pouvez le voir plus haut, Flutter dans un navigateur suit globalement le même schéma qu’il occupe sur ses autres plateformes cibles : une partie consacrée au framework en lui-même et une autre qui nous sert de contenant (embedder). Ici le contenant se voit être surtout du HTML, du CSS, du JavaScript et du WebAssembly.

💡

Le WebAssembly est toujours activement en cours d’intégration à Flutter, de sorte à lui permettre d’avoir des performances plus conséquentes en comparatif avec JavaScript. Un peu comme ce que propose Blazor en C# actuellement.

Un projet Flutter web produit ce qu’on appelle une Single Page Application (SPA) ce qui fait référence à un seul fichier HTML et un ou plusieurs fichiers CSS associés à un seul fichier JavaScript souvent volumineux. Cette façon de faire les applications n’est pas nouvelle et au contraire est même devenue tendance dans le monde du développement web au travers de librairies telles que React ou frameworks comme Vue. Mais quelles en sont les particularités ?

Avec des outils actuels dans le web, le rendu se fait soit directement soit via des intermédiaires comme Babel de sorte tout de même à produire à la fin un code JavaScript quand même assez proche de celui entré par le développeur. Avec Flutter, le procédé est assez différent. Votre code Dart est converti en un code JavaScript optimisé. Ce code n’aura pas toujours pour but de directement manipuler le HTML comme nous l’avons vu avec le Dart + HTML classique. Il va plutôt nous proposer deux méthodes de rendus :

La première va plutôt utiliser un élément natif au web appelé le Canvas avec du HTML et du CSS avec lesquelles elle va “dessiner” le contenu de notre application web. Des deux méthodes elle est la plus légère en taille de téléchargement.

La seconde va faire plutôt faire appel à une méthode indépendante. Cette dernière ne fait ni appel au HTML et au CSS classique mais fait plutôt appel au CanvasKit du moteur Skia (qui est la bibliothèque de rendu de base de Flutter) et au WebAssembly. Elle est la plus performante mais également la plus lourde.

Une question qui revient souvent dans les échanges entre les différents développeurs web quand on parle de Flutter Web et de son mode de rendu est la performance. À quelle vitesse l’appli web se charge ? Est-ce optimisé ? Est-ce que le rendu ressemble vraiment à une application web… ?

Ce genre de questions est nécessaire et légitime. Et nous allons tâcher d’y répondre.

Les performances de Flutter ⤴

Au jour de cet article, nous sommes à la version 3.7 de Flutter et depuis la version 2 qui marquait l’annonce de la première version stable de Flutter sur le Web. Malgré cela, il était déjà possible de concevoir des applications Flutter Web en passant sur le channel beta de Flutter. Que pouvons-nous dire des performances actuelles de Flutter alors ? Je vous inviterai à lire cet article de Andrea Bizzoto qui est un Google Developer Expert en Dart et Flutter. Dans ce dernier il fait littéralement la comparaison deux versions de la page d’accueil de son blog, l’une faite avec du HTML, CSS et JavaScript et l’autre fait avec Flutter Web et ses deux modes de rendus. Voici un extrait de ses résultats avec Page Speed Insights, un outil qui permet de pouvoir analyser les performances d’un site web.

Les résultats sur mobile :

Résultat en HTML/CSS/JS - Source : codewithandrea.com

Résultats avec Flutter - Source : codewithandrea.com

Les résultats sur Desktop :

Résultat avec Flutter - Source : codewithandrea.com

💡

Une étude détaillée de ce cas précis a été faite par lui juste ici. N’hésitez pas a y faire un tour.

Comme vous avez pu le voir, le résultat est plutôt clair : un site web fait avec du web natif (avec du HTML/CSS/JS) sera toujours plus rapide qu’un site fait avec Flutter.

Cela peut s’expliquer par le fait que dans ses deux modes de rendus, Flutter Web va dessiner pixel par pixel le rendu qui vous est présenté à l’écran. Chose qui bien évidemment à une incidence sur les performances de votre site web vu qu’à la fin le produit fini possède souvent énormément de code JavaScript (qu’on essaie toujours de réduire un maximum pour maximiser la fluidité et l’expérience utilisateur).

Les limites de Flutter sur le web 😕

De ce qui a été dit au point précédent, il est évident que Flutter Web présente un certain nombre de limitations qu’il serait nécessaire de prendre en compte avant de vous décider à l’adopter pour un projet que vous voulez développer :

Flutter Web est encore assez jeune : ce qui fait que la documentation et les bonnes pratiques pour une utilisation sur le web ne sont encore standardisées,

N’utilisant pas directement les composants web natif pour gérer l’affichage et le rendu sur le web, il reste cependant un peu complexe de mettre en place des mécanismes propres au Web en général comme la gestion des ancrages ou parfois les effets lorsqu’on pointe des éléments de la page web.

Ce n’est pas un choix judicieux si le SEO est une problématique majeure du projet que vous voulez développer. En effet le texte du site n’est pas rendu directement dans le HTML, vu qu’il est géré par le JavaScript généré à partir du code Dart. C’est une problématique commune aux SPAs (Single Page Applications) comme celles générées par des frameworks comme React.js.

Bien que le code que vous aurez à écrire sera essentiellement du Dart, pour certains projets précis vous aurez besoin de parfois utiliser des fonctions venant de la librairie dart :html pour atteindre vos objectifs.

De nombreux outils et utilitaires web sont principalement pensés pour s’intégrer à des sites via du JavaScript : des cas de figures où vous serez amené à devoir trouver des moyens de pouvoir appeler du code JavaScript à l’intérieur de votre code Dart.

🤔

Cette contrainte peut cependant être éliminée via des packages comme js qui permet en gros de pouvoir appeler des fonctions JavaScript dans du code Dart / Flutter.

La vitesse de chargement du site peut être souvent lente causant souvent un temps de chargement longuet dépendant bien souvent du débit internet du client : le code Dart étant directement transpilé en JavaScript est souvent assez lourd, prenant généralement un moment pour être téléchargé côté client

Vous devriez essayer Flutter Web 🚀

Les limites listées plus haut sont des considérations à avoir en tête si vous voulez vous décider à faire une application ou un site avec Flutter. De plus, en fonction de votre niveau d’expertise et de maîtrise du framework et du développement web en général, vous aurez plus de facilité à pouvoir corriger certaines insuffisances. Et encore au delà de simples correctifs, Flutter Web peut être un excellent choix quand on veut penser à développer des solutions ou un écosystème de solution :

C’est un choix à considérer si vous avez besoin pour votre solution de plusieurs plateformes comme une application mobile et un dashboard web.

Flutter Web est aussi un bon choix si votre application est gourmande en animations et en interactivités.

Le framework est jeune… Mais pas si jeune que ça au final. Bien qu’étant passé à sa version stable en Mars 2021, il était déjà bien utilisé par la communauté. Un large éventail d’outils et de packages a donc été déjà pensé pour venir à bout de nombreuses problématiques propres au Web. Il ne cesse également d’être mis à jour par la communauté.

C’est également un bon choix pour concevoir des PWA, Flutter intégrant cette possibilité nativement sur sa partie web.

Je parlerais aussi que la structure même du framework vous permet de prototyper vite et efficacement votre idée.

Mon avis sur Flutter pour le web 🤔

Ce tweet de Tim Sneath, le directeur produit de Dart et Flutter résume assez de choses.

Je tiens à préciser que j’ai eu à utiliser Flutter Web sur plus d’une dizaine de projets en tout genre, en passant par de simples bots, des sites web et des applications web toute taille également.

Dans un cas pratique, Flutter Web est définitivement plus adapté si vous voulez développer des applications web dans lesquelles beaucoup d’interactions auront à être réalisées. Il peut être un outil robuste pour concevoir des solutions de type SaaS.

Flutter n’est pas encore super efficace pour juste du développement de site web. Même si il existe pas mal de façon d’optimiser le rendu de sorte à ce qu’il soit très proche d’une application web classique, il reste à l’heure actuellement en terme de performance et de conformité avec les standards actuels du web assez avant-gardiste.

Mais encore une fois cet effet peut être réduit mais peut nécessité un bon niveau de compréhension du framework en lui même et du web également.

Qui se sert de Flutter Web aujourd’hui ? 👷

Mine rien, j’ai eu à constaté que de plus en plus de solutions web étaient en partie ou en totalité conçu avec Flutter web. Allant des start-ups à des entreprises bien assises, le but de ces dernières reste toujours de booster la productivité de leurs équipes de délivrer des expériences optimales et taillées pour les besoins spécifiques de leur produit.

Supernova est une application de design système construite avec Dart et Flutter. Elle permet de gérer tout le cycle de vie du système de conception en un seul endroit et d'automatiser les processus pour s'adapter aux méthodes de travail déjà en place.

Rive.app est une plateforme qui permet aux développeurs de créer et partager à travers différentes plateformes des animations interactives.

Ipsumdb dont la partie SaaS a été majoritairement développée avec Flutter.

Un chatbot que j’ai conçu avec Dialogflow (eh oui c’est un placement de produit).

Et de nombreuses autres…

Pour aller plus loin : le futur est radieux 🏊

Savoir quel widget utilisé pour un max de performance

De nombreux frameworks et packages qui commencent à voir le jour pour améliorer les expériences web que l’on peut concevoir en Dart:

des connecteurs sympathiques qui permettent d’utiliser React en Dart dont notamment react-dart et over_react
une implémentation d’Angular en Dart que vous pourrez retrouver sur ce lien
de nouveaux frameworks Dart conçus pour le web comme Jaspr.

Je prépare un article pour vous montrez quelques optimisations que vous pouvez faire dans vos applications Flutter Web de sortes à optimiser l’expérience de vos utilisateurs et les faires se sentir sur un site web “traditionnel”.

Merci de la lecture ✨

Si tu as apprécié tu peux m’offrir un café juste ici, réagir et commenter en bas si tu as des apports et/ou des corrections. C’est toujours un plaisir et cela m’encourage à écrire plus souvent.