Aceeași hartă, trei moduri: SVG, Rust și Flutter

EVnSteven a ajuns într-un loc confortabil. Platforma este stabilă și nu necesită multă întreținere, ceea ce este exact ceea ce ne-am dorit când am început: un sistem mic care funcționează liniștit. Asta lasă puțin spațiu pentru experimentare și le-a oferit fondatorilor noștri timp să înceapă câteva alte proiecte, pe care le veți găsi la final.

Așadar, am făcut un experiment. Am luat harta de pe pagina noastră principală și am reconstruit-o de două ori: o dată în Rust compilat în WebAssembly și o dată în Flutter. Acest articol pune toate trei pe o singură pagină și le compară.

1. Originalul: SVG, CSS și puțin JavaScript

În termeni simpli: aceasta este harta de pe pagina noastră principală. Este construită în același mod în care este construit restul unei pagini web: un desen format din forme pe care browserul tău deja știe să le afișeze și să le anime. Este cea mai simplă dintre cele trei și este cea pe care o văd majoritatea vizitatorilor.

Este un singur desen SVG. Browserul rulează majoritatea animațiilor din CSS, iar un mic script se ocupă de restul.

În favoarea sa: nu există o etapă de construire, deci un șablon Hugo este tot ce are nevoie. Este vectorial, deci rămâne clar la orice dimensiune. Toate cele 44 de puncte pot fi accesate cu tastatura, fiecare având o etichetă pentru cititoarele de ecran. Și puținele cuvinte sunt traduse în toate limbile noastre.

Costul este greutatea în pagină. Marcajul hărții are aproximativ 107 KB (aproximativ 30 KB comprimat), iar odată rulând are aproximativ 670 de elemente și aproximativ 200 de animații CSS. Logica este de asemenea greu de testat: sincronizarea trăiește în cadrul CSS keyframes și un script în pagină, deci singurul test este să te uiți la ea.

2. Rust și WebAssembly

În termeni simpli: Rust este un limbaj de programare cunoscut pentru viteza sa și pentru faptul că prinde multe greșeli înainte ca un program să ruleze vreodată. Aici am scris „creierul” hărții în Rust, l-am împachetat într-o formă compactă pe care browserele o pot rula (numită WebAssembly) și l-am lăsat să picteze singur întreaga hartă, ca un pictor care redesenează o pânză de multe ori pe secundă. Pentru tine arată la fel.

Întreaga hartă este desenată pe o singură pânză de Rust care a fost compilat în WebAssembly. Codul Rust deține tot comportamentul hărții și redesenează totul la fiecare cadru.

Partea care ne-a plăcut este că logica este Rust simplu, fără nimic din browser în ea: matematica pentru unde merg lucrurile și când se schimbă, și parserul care citește conturul terenului. Are 13 teste care rulează într-o fracțiune de secundă, iar dacă sincronizarea ciclului este greșită, un test eșuează în loc ca cineva să observe că arată ciudat. Aproximativ o treime din cele aproximativ 1.070 de linii de Rust reprezintă acest nucleu testat (cu testele sale); restul desenează pe pânză și gestionează evenimentele mouse-ului.

Pagina ajunge foarte ușoară: un singur element canvas. Dar descărcarea este mai mare. Modulul compilat are aproximativ 254 KB (aproximativ 92 KB comprimat) plus aproximativ 28 KB de lipici JavaScript pe care îl generează instrumentul de construire. Și există costuri pe care le simțim când lucrăm la el:

• Un lanț de instrumente. Construirea necesită Rust, ținta WebAssembly și un instrument de linie de comandă a cărui versiune trebuie să se potrivească exact cu cea a bibliotecii. Scriptul nostru de construire rulează mai întâi testele și se oprește dacă unul eșuează.
• Fără acces la tastatură sau cititor de ecran pentru orașele individuale. Un canvas este o imagine. Versiunea SVG cu cele 44 de puncte focalizabile a dispărut.
• Doar în engleză. Etichetele sunt scrise în program.
• Estompare. Marginea umbrei moi folosește un filtru de estompare canvas, pe care nu toate browserele îl suportă. Nu am testat Safari, unde marginea poate fi dură.

3. Flutter

În termeni simpli: Flutter este un set de instrumente de la Google pentru construirea aplicațiilor care rulează pe telefoane, calculatoare și web dintr-un singur set de cod. Nu folosește blocurile de construcție ale paginii web. Desenează totul singur. Aici harta este o aplicație mică afișată în această pagină, același set de instrumente care alimentează calculatorul nostru de încărcare.

Pictrează harta cu un pictor personalizat și este afișată aici într-un cadru. Flutter poate construi și aplicații pentru telefon și desktop din același cod, ceea ce este argumentul său principal: scrie harta o dată, ruleaz-o în mai multe locuri.

Este aceeași logică ca în Rust map, portată în Dart, cu 11 teste. Aproximativ 1.100 de linii inclusiv testele. Flutter oferă fiecărui oraș un buton etichetat pentru cititoarele de ecran, ceea ce versiunea canvas nu are (nu am verificat cât de bine funcționează cu un cititor de ecran real). Este, de asemenea, cea mai mare descărcare: aplicația are aproximativ 1,8 MB (aproximativ 535 KB comprimat). Motorul de desenare Flutter este o descărcare suplimentară, dar site-ul deja partajează o copie cu calculatorul, deci un vizitator care a deschis calculatorul nu îl descarcă din nou. Textul este setat în fontul site-ului, Merriweather, pe care browserul îl preia la rulare.

Ce am descoperit

O notă în plus despre viteză. În verificarea noastră, harta SVG și harta Rust au rulat ambele la rata de reîmprospătare a ecranului (aproximativ 120 cadre pe secundă pe ecranul de test), deci rata cadrelor nu le-a diferențiat. Nu am măsurat rata cadrelor Flutter și nici consumul de baterie sau CPU, deci nu putem spune care este mai ușor pentru un telefon.

Lucruri care ne-au surprins

Unele detalii sunt ușor de greșit. Primele noastre clone desenau cheia și ceasurile la o cotă fixă a hărții, așa că se micșorau pe ecrane mici și arătau minuscule în comparație cu originalul. Originalul le dimensionează în unitatea de font a paginii (rem, care se schimbă odată cu lățimea ecranului). Clonele acum citesc această dimensiune din pagină. Ceasurile diferă și ele: acele originalului se mișcă în pași de 15 minute, în timp ce în versiunile Rust și Flutter se rotesc continuu.

Zonele orare nu erau integrate. Nici Rust compilat în WebAssembly, nici Dart nu au o bază de date a zonelor orare care să știe “Asia/Dubai”. Ambele cer browserului în schimb, prin serviciul său încorporat Intl, care gestionează corect și ora de vară.

Toate trei împart intrările. Hărțile Rust și Flutter citesc lista de orașe și conturul terenului din pagina pe care se află, aceleași date pe care le folosește harta SVG. Schimbă un oraș și toate trei se schimbă. Asta înseamnă și că hărțile pot rula doar pe o pagină care le furnizează aceste date.

Flutter web își amintește. Flutter web instalează propria sa memorie cache, așa că după reconstruire am continuat să vedem versiunea veche până când am golit cache-ul.

Concluzia noastră

Harta SVG rămâne pe pagina principală. Pentru un desen de această dimensiune este cea mai ușoară, este accesibilă, este tradusă și nu necesită nimic pentru a fi construită. Rust este un al doilea loc mai interesant: dacă vreodată vom avea nevoie ca logica hărții să fie demonstrabil corectă sau să facem calcule grele în browser, un nucleu Rust testat este o modalitate bună de a face asta. Flutter are sens dacă harta trebuie vreodată să trăiască într-o aplicație Flutter.

Un experiment nu trebuie să schimbe produsul ca să merite să fie realizat. Am ajuns cu o imagine mai clară a costurilor fiecărei abordări, o descriere testată a modului în care se comportă harta și o pagină unde poți vedea toate trei cu ochii tăi.

Ce construiesc în continuare fondatorii noștri

O platformă stabilă lasă timp pentru alte idei. Pe lângă EVnSteven, fondatorii noștri lucrează la următoarele:

Ride-hailing, lansare foarte curând Kimem ↗ (opens in a new tab) Un serviciu de ride-hailing pentru Bahir Dar, Etiopia, de la fondatorul Mekonnen Alemu. Călătorii văd o estimare a tarifului înainte de a face o rezervare, urmăresc șoferul cel mai apropiat pe o hartă și plătesc tariful măsurat în numerar la sfârșitul călătoriei.

Non-profit, open source StrayCats ↗ (opens in a new tab) Un proiect de la David pentru a ajuta persoanele care au grijă de pisicile de pe stradă, pisicile vagaboande sau orice pisică, chiar dacă acea pisică se întâmplă să fie un câine. Este încă în stadiul de idee, fără o aplicație deocamdată, iar David ar aprecia ideile și feedback-ul vostru. Dedicat lui Saibo, 2010–2026.

Urmărire numerar, gratuit, lansare curând Effectivo ↗ (opens in a new tab) Contabilitate imperfectă cu un twist, pentru cei care folosesc numerar. Înregistrează o achiziție în câteva atingeri, numără ce ai în portofel și privește înapoi la ce a meritat. Twist-ul este că toți cei care continuă să folosească numerar ajută la menținerea acestuia pentru toți ceilalți. Gratuit și fără reclame, disponibil pe Android și iPhone, cu o versiune beta și o demonstrație web disponibile acum.