Ista mapa, na tri načina: SVG, Rust i Flutter

EVnSteven je dostigao udoban položaj. Platforma je stabilna i ne zahteva mnogo održavanja, što je upravo ono što smo želeli kada smo počeli: mali sistem koji tiho nastavlja da radi. To ostavlja malo prostora za eksperimentisanje, a našim osnivačima je ostavilo vremena da započnu nekoliko drugih projekata, koje ćete pronaći na kraju.

Dakle, sproveli smo eksperiment. Uzmemo mapu sa naše početne stranice i pregradili je dva puta: jednom u Rustu kompajliranom u WebAssembly, i jednom u Flutteru. Ovaj članak stavlja sva tri na jednu stranicu i upoređuje ih.

1. Original: SVG, CSS i malo JavaScript-a

Jednostavnim rečima: ovo je mapa na našoj početnoj stranici. Izgrađena je na isti način kao i ostatak web stranice: crtež napravljen od oblika koje vaš pregledač već zna kako da prikaže i animira. To je najjednostavnije od tri, i to je ono što većina posetilaca vidi.

To je jedan SVG crtež. Pregledač pokreće većinu animacija iz CSS-a, a mali skript se brine o ostatku.

U njegovu korist: nema koraka izgradnje, tako da je Hugo šablon sve što je potrebno. To je vektor, pa ostaje oštar u bilo kojoj veličini. Sva 44 tačke mogu se dohvatiti tastaturom, svaka sa oznakom za čitače ekrana. I njegove nekoliko reči su prevedene na sve naše jezike.

Cena je težina na stranici. Markup mape je oko 107 KB (oko 30 KB kompresovano), a kada se pokrene ima oko 670 elemenata i oko 200 CSS animacija. Logika je takođe teška za testiranje: tajming živi unutar CSS keyframes i skripta na stranici, tako da je jedini test da se to pogleda.

2. Rust i WebAssembly

Jednostavno rečeno: Rust je programski jezik poznat po tome što je brz i što hvata mnoge greške pre nego što program uopšte počne da radi. Ovde smo napisali “mozak” mape u Rustu, spakovali ga u kompaktnu formu koju pregledači mogu da pokrenu (zvanu WebAssembly), i dozvolili mu da sam nacrta celu mapu, kao slikar koji precrtava jedan platno mnogo puta u sekundi. Vama izgleda isto.

Cela mapa se crta na jednom platnu pomoću Rusta koji je kompajliran u WebAssembly. Rust kod upravlja celim ponašanjem mape i precrtava sve svaki frejm.

Ono što nam se svidelo je da je logika običan Rust bez ičega iz pregledača: matematika za to gde stvari idu i kada se menjaju, i parser koji čita obris kopna. Ima 13 testova koji se izvršavaju za delić sekunde, i ako je tajming ciklusa pogrešan, test ne uspeva umesto da neko primeti da izgleda čudno. Oko trećine od otprilike 1.070 linija Rusta je ta testirana jezgra (sa svojim testovima); ostatak crta na platnu i obrađuje događaje miša.

Stranica na kraju bude veoma lagana: jedan canvas element. Ali preuzimanje je veće. Kompajlirani modul je oko 254 KB (oko 92 KB kompresovano) plus oko 28 KB JavaScript lepka koji generiše alat za gradnju. I postoje troškovi koje osećamo dok radimo na tome:

• Alatni lanac. Za izgradnju je potreban Rust, WebAssembly cilj i komandni alat čija verzija mora tačno odgovarati verziji biblioteke. Naš skript za izgradnju prvo pokreće testove i zaustavlja se ako neki ne uspe.
• Nema pristupa tastaturi ili čitaču ekrana do pojedinačnih gradova. Canvas je slika. Verzija u SVG-u sa 44 fokusabilne tačke je nestala.
• Samo engleski. Oznake su napisane u programu.
• Zamućenje. Mekani ivica senke koristi canvas blur filter, koji ne podržavaju svi pregledači. Nismo testirali Safari, gde ivica može biti oštra.

3. Flutter

Jednostavno rečeno: Flutter je alatni paket od Google-a za pravljenje aplikacija koje rade na telefonima, računarima i webu iz jednog skupa koda. Ne koristi sopstvene gradivne blokove web stranice. Sve crta sam. Ovde je mapa mala aplikacija prikazana unutar ove stranice, isti alatni paket koji pokreće naš kalkulator za punjenje.

Mapu crta prilagođeni slikar, i prikazana je ovde u okviru. Flutter takođe može praviti aplikacije za telefon i desktop iz istog koda, što je njegov glavni argument: napišite mapu jednom, pokrenite je na više mesta.

To je ista logika kao Rust mapa, prenesena u Dart, sa 11 testova. Oko 1.100 linija uključujući testove. Flutter predaje svaki grad čitačima ekrana kao označeno dugme, što verzija sa canvas-om nema (nismo proveravali koliko dobro radi sa pravim čitačem ekrana). Takođe je i najveći za preuzimanje: aplikacija je oko 1,8 MB (oko 535 KB kompresovano). Flutter-ov crtački motor je dodatno preuzimanje, ali sajt već deli jednu kopiju sa kalkulatorom, tako da posetilac koji je otvorio kalkulator ne preuzima ga ponovo. Tekst je postavljen u font sajta, Merriweather, koji pregledač preuzima u toku izvršavanja.

Šta smo otkrili

Još jedna napomena o brzini. U našoj proveri, SVG mapa i Rust mapa su obe radile na frekvenciji osvežavanja ekrana (oko 120 frejmova u sekundi na test ekranu), tako da frejmrejt nije pravio razliku između njih. Nismo merili frejmrejt Flutter-a, niti smo merili potrošnju baterije ili CPU-a, tako da ne možemo reći koja je lakša za telefon.

Stvari koje su nas iznenadile

Neki detalji su laki za pogrešno shvatanje. Naši prvi klonovi su crtali ključ i satove na fiksnom delu mape, pa su se smanjivali na malim ekranima i izgledali su sićušno u poređenju sa originalom. Original ih veličina u sopstvenoj jedinici fonta stranice (rem, koja se menja sa širinom ekrana). Klonovi sada čitaju tu veličinu sa stranice. Satovi se takođe razlikuju: kazaljke originala se pomeraju u koracima od 15 minuta, dok se u Rust i Flutter verzijama okreću kontinuirano.

Vremenske zone nisu ugrađene. Ni Rust kompajliran u WebAssembly, ni Dart nemaju bazu podataka vremenskih zona koja zna za “Asia/Dubai”. Obe verzije se umesto toga oslanjaju na pregledač, preko njegovog ugrađenog Intl servisa, koji takođe ispravno obrađuje letnje računanje vremena.

Sva tri dele svoje ulaze. Rust i Flutter mape čitaju listu gradova i obris kopna sa stranice na kojoj se nalaze, iste podatke koje koristi SVG mapa. Promenite grad, i sva tri se menjaju. To takođe znači da mape mogu da rade samo na stranici koja im ih obezbeđuje.

Flutter web pamti. Flutter web instalira svoj sopstveni keš, pa smo nakon ponovnog izgradnje i dalje videli staru verziju dok ga nismo očistili.

Naš zaključak

SVG mapa ostaje na početnoj stranici. Za crtež ove veličine ona je najlakša, pristupačna je, prevedena je i ne zahteva ništa za izgradnju. Rust je zanimljiviji drugoplasirani: ako ikada budemo morali da logika mape bude dokazivo tačna, ili ako treba da se obavi teška računarska obrada u pregledaču, testirano Rust jezgro je dobar način da se to uradi. Flutter ima smisla ako mapa ikada treba da živi unutar Flutter aplikacije.

Eksperiment ne mora da menja proizvod da bi bio vredan izvođenja. Završili smo sa jasnijom slikom koliko svaki pristup košta, testiranim opisom kako se mapa ponaša i stranicom na kojoj možete videti sva tri za sebe.

Šta naši osnivači sledeće prave

Stabilna platforma ostavlja vreme za druge ideje. Pored EVnSteven, naši osnivači rade na ovome:

Ride-hailing, uskoro lansiranje Kimem ↗ (opens in a new tab) Servis za pozivanje vožnje u Bahir Daru, Etiopija, od osnivača Mekonnen Alemua. Putnici vide procenu cene pre nego što rezervišu, prate najbližeg vozača na mapi i plaćaju taksimetar u kešu na kraju vožnje.

Neprofitno, otvoreni kod StrayCats ↗ (opens in a new tab) Projekat Davida za pomoć ljudima koji brinu o uličnim mačkama, lutalicama ili bilo kojoj mački, čak i ako ta mačka slučajno jeste pas. Još je u fazi ideje, bez aplikacije, i David bi voleo vaše ideje i povratne informacije. Posvećeno Saibu, 2010–2026.

Praćenje keša, besplatno, uskoro lansiranje Effectivo ↗ (opens in a new tab) Nedovoljno savršeno knjigovodstvo sa dodatkom, za one koji koriste keš. Zabeležite kupovinu u nekoliko dodira, prebrojite šta imate u novčaniku i pogledajte šta je vredelo. Dodatak je da svako ko nastavi da koristi keš pomaže da keš ostane dostupan za sve ostale. Besplatno i bez reklama, dolazi na Android i iPhone, sa beta verzijom i web demonstracijom koja je već dostupna.