Den Samme Kort, Tre Måder: SVG, Rust og Flutter

EVnSteven har nået et behageligt sted. Platformen er stabil og kræver ikke meget vedligeholdelse, hvilket er præcis, hvad vi ønskede, da vi startede: et lille system, der stille og roligt bliver ved med at fungere. Det giver lidt plads til at eksperimentere, og det har givet vores grundlæggere tid til at starte et par andre projekter, som du kan finde til sidst.

Så vi lavede et eksperiment. Vi tog kortet på vores hjemmeside og genopbyggede det to gange: én gang i Rust kompileret til WebAssembly, og én gang i Flutter. Denne artikel samler alle tre på én side og sammenligner dem.

1. Den originale: SVG, CSS og lidt JavaScript

I enkle vendinger: dette er kortet på vores hjemmeside. Det er bygget på samme måde som resten af en webside: en tegning lavet af former, som din browser allerede ved, hvordan den skal vise og animere. Det er det simpleste af de tre, og det er det, de fleste besøgende ser.

Det er én SVG-tegning. Browseren kører det meste af animationerne fra CSS, og et lille script håndterer resten.

Til dets fordel: der er ikke noget build-trin, så en Hugo-skabelon er alt, hvad der behøves. Det er vektorbaseret, så det forbliver skarpt i enhver størrelse. Alle 44 prikker kan nås med tastaturet, hver med en etiket til skærmlæsere. Og dets få ord er oversat til alle vores sprog.

Prisen er vægt i siden. Kortets markup er omkring 107 KB (ca. 30 KB komprimeret), og når det kører, har det omkring 670 elementer og omkring 200 CSS-animationer. Logikken er også svær at teste: timingen ligger inde i CSS keyframes og et script i siden, så den eneste test er at se på det.

2. Rust og WebAssembly

I enkle vendinger: Rust er et programmeringssprog kendt for at være hurtigt og for at fange mange fejl, før et program overhovedet kører. Her skrev vi kortets “hjerne” i Rust, pakkede det i en kompakt form, som browsere kan køre (kaldet WebAssembly), og lod det male hele kortet selv, som en maler der tegner et lærred mange gange i sekundet. For dig ser det det samme ud.

Hele kortet tegnes på et enkelt lærred af Rust, som er blevet kompileret til WebAssembly. Rust-koden ejer al kortets adfærd og tegner alt om igen hver frame.

Det vi kunne lide er, at logikken er ren Rust uden noget fra browseren i: matematikken for, hvor tingene skal være, og hvornår de ændrer sig, samt parseren der læser landets omrids. Den har 13 tests, der kører på en brøkdel af et sekund, og hvis cyklustimingen er forkert, fejler en test i stedet for at nogen bemærker, at det ser mærkeligt ud. Omtrent en tredjedel af de cirka 1.070 linjer Rust er den testede kerne (med dens tests); resten tegner på lærredet og håndterer musebegivenheder.

Siden ender med at være meget let: et enkelt canvas-element. Men downloadet er større. Den kompilerede modul er omkring 254 KB (omkring 92 KB komprimeret) plus omkring 28 KB JavaScript-lim, som build-værktøjet genererer. Og der er omkostninger, vi mærker, når vi arbejder på det:

• Et værktøjskæde. Bygning kræver Rust, WebAssembly-målet og et kommandolinjeværktøj, hvis version skal matche bibliotekets præcist. Vores build-script kører først testene og stopper, hvis en fejler.
• Ingen tastatur- eller skærmlæseradgang til individuelle byer. Et canvas er et billede. SVG-versionens 44 fokuserbare prikker er væk.
• Kun engelsk. Etiketterne er skrevet ind i programmet.
• Sløring. Den bløde skyggekant bruger et canvas sløringsfilter, som ikke alle browsere understøtter. Vi har ikke testet Safari, hvor kanten kan være hård.

3. Flutter

Kort fortalt: Flutter er et værktøjssæt fra Google til at bygge apps, der kører på telefoner, computere og web fra ét sæt kode. Det bruger ikke websidens egne byggesten. Det tegner alt selv. Her er kortet en lille app vist inde på denne side, det samme værktøjssæt, som driver vores ladeberegner.

Den maler kortet med en brugerdefineret maler, og det vises her i en ramme. Flutter kan også bygge telefon- og desktop-apps fra samme kode, hvilket er dets hovedargument: skriv kortet én gang, kør det flere steder.

Det er den samme logik som Rust-kortet, overført til Dart, med 11 tests. Omkring 1.100 linjer inklusive tests. Flutter giver hver by til skærmlæsere som en mærket knap, hvilket canvas-versionen mangler (vi har ikke tjekket, hvor godt det fungerer med en rigtig skærmlæser). Det er også det største download: appen er omkring 1,8 MB (omkring 535 KB komprimeret). Flutters tegneengine er en yderligere download, men siden deler allerede en kopi med lommeregneren, så en besøgende, der har åbnet lommeregneren, downloader den ikke igen. Dens tekst er sat i sidens skrifttype, Merriweather, som browseren henter ved kørsel.

Hvad vi fandt

En ekstra bemærkning om hastighed. Ved vores tjek kørte både SVG-kortet og Rust-kortet ved skærmens opdateringshastighed (omkring 120 billeder per sekund på testskærmen), så billedhastigheden adskilte dem ikke. Vi målte ikke Flutters billedhastighed, og vi målte ikke batteri- eller CPU-forbrug, så vi kan ikke sige, hvilken der er lettere på en telefon.

Ting, der overraskede os

Nogle detaljer er nemme at få forkert. Vores første kloner tegnede nøglen og urene i en fast andel af kortet, så de krympede på små skærme og så små ud ved siden af originalen. Originalen størrelsesindstiller dem i sidens egen fontenhed (rem, som ændrer sig med skærmbredden). Klonerne læser nu den størrelse fra siden. Urene adskiller sig også: originalens visere bevæger sig i 15-minutters trin, mens de i Rust- og Flutter-versionerne drejer kontinuerligt.

Tidszoner var ikke indbygget. Hverken Rust kompileret til WebAssembly eller Dart indeholder en tidszonedatabase, der kender “Asia/Dubai”. Begge spørger i stedet browseren via dens indbyggede Intl-service, som også håndterer sommertid korrekt.

Alle tre deler deres input. Rust- og Flutter-kortene læser bylisten og landkonturen fra den side, de er på, de samme data som SVG-kortet bruger. Ændr en by, og alle tre ændrer sig. Det betyder også, at kortene kun kan køre på en side, der stiller dem til rådighed.

Flutter web husker. Flutter web installerer sin egen cache, så efter genopbygning blev vi ved med at se den gamle version, indtil vi ryddede den.

Vores konklusion

SVG-kortet bliver på forsiden. For en tegning i denne størrelse er det lettest, det er tilgængeligt, det er oversat, og det kræver intet at bygge. Rust er den mere interessante nummer to: hvis vi nogensinde har brug for, at kortets logik skal være beviseligt korrekt, eller skal udføre tung beregning i browseren, er en testet Rust-kerne en god måde at gøre det på. Flutter giver mening, hvis kortet nogensinde skal leve inde i en Flutter-app.

Et eksperiment behøver ikke at ændre produktet for at være værd at køre. Vi endte med et klarere billede af, hvad hver tilgang koster, en testet beskrivelse af, hvordan kortet opfører sig, og en side hvor du kan se alle tre selv.

Hvad vores grundlæggere bygger næste gang

En stabil platform giver tid til andre idéer. Udover EVnSteven arbejder vores grundlæggere på disse:

Ride-hailing, lanceres meget snart Kimem ↗ (opens in a new tab) En ride-hailing-tjeneste for Bahir Dar, Etiopien, fra grundlægger Mekonnen Alemu. Passagerer ser et prisoverslag, før de bestiller, kan følge den nærmeste chauffør på et kort og betaler den målerbaserede pris kontant ved turens afslutning.

Non-profit, open source StrayCats ↗ (opens in a new tab) Et projekt fra David til at hjælpe folk, der tager sig af gade- og herreløse katte, eller enhver kat, selv hvis katten tilfældigvis er en hund. Det er stadig på idéstadiet, uden en app endnu, og David vil meget gerne have dine idéer og feedback. Dedikeret til Saibo, 2010–2026.

Kontantsporing, gratis, lanceres snart Effectivo ↗ (opens in a new tab) Uperfekt regnskab med et twist, for dem der bruger kontanter. Registrer et køb med få tryk, tæl hvad du har i din pung, og se tilbage på, hvad der var det værd. Twistet er, at alle, der fortsætter med at bruge kontanter, hjælper med at bevare det for alle andre. Gratis og uden reklamer, kommer til Android og iPhone, med en beta og en webdemo, der kører nu.