Den Samme Kartet, Tre Måter: SVG, Rust og Flutter

EVnSteven har nådd et komfortabelt sted. Plattformen er stabil og trenger ikke mye vedlikehold, noe som er akkurat det vi ønsket da vi startet: et lite system som stille og rolig fortsetter å fungere. Det gir litt rom for eksperimentering, og det har gitt våre grunnleggere tid til å starte noen andre prosjekter, som du finner på slutten.

Så vi kjørte et eksperiment. Vi tok kartet på hjemmesiden vår og bygde det opp på nytt to ganger: en gang i Rust kompilert til WebAssembly, og en gang i Flutter. Denne artikkelen viser alle tre på én side og sammenligner dem.

1. Originalen: SVG, CSS og litt JavaScript

På enkelt språk: dette er kartet på hjemmesiden vår. Det er bygget på samme måte som resten av en webside: en tegning laget av former som nettleseren din allerede vet hvordan den skal vise og animere. Det er den enkleste av de tre, og det er den de fleste besøkende ser.

Det er én SVG-tegning. Nettleseren kjører de fleste animasjonene fra CSS, og et lite skript håndterer resten.

Til fordel: det er ingen byggeprosess, så en Hugo-mal er alt det trenger. Det er vektorbasert, så det forblir skarpt i alle størrelser. Alle 44 punktene kan nås med tastaturet, hver med en etikett for skjermlesere. Og de få ordene er oversatt til alle våre språk.

Kostnaden er vekt i siden. Kartets markup er omtrent 107 KB (omtrent 30 KB komprimert), og når det kjører har det omtrent 670 elementer og omtrent 200 CSS-animasjoner. Logikken er også vanskelig å teste: timingen ligger inne i CSS keyframes og et skript i siden, så den eneste testen er å se på det.

2. Rust og WebAssembly

Enkelt sagt: Rust er et programmeringsspråk kjent for å være raskt og for å fange mange feil før et program i det hele tatt kjører. Her skrev vi kartets “hjerne” i Rust, pakket det inn i en kompakt form som nettlesere kan kjøre (kalt WebAssembly), og lot det male hele kartet selv, som en maler som tegner om et lerret mange ganger i sekundet. For deg ser det likt ut.

Hele kartet tegnes på ett enkelt lerret av Rust som er kompilert til WebAssembly. Rust-koden eier all oppførsel til kartet og tegner alt på nytt hver ramme.

Det vi likte er at logikken er ren Rust uten noe fra nettleseren i det: matematikken for hvor ting skal være og når de endres, og parseren som leser landkonturen. Den har 13 tester som kjører på et brøkdels sekund, og hvis syklusens timing er feil, feiler en test i stedet for at noen legger merke til at det ser rart ut. Omtrent en tredjedel av de cirka 1 070 linjene med Rust er denne testede kjernen (med testene); resten tegner på lerretet og håndterer musehendelser.

Siden ender opp veldig lett: ett canvas-element. Men nedlastingen er større. Den kompilerte modulen er omtrent 254 KB (omtrent 92 KB komprimert) pluss omtrent 28 KB med JavaScript-lim som byggeverktøyet genererer. Og det er kostnader vi merker når vi jobber med det:

• En verktøykjede. Bygging krever Rust, WebAssembly-målet og et kommandolinjeverktøy hvis versjon må samsvare nøyaktig med bibliotekets. Vårt byggeskript kjører testene først og stopper hvis en feiler.
• Ingen tastatur- eller skjermlesertilgang til individuelle byer. Et lerret er et bilde. SVG-versjonens 44 fokuserbare prikker er borte.
• Kun engelsk. Etikettene er skrevet inn i programmet.
• Uskarphet. Den myke skyggekanten bruker et lerrets uskarphetsfilter, som ikke alle nettlesere støtter. Vi har ikke testet Safari, der kanten kan være hard.

3. Flutter

Enkelt sagt: Flutter er et verktøysett fra Google for å bygge apper som kjører på telefoner, datamaskiner og nettet fra én kodebase. Det bruker ikke nettsidens egne byggeklosser. Det tegner alt selv. Her er kartet en liten app vist inne i denne siden, det samme verktøysettet som driver vår ladekalkulator.

Det maler kartet med en egendefinert maler, og det vises her i en ramme. Flutter kan også bygge telefon- og skrivebordsapper fra samme kode, som er dets hovedargument: skriv kartet én gang, kjør det flere steder.

Det er samme logikk som Rust-kartet, portet til Dart, med 11 tester. Omtrent 1 100 linjer inkludert tester. Flutter gir hver by til skjermlesere som en merket knapp, noe lerretversjonen mangler (vi har ikke sjekket hvor godt det fungerer med en ekte skjermleser). Det er også den største nedlastingen: appen er omtrent 1,8 MB (omtrent 535 KB komprimert). Flutters tegne-motor er en ekstra nedlasting, men siden deler allerede en kopi med kalkulatoren, så en besøkende som har åpnet kalkulatoren laster den ikke ned på nytt. Teksten er satt i sidens font, Merriweather, som nettleseren henter ved kjøring.

Hva vi fant

En til merknad om hastighet. I vår sjekk kjørte både SVG-kartet og Rust-kartet med skjermens oppdateringsfrekvens (omtrent 120 bilder per sekund på testskjermen), så bildefrekvens skilte dem ikke. Vi målte ikke Flutters bildefrekvens, og vi målte ikke batteri- eller CPU-bruk, så vi kan ikke si hvilken som er lettere på en telefon.

Ting som overrasket oss

Noen detaljer er lett å få feil. Våre første kloner tegnet nøkkelen og klokkene med en fast andel av kartet, så de krympet på små skjermer og så små ut ved siden av originalen. Originalen størrelsesbestemmer dem i sidens egen fontenhet (rem, som endres med skjermbredde). Klonene leser nå den størrelsen fra siden. Klokkene er også forskjellige: originalens visere beveger seg i 15-minutters trinn, mens i Rust- og Flutter-versjonene snur de kontinuerlig.

Tidssoner var ikke innebygd. Verken Rust kompilert til WebAssembly eller Dart har en tidssone-database som kjenner til “Asia/Dubai”. Begge spør i stedet nettleseren, gjennom dens innebygde Intl-tjeneste, som også håndterer sommertid riktig.

Alle tre deler sine input. Rust- og Flutter-kartene leser bylisten og landkonturen fra siden de er på, de samme dataene som SVG-kartet bruker. Endre en by, og alle tre endres. Det betyr også at kartene bare kan kjøre på en side som gir dem disse dataene.

Flutter web husker. Flutter web installerer sin egen cache, så etter ombygging fortsatte vi å se den gamle versjonen til vi tømte den.

Vår konklusjon

SVG-kartet blir på hjemmesiden. For en tegning av denne størrelsen er det det letteste, det er tilgjengelig, det er oversatt, og det trenger ingenting for å bygges. Rust er den mer interessante utfordreren: hvis vi noen gang trenger at kartets logikk skal være beviselig riktig, eller trenger å gjøre tung beregning i nettleseren, er en testet Rust-kjerne en god måte å gjøre det på. Flutter gir mening hvis kartet noen gang trenger å leve inne i en Flutter-app.

Et eksperiment trenger ikke å endre produktet for å være verdt å kjøre. Vi endte opp med et klarere bilde av hva hver tilnærming koster, en testet beskrivelse av hvordan kartet oppfører seg, og en side hvor du kan se alle tre selv.

Hva våre grunnleggere bygger neste

En stabil plattform gir tid til andre ideer. I tillegg til EVnSteven jobber våre grunnleggere med disse:

Kjøretjeneste, lanseres veldig snart Kimem ↗ (opens in a new tab) En kjøretjeneste for Bahir Dar, Etiopia, fra grunnlegger Mekonnen Alemu. Passasjerer ser et prisoverslag før de bestiller, følger den nærmeste sjåføren på et kart, og betaler den takserte prisen kontant ved slutten av turen.

Ideell, åpen kildekode StrayCats ↗ (opens in a new tab) Et prosjekt fra David for å hjelpe folk som bryr seg om gatekatter, hjemløse katter, eller enhver katt, selv om den katten tilfeldigvis er en hund. Det er fortsatt på idéstadiet, uten app ennå, og David vil gjerne ha dine ideer og tilbakemeldinger. Dedikert til Saibo, 2010–2026.

Kontantsporing, gratis, lanseres snart Effectivo ↗ (opens in a new tab) Ufullkommen regnskapsføring med en vri, for de som bruker kontanter. Loggfør et kjøp med noen få trykk, tell hva du har i lommeboken, og se tilbake på hva som var verdt det. Vrien er at alle som fortsetter å bruke kontanter hjelper med å holde det tilgjengelig for alle andre. Gratis og uten annonser, kommer til Android og iPhone, med en beta og en nett-demo som kjører nå.