Dezelfde Kaart, Drie Manieren: SVG, Rust en Flutter

EVnSteven heeft een comfortabele plek bereikt. Het platform is stabiel en heeft niet veel onderhoud nodig, wat precies is wat we wilden toen we begonnen: een klein systeem dat stilletjes blijft werken. Dat laat wat ruimte over om te experimenteren, en het heeft onze oprichters tijd gegeven om een paar andere projecten te starten, die je aan het einde zult vinden.

Dus we hebben een experiment gedaan. We hebben de kaart op onze startpagina genomen en twee keer opnieuw opgebouwd: één keer in Rust gecompileerd naar WebAssembly, en één keer in Flutter. Dit artikel zet alle drie op één pagina en vergelijkt ze.

1. De originele: SVG, CSS en een beetje JavaScript

In gewone taal: dit is de kaart op onze startpagina. Het is gebouwd op dezelfde manier als de rest van een webpagina: een tekening gemaakt van vormen die je browser al weet weer te geven en te animeren. Het is de eenvoudigste van de drie, en het is degene die de meeste bezoekers zien.

Het is één SVG-tekening. De browser voert het grootste deel van de animaties uit via CSS, en een klein script regelt de rest.

In zijn voordeel: er is geen build-stap, dus een Hugo-template is alles wat het nodig heeft. Het is vectorieel, dus het blijft scherp op elke grootte. Alle 44 punten zijn bereikbaar met het toetsenbord, elk met een label voor schermlezers. En de paar woorden zijn vertaald in al onze talen.

De kost is het gewicht op de pagina. De markup van de kaart is ongeveer 107 KB (ongeveer 30 KB gecomprimeerd), en eenmaal draaiend heeft het ongeveer 670 elementen en ongeveer 200 CSS-animaties. De logica is ook moeilijk te testen: de timing zit in CSS-keyframes en een script in de pagina, dus de enige test is ernaar kijken.

2. Rust en WebAssembly

In gewone taal: Rust is een programmeertaal die bekend staat om zijn snelheid en het opsporen van veel fouten voordat een programma überhaupt draait. Hier schreven we het “brein” van de kaart in Rust, pakten het in een compacte vorm die browsers kunnen uitvoeren (WebAssembly genoemd), en lieten het de hele kaart zelf tekenen, als een schilder die één canvas vele keren per seconde opnieuw schildert. Voor jou ziet het er hetzelfde uit.

De hele kaart wordt getekend op één enkele canvas door Rust, dat is gecompileerd naar WebAssembly. De Rust-code beheert al het gedrag van de kaart en tekent alles elke frame opnieuw.

Wat we leuk vonden is dat de logica pure Rust is zonder iets van de browser erin: de wiskunde voor waar dingen komen en wanneer ze veranderen, en de parser die de landgrens leest. Het heeft 13 tests die binnen een fractie van een seconde draaien, en als de timing van de cyclus niet klopt, faalt een test in plaats van dat iemand merkt dat het er vreemd uitziet. Ongeveer een derde van de ongeveer 1.070 regels Rust bestaat uit die geteste kern (met zijn tests); de rest tekent op de canvas en verwerkt muisgebeurtenissen.

De pagina blijft daardoor erg licht: één canvas-element. Maar de download is groter. De gecompileerde module is ongeveer 254 KB (ongeveer 92 KB gecomprimeerd) plus ongeveer 28 KB JavaScript-lijm die het bouwgereedschap genereert. En er zijn nadelen die we voelen tijdens het werken eraan:

• Een toolchain. Bouwen vereist Rust, de WebAssembly-doelomgeving en een commandoregeltool waarvan de versie exact moet overeenkomen met die van de bibliotheek. Ons buildscript voert eerst de tests uit en stopt als er één faalt.
• Geen toegang tot individuele steden via toetsenbord of schermlezer. Een canvas is een afbeelding. De 44 focusbare punten van de SVG-versie zijn verdwenen.
• Alleen Engels. De labels zijn in het programma geschreven.
• Vervaging. De zachte schaduwrand gebruikt een canvas-vervagingfilter, dat niet door elke browser wordt ondersteund. We hebben Safari niet getest, waar de rand hard kan zijn.

3. Flutter

In gewone taal: Flutter is een toolkit van Google voor het bouwen van apps die draaien op telefoons, computers en het web vanuit één set code. Het gebruikt niet de eigen bouwstenen van de webpagina. Het tekent alles zelf. Hier is de kaart een kleine app die binnen deze pagina wordt getoond, dezelfde toolkit die onze laadcalculator aandrijft.

Het schildert de kaart met een custom painter, en wordt hier in een frame getoond. Flutter kan ook telefoon- en desktopapps bouwen vanuit dezelfde code, wat het belangrijkste argument is: schrijf de kaart één keer, gebruik hem op meerdere plekken.

Het is dezelfde logica als de Rust map, overgezet naar Dart, met 11 tests. Ongeveer 1.100 regels inclusief tests. Flutter geeft elke stad door aan schermlezers als een gelabelde knop, wat de canvasversie mist (we hebben niet gecontroleerd hoe goed het werkt met een echte schermlezer). Het is ook de grootste download: de app is ongeveer 1,8 MB (ongeveer 535 KB gecomprimeerd). Flutter’s tekenengine is een extra download, maar de site deelt al een exemplaar met de rekenmachine, dus een bezoeker die de rekenmachine heeft geopend, downloadt deze niet opnieuw. De tekst is gezet in het lettertype van de site, Merriweather, dat de browser tijdens het uitvoeren ophaalt.

Wat we vonden

Nog een opmerking over snelheid. Bij onze controle draaiden de SVG-kaart en de Rust-kaart beide op de verversingssnelheid van het scherm (ongeveer 120 frames per seconde op het testdisplay), dus het aantal frames per seconde maakte geen verschil. We hebben Flutter’s framesnelheid niet gemeten, en we hebben ook het batterij- of CPU-gebruik niet gemeten, dus we kunnen niet zeggen welke lichter is op een telefoon.

Dingen die ons verrasten

Sommige details zijn gemakkelijk verkeerd te krijgen. Onze eerste klonen tekenden de sleutel en de klokken op een vast aandeel van de kaart, dus ze krimpten op kleine schermen en zagen er piepklein uit naast het origineel. Het origineel bepaalt de grootte in de eigen font-eenheid van de pagina (rem, die verandert met de schermbreedte). De klonen lezen die grootte nu van de pagina. De klokken verschillen ook: de wijzers van het origineel bewegen in stappen van 15 minuten, terwijl ze in de Rust- en Flutter-versies continu draaien.

Tijdzones waren niet ingebouwd. Noch Rust gecompileerd naar WebAssembly, noch Dart bevat een tijdzone-database die “Asia/Dubai” kent. Beide vragen in plaats daarvan de browser, via diens ingebouwde Intl-service, die ook de zomertijd correct verwerkt.

Alle drie delen hun invoer. De Rust- en Flutter-kaarten lezen de lijst met steden en de landomtrek van de pagina waarop ze staan, dezelfde gegevens die de SVG-kaart gebruikt. Verander een stad, en alle drie veranderen mee. Dit betekent ook dat de kaarten alleen kunnen draaien op een pagina die ze levert.

Flutter web onthoudt. Flutter web installeert zijn eigen cache, dus na het herbouwen bleven we de oude versie zien totdat we die leeggemaakt hadden.

Onze conclusie

De SVG-kaart blijft op de startpagina. Voor een tekening van deze grootte is het de lichtste, het is toegankelijk, het is vertaald, en het heeft niets nodig om te bouwen. Rust is de interessantere nummer twee: als we ooit de logica van de kaart bewijsbaar correct moeten hebben, of zware berekeningen in de browser moeten doen, is een geteste Rust-kern een goede manier om dat te doen. Flutter is logisch als de kaart ooit binnen een Flutter-app moet leven.

Een experiment hoeft het product niet te veranderen om de moeite waard te zijn. We eindigden met een duidelijker beeld van wat elke aanpak kost, een geteste beschrijving van hoe de kaart zich gedraagt, en een pagina waar je alle drie zelf kunt zien.

Wat onze oprichters hierna bouwen

Een stabiel platform laat tijd over voor andere ideeën. Naast EVnSteven werken onze oprichters aan het volgende:

Ritdiensten, binnenkort gelanceerd Kimem ↗ (opens in a new tab) Een ritdienst voor Bahir Dar, Ethiopië, van oprichter Mekonnen Alemu. Passagiers zien een prijsindicatie voordat ze boeken, volgen de dichtstbijzijnde chauffeur op een kaart en betalen de meterprijs contant aan het einde van de rit.

Non-profit, open source StrayCats ↗ (opens in a new tab) Een project van David om mensen te helpen die zorgen voor zwerfkatten, straatkatten of welke kat dan ook, zelfs als die kat toevallig een hond is. Het bevindt zich nog in de ideeënfase, er is nog geen app, en David ontvangt graag je ideeën en feedback. Toegewijd aan Saibo, 2010–2026.

Cash tracking, gratis, binnenkort gelanceerd Effectivo ↗ (opens in a new tab) Onvolmaakte boekhouding met een twist, voor wie contant geld gebruikt. Registreer een aankoop met een paar tikken, tel wat er in je portemonnee zit, en kijk terug wat de moeite waard was. De twist is dat iedereen die contant blijft gebruiken helpt om het voor iedereen beschikbaar te houden. Gratis en zonder advertenties, binnenkort beschikbaar voor Android en iPhone, met een beta en een webdemo die nu draaien.