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

EVnSteven je dosegao ugodno stanje. Platforma je stabilna i ne zahtijeva mnogo održavanja, što je upravo ono što smo željeli kad smo počeli: mali sustav koji tiho nastavlja raditi. To ostavlja malo prostora za eksperimentiranje, a našim osnivačima je ostavilo vremena da započnu nekoliko drugih projekata, koje ćete pronaći na kraju.

Pa smo proveli eksperiment. Uzeli smo kartu s naše početne stranice i izgradili je dvaput: jednom u Rustu prevedenom u WebAssembly, i jednom u Flutteru. Ovaj članak stavlja sve tri na jednu stranicu i uspoređuje ih.

1. Izvorno: SVG, CSS i malo JavaScripta

Jednostavnim riječima: ovo je karta na našoj početnoj stranici. Izgrađena je na način na koji se gradi ostatak web stranice: crtež sastavljen od oblika koje vaš preglednik već zna prikazati i animirati. To je najjednostavnije od tri, i to je ono što većina posjetitelja vidi.

To je jedan SVG crtež. Preglednik pokreće većinu animacija iz CSS-a, a mali skript upravlja ostatkom.

U njegovu korist: nema koraka izgradnje, pa je Hugo predložak sve što treba. To je vektor, pa ostaje oštar u bilo kojoj veličini. Sva 44 točke mogu se dohvatiti tipkovnicom, svaka s oznakom za čitače ekrana. I njegove su rijetke riječi prevedene na sve naše jezike.

Cijena je težina na stranici. Oznaka karte je oko 107 KB (oko 30 KB komprimirano), a kad radi ima oko 670 elemenata i oko 200 CSS animacija. Logika je također teška za testiranje: tajming živi unutar CSS keyframeova i skripte na stranici, pa je jedini test gledati je.

2. Rust i WebAssembly

Jednostavnim riječima: Rust je programski jezik poznat po tome što je brz i što hvata mnoge greške prije nego što program uopće počne raditi. Ovdje smo napisali “mozak” karte u Rustu, zapakirali ga u kompaktni oblik koji preglednici mogu pokrenuti (zvan WebAssembly), i dopustili mu da sam nacrta cijelu kartu, poput slikara koji precrtava jedan platno mnogo puta u sekundi. Vama izgleda isto.

Cijela karta se crta na jednom platnu pomoću Rusta koji je preveden u WebAssembly. Rust kod upravlja svim ponašanjem karte i ponovno crta sve svaki frame.

Dio koji nam se svidio jest da je logika običan Rust bez ikakvih elemenata preglednika: matematika za pozicioniranje stvari i za to kada se mijenjaju, te parser koji čita obrise zemlje. Ima 13 testova koji se izvršavaju u djeliću sekunde, i ako je vremenski ciklus pogrešan, test ne uspijeva umjesto da netko primijeti da izgleda čudno. Otprilike trećina od oko 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 vrlo lagana: jedan canvas element. Ali preuzimanje je veće. Prevedeni modul je oko 254 KB (oko 92 KB komprimirano) plus oko 28 KB JavaScript ljepila koje generira alat za izgradnju. I postoje troškovi koje osjećamo dok radimo na tome:

• Alatni lanac. Za izgradnju je potreban Rust, WebAssembly cilj i alat za naredbenu liniju čija verzija mora točno odgovarati verziji knjižnice. Naš skript za izgradnju prvo pokreće testove i zaustavlja se ako jedan ne uspije.
• Nema pristupa pojedinačnim gradovima putem tipkovnice ili čitača zaslona. Canvas je slika. Verzija u SVG-u s 44 fokusabilne točke je nestala.
• Samo na engleskom. Oznake su napisane u programu.
• Zamagljenje. Mekani rub sjene koristi canvas blur filter, koji ne podržavaju svi preglednici. Nismo testirali Safari, gdje rub može biti oštar.

3. Flutter

Jednostavno rečeno: Flutter je alatni paket iz Googlea za izradu aplikacija koje rade na telefonima, računalima i webu iz jednog skupa koda. Ne koristi vlastite građevne blokove web stranice. Sve crta sam. Ovdje je karta mala aplikacija prikazana unutar ove stranice, isti alatni paket koji pokreće naš kalkulator punjenja.

Karta se crta prilagođenim crtačem i ovdje je prikazana u okviru. Flutter također može izraditi aplikacije za telefone i računala iz istog koda, što je njegov glavni argument: napišite kartu jednom, pokrenite je na više mjesta.

To je ista logika kao Rust mapa, prenesena u Dart, s 11 testova. Otprilike 1.100 linija uključujući testove. Flutter predaje svaki grad čitačima zaslona kao označeni gumb, što verzija s canvasom nema (nismo provjeravali koliko dobro radi s pravim čitačem zaslona). Također je najveći download: aplikacija je oko 1,8 MB (oko 535 KB komprimirano). Flutterov crtački motor je dodatni download, ali stranica već dijeli jednu kopiju s kalkulatorom, pa posjetitelj koji je otvorio kalkulator ne preuzima ga ponovno. Tekst je postavljen u font stranice, Merriweather, koji preglednik dohvaća u vrijeme izvođenja.

Što smo pronašli

Još jedna napomena o brzini. U našoj provjeri, SVG karta i Rust karta su se obje vrtjele brzinom osvježavanja zaslona (oko 120 sličica u sekundi na testnom zaslonu), tako da brzina sličica nije razlikovala njih. Nismo mjerili brzinu sličica Fluttera, niti smo mjerili potrošnju baterije ili CPU-a, pa ne možemo reći koja je lakša za telefon.

Stvari koje su nas iznenadile

Neke detalje je lako pogrešno shvatiti. Naši prvi klonovi crtali su ključ i satove na fiksnom dijelu karte, pa su se smanjivali na malim ekranima i izgledali su sićušno u usporedbi s originalom. Original ih veliča u vlastitoj jedinici fonta stranice (rem, koja se mijenja s širinom ekrana). Klonovi sada čitaju tu veličinu sa stranice. Satovi se također razlikuju: kazaljke originala pomiču se 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”. Oba se umjesto toga oslanjaju na preglednik, preko njegove ugrađene Intl usluge, koja također ispravno obrađuje ljetno računanje vremena.

Sva tri dijele svoje ulaze. Rust i Flutter karte čitaju popis gradova i obris kopna sa stranice na kojoj se nalaze, iste podatke koje koristi SVG karta. Promijenite grad i sva tri se mijenjaju. To također znači da karte mogu raditi samo na stranici koja ih pruža.

Flutter web pamti. Flutter web instalira vlastiti cache, pa smo nakon ponovne izgradnje i dalje vidjeli staru verziju dok ga nismo očistili.

Naš zaključak

SVG karta ostaje na početnoj stranici. Za crtež ove veličine ona je najlakša, pristupačna je, prevedena je i ne treba ništa za izgradnju. Rust je zanimljiviji drugi izbor: ako ikada budemo trebali da logika karte bude dokazivo ispravna ili da se u pregledniku obave teška računanja, testirano Rust jezgro je dobar način za to. Flutter ima smisla ako karta ikada treba živjeti unutar Flutter aplikacije.

Eksperiment ne mora mijenjati proizvod da bi vrijedio. Završili smo s jasnijom slikom koliko svaki pristup košta, testiranim opisom kako se karta ponaša i stranicom na kojoj možete sami vidjeti sva tri.

Što naši osnivači rade sljedeće

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

Usluga prijevoza, uskoro lansiranje Kimem ↗ (opens in a new tab) Usluga prijevoza za Bahir Dar, Etiopija, od osnivača Mekonnen Alemua. Putnici vide procjenu cijene prije nego što rezerviraju, prate najbližeg vozača na karti i plaćaju taksimetar u gotovini na kraju vožnje.

Neprofitno, otvoreni izvor StrayCats ↗ (opens in a new tab) Projekt 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 jest pas. Još je u fazi ideje, bez aplikacije, i David bi volio vaše ideje i povratne informacije. Posvećeno Saibu, 2010.–2026.

Praćenje gotovine, besplatno, uskoro lansiranje Effectivo ↗ (opens in a new tab) Nedovoljno savršeno računovodstvo s dodatkom, za one koji koriste gotovinu. Zabilježite kupnju u nekoliko dodira, prebrojite što imate u novčaniku i pogledajte što je bilo vrijedno. Dodatak je da svatko tko nastavi koristiti gotovinu pomaže da ona ostane dostupna svima drugima. Besplatno i bez oglasa, dolazi na Android i iPhone, s beta verzijom i web demo verzijom koja je već dostupna.