Samma karta, tre sätt: SVG, Rust och Flutter

EVnSteven har nått en bekväm plats. Plattformen är stabil och kräver inte mycket underhåll, vilket är precis vad vi ville när vi började: ett litet system som tyst fortsätter att fungera. Det lämnar lite utrymme för experiment, och det har gett våra grundare tid att starta några andra projekt, som du hittar i slutet.

Så vi gjorde ett experiment. Vi tog kartan på vår startsida och byggde om den två gånger: en gång i Rust kompilerat till WebAssembly, och en gång i Flutter. Den här artikeln visar alla tre på en sida och jämför dem.

1. Originalet: SVG, CSS och lite JavaScript

Enkelt uttryckt: det här är kartan på vår startsida. Den är byggd på samma sätt som resten av en webbsida byggs: en teckning gjord av former som din webbläsare redan vet hur den ska visa och animera. Det är den enklaste av de tre, och det är den som de flesta besökare ser.

Det är en SVG-teckning. Webbläsaren kör de flesta animationerna från CSS, och ett litet skript hanterar resten.

Till dess fördel: det finns inget byggsteg, så en Hugo-mall är allt som behövs. Det är vektorbaserat, så det förblir skarpt i alla storlekar. Alla 44 punkter kan nås med tangentbordet, var och en med en etikett för skärmläsare. Och dess få ord är översatta till alla våra språk.

Kostnaden är tyngd i sidan. Kartans markup är cirka 107 KB (cirka 30 KB komprimerat), och när den körs har den cirka 670 element och cirka 200 CSS-animationer. Logiken är också svår att testa: timingen finns inuti CSS-keyframes och ett skript på sidan, så det enda testet är att titta på den.

2. Rust och WebAssembly

Enkelt uttryckt: Rust är ett programmeringsspråk känt för att vara snabbt och för att fånga många misstag innan ett program ens körs. Här skrev vi kartans “hjärna” i Rust, paketerade den i en kompakt form som webbläsare kan köra (kallad WebAssembly), och lät den måla hela kartan själv, som en målare som ritar om en duk många gånger per sekund. För dig ser det likadant ut.

Hela kartan ritas på en enda canvas av Rust som har kompilerats till WebAssembly. Rust-koden äger all kartans beteende och ritar om allt varje bildruta.

Det vi gillade är att logiken är ren Rust utan något från webbläsaren i den: matematiken för var saker ska vara och när de ändras, och parsern som läser landkonturen. Den har 13 tester som körs på en bråkdel av en sekund, och om cykelns timing är fel så misslyckas ett test istället för att någon ska märka att det ser konstigt ut. Ungefär en tredjedel av de cirka 1 070 raderna Rust är den testade kärnan (med dess tester); resten ritar på canvas och hanterar mus-händelser.

Sidan blir väldigt lätt: ett canvas-element. Men nedladdningen är större. Den kompilerade modulen är ungefär 254 KB (ungefär 92 KB komprimerad) plus cirka 28 KB JavaScript-lim som byggverktyget genererar. Och det finns kostnader vi känner av när vi arbetar med det:

• En verktygskedja. Byggandet kräver Rust, WebAssembly-målet och ett kommandoradsverktyg vars version måste matcha bibliotekets exakt. Vårt byggskript kör testerna först och stoppar om ett misslyckas.
• Ingen tangentbords- eller skärmläsaråtkomst till enskilda städer. En canvas är en bild. SVG-versionens 44 fokuserbara punkter är borta.
• Endast engelska. Etiketterna är inlagda i programmet.
• Blur. Den mjuka skuggkanten använder ett canvas-blurfilter, vilket inte alla webbläsare stödjer. Vi har inte testat Safari, där kanten kan vara hård.

3. Flutter

Enkelt uttryckt: Flutter är ett verktyg från Google för att bygga appar som körs på telefoner, datorer och webben från en och samma kodbas. Det använder inte webbsidans egna byggstenar. Det ritar allt själv. Här är kartan en liten app som visas inuti denna sida, samma verktyg som driver vår laddningskalkylator.

Den målar kartan med en egen målningsfunktion och visas här i en ram. Flutter kan också bygga telefon- och skrivbordsappar från samma kod, vilket är dess huvudargument: skriv kartan en gång, kör den på flera ställen.

Det är samma logik som Rust-kartan, portad till Dart, med 11 tester. Cirka 1 100 rader inklusive tester. Flutter ger varje stad till skärmläsare som en märkt knapp, vilket canvas-versionen saknar (vi har inte kontrollerat hur bra det fungerar med en riktig skärmläsare). Det är också den största nedladdningen: appen är cirka 1,8 MB (cirka 535 KB komprimerad). Flutters ritmotor är en ytterligare nedladdning, men sidan delar redan en kopia med kalkylatorn, så en besökare som har öppnat kalkylatorn laddar inte ner den igen. Dess text är satt i sidans typsnitt, Merriweather, som webbläsaren hämtar vid körning.

Vad vi fann

En notering till om hastighet. I vår kontroll körde både SVG-kartan och Rust-kartan i skärmens uppdateringsfrekvens (cirka 120 bilder per sekund på testdisplayen), så bildfrekvensen skiljde dem inte åt. Vi mätte inte Flutters bildfrekvens, och vi mätte inte batteri- eller CPU-användning, så vi kan inte säga vilken som är lättare för en telefon.

Saker som överraskade oss

Vissa detaljer är lätta att få fel på. Våra första kloner ritade nyckeln och klockorna i en fast andel av kartan, så de krympte på små skärmar och såg pyttesmå ut jämfört med originalet. Originalet storleksanpassar dem i sidans egen fontenhet (rem, som ändras med skärmbredden). Klonerna läser nu den storleken från sidan. Klockorna skiljer sig också: originalets visare rör sig i 15-minuterssteg, medan de i Rust- och Flutter-versionerna snurrar kontinuerligt.

Tidszoner var inte inbyggda. Varken Rust kompilerat till WebAssembly eller Dart har en tidszondatabas som känner till “Asia/Dubai”. Båda frågar istället webbläsaren, genom dess inbyggda Intl-tjänst, som också hanterar sommartid korrekt.

Alla tre delar sina indata. Rust- och Flutter-kartorna läser stadslistan och landkonturen från sidan de finns på, samma data som SVG-kartan använder. Ändra en stad, och alla tre ändras. Det innebär också att kartorna bara kan köras på en sida som tillhandahåller dem.

Flutter web kommer ihåg. Flutter web installerar sin egen cache, så efter ombyggnad fortsatte vi att se den gamla versionen tills vi rensade den.

Vår slutsats

SVG-kartan stannar på startsidan. För en ritning i den här storleken är den lättast, den är tillgänglig, den är översatt och den kräver inget bygge. Rust är den mer intressanta tvåan: om vi någonsin behöver att kartans logik ska vara bevisbart korrekt, eller behöver göra tung beräkning i webbläsaren, är en testad Rust-kärna ett bra sätt att göra det på. Flutter är vettigt om kartan någonsin behöver leva inuti en Flutter-app.

Ett experiment behöver inte ändra produkten för att vara värt att genomföra. Vi fick till slut en tydligare bild av vad varje tillvägagångssätt kostar, en testad beskrivning av hur kartan beter sig, och en sida där du kan se alla tre själv.

Vad våra grundare bygger härnäst

En stabil plattform ger tid för andra idéer. Förutom EVnSteven arbetar våra grundare med dessa:

Ride-hailing, launching very soon Kimem ↗ (opens in a new tab) En ride-hailing-tjänst för Bahir Dar, Etiopien, från grundaren Mekonnen Alemu. Resenärer ser en prisuppskattning innan de bokar, följer den närmaste förarens färd på en karta och betalar det taxameterbaserade priset kontant i slutet av resan.

Non-profit, open source StrayCats ↗ (opens in a new tab) Ett projekt från David för att hjälpa människor som bryr sig om hemlösa katter, herrelösa katter eller vilken katt som helst, även om den katten råkar vara en hund. Det är fortfarande på idéstadiet, utan någon app än, och David skulle uppskatta dina idéer och feedback. Tillägnad Saibo, 2010–2026.

Cash tracking, free, launching soon Effectivo ↗ (opens in a new tab) Ofullkomlig bokföring med en twist, för dem som använder kontanter. Logga ett köp med några få tryck, räkna vad du har i plånboken och se tillbaka på vad som var värt det. Twisten är att alla som fortsätter använda kontanter hjälper till att hålla det tillgängligt för alla andra. Gratis och utan annonser, kommer till Android och iPhone, med en beta och en webb-demo som körs nu.