La même carte, trois façons : SVG, Rust et Flutter

EVnSteven a atteint un stade confortable. La plateforme est stable et ne nécessite pas beaucoup de maintenance, ce qui est exactement ce que nous voulions au départ : un petit système qui fonctionne tranquillement. Cela laisse un peu de place pour expérimenter, et cela a laissé à nos fondateurs le temps de lancer quelques autres projets, que vous trouverez à la fin.

Nous avons donc mené une expérience. Nous avons pris la carte de notre page d’accueil et l’avons reconstruite deux fois : une fois en Rust compilé en WebAssembly, et une fois en Flutter. Cet article met les trois sur une même page et les compare.

1. L’original : SVG, CSS et un peu de JavaScript

En termes simples : c’est la carte de notre page d’accueil. Elle est construite de la même manière que le reste d’une page web : un dessin composé de formes que votre navigateur sait déjà afficher et animer. C’est la plus simple des trois, et c’est celle que la plupart des visiteurs voient.

C’est un dessin SVG unique. Le navigateur exécute la plupart des animations via le CSS, et un petit script gère le reste.

En sa faveur : il n’y a pas d’étape de compilation, donc un simple template Hugo suffit. C’est vectoriel, donc l’image reste nette à n’importe quelle taille. Les 44 points sont tous accessibles au clavier, chacun avec une étiquette pour les lecteurs d’écran. Et ses quelques mots sont traduits dans toutes nos langues.

Le coût est en poids dans la page. Le balisage de la carte fait environ 107 Ko (environ 30 Ko compressés), et une fois en fonctionnement, elle comprend environ 670 éléments et environ 200 animations CSS. La logique est aussi difficile à tester : le timing est défini dans les keyframes CSS et un script dans la page, donc le seul test est de la regarder.

2. Rust et WebAssembly

En termes simples : Rust est un langage de programmation connu pour sa rapidité et pour détecter de nombreuses erreurs avant même qu’un programme ne s’exécute. Ici, nous avons écrit le « cerveau » de la carte en Rust, l’avons empaqueté dans une forme compacte que les navigateurs peuvent exécuter (appelée WebAssembly), et lui avons laissé peindre toute la carte lui-même, comme un peintre qui redessine une toile plusieurs fois par seconde. Pour vous, cela semble identique.

Toute la carte est dessinée sur un seul canvas par Rust compilé en WebAssembly. Le code Rust contrôle tout le comportement de la carte et redessine tout à chaque image.

Ce que nous avons aimé, c’est que la logique est du Rust pur sans rien provenant du navigateur : les calculs pour savoir où les éléments vont et quand ils changent, ainsi que le parseur qui lit le contour des terres. Il comporte 13 tests qui s’exécutent en une fraction de seconde, et si le timing du cycle est incorrect, un test échoue au lieu que quelqu’un remarque que cela semble étrange. Environ un tiers des quelque 1 070 lignes de Rust correspondent à ce noyau testé (avec ses tests) ; le reste dessine sur le canvas et gère les événements de la souris.

La page reste très légère : un seul élément canvas. Mais le téléchargement est plus important. Le module compilé fait environ 254 Ko (environ 92 Ko compressés) plus environ 28 Ko de code JavaScript de liaison généré par l’outil de build. Et il y a des coûts que nous ressentons en travaillant dessus :

• Une chaîne d’outils. La compilation nécessite Rust, la cible WebAssembly et un outil en ligne de commande dont la version doit correspondre exactement à celle de la bibliothèque. Notre script de compilation exécute d’abord les tests et s’arrête si l’un d’eux échoue.
• Pas d’accès clavier ni lecteur d’écran aux villes individuelles. Un canvas est une image. Les 44 points focalisables de la version SVG ont disparu.
• Uniquement en anglais. Les étiquettes sont intégrées dans le programme.
• Flou. Le bord de l’ombre douce utilise un filtre de flou canvas, que tous les navigateurs ne supportent pas. Nous n’avons pas testé Safari, où le bord pourrait être net.

3. Flutter

En termes simples : Flutter est une boîte à outils de Google pour créer des applications fonctionnant sur téléphone, ordinateur et web à partir d’un seul code. Il n’utilise pas les éléments natifs de la page web. Il dessine tout lui-même. Ici, la carte est une petite application affichée dans cette page, la même boîte à outils qui alimente notre calculateur de charge.

Il peint la carte avec un peintre personnalisé, et elle est affichée ici dans un cadre. Flutter peut aussi créer des applications pour téléphone et bureau à partir du même code, ce qui est son principal argument : écrire la carte une fois, l’exécuter à plusieurs endroits.

C’est la même logique que la carte Rust, portée en Dart, avec 11 tests. Environ 1 100 lignes incluant les tests. Flutter transmet chaque ville aux lecteurs d’écran comme un bouton étiqueté, ce que la version canvas ne fait pas (nous n’avons pas vérifié son efficacité avec un lecteur d’écran réel). C’est aussi le téléchargement le plus volumineux : l’application fait environ 1,8 Mo (environ 535 Ko compressés). Le moteur de dessin de Flutter est un téléchargement supplémentaire, mais le site partage déjà une copie avec la calculatrice, donc un visiteur ayant ouvert la calculatrice ne le télécharge pas à nouveau. Son texte est défini dans la police du site, Merriweather, que le navigateur récupère au moment de l’exécution.

Ce que nous avons trouvé

Une remarque supplémentaire sur la vitesse. Lors de notre vérification, la carte SVG et la carte Rust fonctionnaient toutes deux à la fréquence de rafraîchissement de l’écran (environ 120 images par seconde sur l’écran de test), donc la fréquence d’images ne les distinguait pas. Nous n’avons pas mesuré la fréquence d’images de Flutter, ni la consommation de batterie ou de CPU, donc nous ne pouvons pas dire laquelle est la plus légère sur un téléphone.

Ce qui nous a surpris

Certains détails sont faciles à mal interpréter. Nos premiers clones dessinaient la clé et les horloges à une part fixe de la carte, donc ils rétrécissaient sur les petits écrans et semblaient minuscules par rapport à l’original. L’original les dimensionne dans l’unité de police propre à la page (rem, qui change avec la largeur de l’écran). Les clones lisent maintenant cette taille depuis la page. Les horloges diffèrent aussi : les aiguilles de l’original bougent par pas de 15 minutes, tandis que dans les versions Rust et Flutter elles tournent en continu.

Les fuseaux horaires n’étaient pas intégrés. Ni Rust compilé en WebAssembly ni Dart ne disposent d’une base de données de fuseaux horaires qui connaît “Asia/Dubai”. Tous deux interrogent plutôt le navigateur, via son service intégré Intl, qui gère aussi correctement l’heure d’été.

Les trois partagent leurs entrées. Les cartes Rust et Flutter lisent la liste des villes et le contour des terres depuis la page où elles se trouvent, les mêmes données que la carte SVG utilise. Changez une ville, et les trois changent. Cela signifie aussi que les cartes ne peuvent fonctionner que sur une page qui les fournit.

Flutter web se souvient. Flutter web installe son propre cache, donc après reconstruction nous continuions à voir l’ancienne version jusqu’à ce que nous la vidions.

Notre conclusion

La carte SVG reste sur la page d’accueil. Pour un dessin de cette taille, c’est la plus légère, elle est accessible, traduite, et ne nécessite rien pour être construite. Rust est le dauphin le plus intéressant : si jamais nous avons besoin que la logique de la carte soit prouvablement correcte, ou de faire des calculs lourds dans le navigateur, un noyau Rust testé est une bonne solution. Flutter a du sens si la carte doit un jour vivre à l’intérieur d’une application Flutter.

Une expérience n’a pas besoin de changer le produit pour valoir la peine d’être menée. Nous avons fini avec une image plus claire du coût de chaque approche, une description testée du comportement de la carte, et une page où vous pouvez voir les trois par vous-même.

Ce que nos fondateurs construisent ensuite

Une plateforme stable laisse du temps pour d’autres idées. En plus d’EVnSteven, nos fondateurs travaillent sur ces projets :

Service de covoiturage, lancement très prochain Kimem ↗ (opens in a new tab) Un service de covoiturage pour Bahir Dar, en Éthiopie, créé par le fondateur Mekonnen Alemu. Les passagers voient une estimation du tarif avant de réserver, regardent le conducteur le plus proche approcher sur une carte, et paient le tarif au compteur en espèces à la fin du trajet.

Organisation à but non lucratif, open source StrayCats ↗ (opens in a new tab) Un projet de David pour aider les personnes qui s'occupent des chats errants, des chats de rue, ou de tout chat, même si ce chat se révèle être un chien. C'est encore au stade de l'idée, sans application pour l'instant, et David aimerait beaucoup vos idées et retours. Dédié à Saibo, 2010–2026.

Suivi de liquidités, gratuit, lancement prochain Effectivo ↗ (opens in a new tab) Une comptabilité imparfaite avec une touche spéciale, pour ceux qui utilisent de l'argent liquide. Enregistrez un achat en quelques tapotements, comptez ce qu'il y a dans votre portefeuille, et regardez en arrière ce qui en valait la peine. La touche spéciale est que chacun qui continue d'utiliser de l'argent liquide aide à le maintenir pour tout le monde. Gratuit et sans publicité, disponible bientôt sur Android et iPhone, avec une version bêta et une démo web déjà en ligne.