Die gleiche Karte, drei Wege: SVG, Rust und Flutter

EVnSteven hat einen komfortablen Zustand erreicht. Die Plattform ist stabil und benötigt kaum Wartung, genau das, was wir uns am Anfang gewünscht haben: ein kleines System, das still und leise weiterarbeitet. Das lässt etwas Raum zum Experimentieren und hat unseren Gründern Zeit gegeben, einige andere Projekte zu starten, die Sie am Ende finden.

Also haben wir ein Experiment durchgeführt. Wir haben die Karte auf unserer Startseite zweimal neu gebaut: einmal in Rust, kompiliert zu WebAssembly, und einmal in Flutter. Dieser Artikel stellt alle drei auf einer Seite dar und vergleicht sie.

1. Das Original: SVG, CSS und ein wenig JavaScript

Einfach gesagt: das ist die Karte auf unserer Startseite. Sie ist so gebaut wie der Rest einer Webseite: eine Zeichnung aus Formen, die Ihr Browser bereits kennt, um sie darzustellen und zu animieren. Es ist die einfachste der drei und die, die die meisten Besucher sehen.

Es ist eine einzige SVG-Zeichnung. Der Browser führt die meisten Animationen über CSS aus, und ein kleines Skript übernimmt den Rest.

Zu seinen Vorteilen: Es gibt keinen Build-Schritt, also reicht eine Hugo-Vorlage. Es ist vektorisiert, bleibt also bei jeder Größe scharf. Alle 44 Punkte sind mit der Tastatur erreichbar, jeder mit einem Label für Screenreader. Und seine wenigen Wörter sind in alle unsere Sprachen übersetzt.

Der Nachteil ist das Gewicht auf der Seite. Das Markup der Karte ist etwa 107 KB groß (etwa 30 KB komprimiert), und im laufenden Betrieb hat sie etwa 670 Elemente und etwa 200 CSS-Animationen. Die Logik ist außerdem schwer zu testen: Das Timing steckt in CSS-Keyframes und einem Skript auf der Seite, sodass der einzige Test das Anschauen ist.

2. Rust und WebAssembly

Einfach gesagt: Rust ist eine Programmiersprache, die für ihre Schnelligkeit bekannt ist und viele Fehler erkennt, bevor ein Programm überhaupt ausgeführt wird. Hier haben wir das „Gehirn“ der Karte in Rust geschrieben, es in eine kompakte Form verpackt, die Browser ausführen können (genannt WebAssembly), und es die ganze Karte selbst zeichnen lassen, wie ein Maler, der eine Leinwand viele Male pro Sekunde neu malt. Für dich sieht es gleich aus.

Die ganze Karte wird auf einem einzigen Canvas von Rust gezeichnet, das zu WebAssembly kompiliert wurde. Der Rust-Code steuert das gesamte Verhalten der Karte und zeichnet alles in jedem Frame neu.

Das, was uns gefallen hat, ist, dass die Logik reines Rust ist, ohne etwas vom Browser: die Mathematik, wo Dinge hingehen und wann sie sich ändern, und der Parser, der die Landkontur liest. Es gibt 13 Tests, die in einem Bruchteil einer Sekunde laufen, und wenn das Timing des Zyklus falsch ist, schlägt ein Test fehl, anstatt dass jemand bemerkt, dass es merkwürdig aussieht. Etwa ein Drittel der ungefähr 1.070 Rust-Zeilen sind dieser getestete Kern (mit seinen Tests); der Rest zeichnet auf das Canvas und verarbeitet Mausereignisse.

Die Seite ist am Ende sehr leicht: ein Canvas-Element. Aber der Download ist größer. Das kompilierte Modul ist etwa 254 KB groß (etwa 92 KB komprimiert) plus etwa 28 KB JavaScript-Kleber, den das Build-Tool erzeugt. Und es gibt Kosten, die wir beim Arbeiten daran spüren:

• Eine Toolchain. Zum Bauen werden Rust, das WebAssembly-Ziel und ein Kommandozeilen-Tool benötigt, dessen Version genau mit der der Bibliothek übereinstimmen muss. Unser Build-Skript führt zuerst die Tests aus und stoppt, wenn einer fehlschlägt.
• Kein Tastatur- oder Screenreader-Zugriff auf einzelne Städte. Eine Leinwand ist ein Bild. Die 44 fokussierbaren Punkte der SVG-Version sind verschwunden.
• Nur Englisch. Die Beschriftungen sind im Programm festgeschrieben.
• Unschärfe. Der weiche Schattenrand verwendet einen Canvas-Unschärfefilter, den nicht jeder Browser unterstützt. Wir haben Safari nicht getestet, wo der Rand hart sein könnte.

3. Flutter

Einfach gesagt: Flutter ist ein Toolkit von Google zum Erstellen von Apps, die auf Telefonen, Computern und im Web aus einem einzigen Code-Satz laufen. Es verwendet nicht die eigenen Bausteine der Webseite. Es zeichnet alles selbst. Hier ist die Karte eine kleine App, die innerhalb dieser Seite gezeigt wird, das gleiche Toolkit, das unseren Ladekalkulator antreibt.

Die Karte wird mit einem benutzerdefinierten Painter gemalt und hier in einem Rahmen angezeigt. Flutter kann auch Telefon- und Desktop-Apps aus demselben Code erstellen, was sein Hauptargument ist: die Karte einmal schreiben, an mehreren Stellen ausführen.

Es ist die gleiche Logik wie die Rust-Map, auf Dart portiert, mit 11 Tests. Etwa 1.100 Zeilen inklusive Tests. Flutter übergibt jeder Stadt an Bildschirmleser einen beschrifteten Button, was die Canvas-Version nicht hat (wir haben nicht überprüft, wie gut es mit einem echten Bildschirmleser funktioniert). Es ist auch der größte Download: Die App ist etwa 1,8 MB groß (etwa 535 KB komprimiert). Flutters Zeichen-Engine ist ein weiterer Download, aber die Seite teilt bereits eine Kopie mit dem Taschenrechner, sodass ein Besucher, der den Taschenrechner geöffnet hat, sie nicht erneut herunterladen muss. Der Text ist in der Schriftart der Seite gesetzt, Merriweather, die der Browser zur Laufzeit lädt.

Was wir herausgefunden haben

Noch eine Anmerkung zur Geschwindigkeit. Bei unserer Überprüfung liefen die SVG-Karte und die Rust-Karte beide mit der Bildwiederholrate des Bildschirms (etwa 120 Bilder pro Sekunde auf dem Testdisplay), sodass die Bildrate sie nicht unterschied. Wir haben Flutters Bildrate nicht gemessen und auch nicht den Akku- oder CPU-Verbrauch, daher können wir nicht sagen, welche Variante auf einem Telefon leichter ist.

Dinge, die uns überrascht haben

Einige Details sind leicht falsch zu machen. Unsere ersten Klone zeichneten den Schlüssel und die Uhren mit einem festen Anteil der Karte, sodass sie auf kleinen Bildschirmen schrumpften und neben dem Original winzig aussahen. Das Original skaliert sie in der eigenen Schriftgröße der Seite (rem, die sich mit der Bildschirmbreite ändert). Die Klone lesen diese Größe jetzt von der Seite ab. Die Uhren unterscheiden sich ebenfalls: Die Zeiger des Originals bewegen sich in 15-Minuten-Schritten, während sie in den Rust- und Flutter-Versionen kontinuierlich drehen.

Zeitzonen sind nicht eingebaut. Weder Rust, das zu WebAssembly kompiliert wird, noch Dart verfügen über eine Zeitzonendatenbank, die “Asia/Dubai” kennt. Beide fragen stattdessen den Browser über dessen eingebauten Intl-Dienst ab, der auch die Sommerzeit korrekt berücksichtigt.

Alle drei teilen ihre Eingaben. Die Rust- und Flutter-Karten lesen die Städtegrenze und die Landumrisse von der Seite, auf der sie sich befinden, dieselben Daten, die auch die SVG-Karte verwendet. Ändert man eine Stadt, ändern sich alle drei. Das bedeutet auch, dass die Karten nur auf einer Seite laufen können, die sie bereitstellt.

Flutter Web merkt sich das. Flutter Web installiert seinen eigenen Cache, sodass wir nach einem Neuaufbau weiterhin die alte Version sahen, bis wir den Cache geleert haben.

Unser Fazit

Die SVG-Karte bleibt auf der Startseite. Für eine Zeichnung dieser Größe ist sie am leichtesten, zugänglich, übersetzt und benötigt nichts zum Bauen. Rust ist der interessantere Zweitplatzierte: Wenn wir jemals die Logik der Karte nachweislich korrekt brauchen oder schwere Berechnungen im Browser durchführen müssen, ist ein getesteter Rust-Kern ein guter Weg. Flutter macht Sinn, wenn die Karte jemals in einer Flutter-App leben soll.

Ein Experiment muss das Produkt nicht verändern, um lohnenswert zu sein. Wir haben am Ende ein klareres Bild davon, was jeder Ansatz kostet, eine getestete Beschreibung des Verhaltens der Karte und eine Seite, auf der man alle drei selbst sehen kann.

Was unsere Gründer als Nächstes bauen

Eine stabile Plattform lässt Zeit für andere Ideen. Neben EVnSteven arbeiten unsere Gründer an diesen Projekten:

Ride-Hailing, startet sehr bald Kimem ↗ (opens in a new tab) Ein Ride-Hailing-Dienst für Bahir Dar, Äthiopien, vom Gründer Mekonnen Alemu. Fahrgäste sehen eine Fahrpreis-Schätzung, bevor sie buchen, verfolgen den nächsten Fahrer auf einer Karte und bezahlen den Taxameter-Fahrpreis am Ende der Fahrt bar.

Gemeinnützig, Open Source StrayCats ↗ (opens in a new tab) Ein Projekt von David, um Menschen zu helfen, die sich um Straßenkatzen, streunende Katzen oder jede Katze kümmern, selbst wenn diese Katze zufällig ein Hund ist. Es befindet sich noch in der Ideenphase, es gibt noch keine App, und David freut sich über eure Ideen und Rückmeldungen. Gewidmet Saibo, 2010–2026.

Bargeld-Tracking, kostenlos, startet bald Effectivo ↗ (opens in a new tab) Unvollkommene Buchführung mit einem Twist, für diejenigen, die Bargeld verwenden. Logge einen Einkauf mit wenigen Taps, zähle, was in deinem Portemonnaie ist, und schaue zurück, was sich gelohnt hat. Der Twist ist, dass jeder, der weiterhin Bargeld nutzt, dazu beiträgt, es für alle anderen zu erhalten. Kostenlos und werbefrei, kommt für Android und iPhone, mit einer Beta und einer Web-Demo, die jetzt läuft.