Tá istá mapa tromi spôsobmi: SVG, Rust a Flutter

EVnSteven dosiahol pohodlné miesto. Platforma je stabilná a nevyžaduje veľa údržby, čo je presne to, čo sme chceli na začiatku: malý systém, ktorý ticho funguje. To necháva trochu priestoru na experimentovanie a zároveň to našim zakladateľom umožnilo začať niekoľko ďalších projektov, ktoré nájdete na konci.

Tak sme uskutočnili experiment. Zobrali sme mapu na našej domovskej stránke a prerobili ju dvakrát: raz v Rust kompilovanom do WebAssembly a raz vo Flutteri. Tento článok zobrazuje všetky tri na jednej stránke a porovnáva ich.

1. Pôvodné: SVG, CSS a trochu JavaScriptu

Jednoducho povedané: toto je mapa na našej domovskej stránke. Je postavená spôsobom, akým sa buduje zvyšok webovej stránky: kresba z tvarov, ktoré váš prehliadač už vie zobraziť a animovať. Je to najjednoduchšie z troch a je to tá, ktorú vidí väčšina návštevníkov.

Je to jedno SVG kreslenie. Prehliadač spúšťa väčšinu animácií cez CSS a malý skript sa stará o zvyšok.

V jeho prospech: nevyžaduje žiadny build krok, takže stačí Hugo šablóna. Je to vektorové, takže zostáva ostré pri akejkoľvek veľkosti. Všetkých 44 bodov je dostupných cez klávesnicu, každý s popisom pre čítačky obrazovky. A jeho pár slov je preložených do všetkých našich jazykov.

Cena je v hmotnosti na stránke. Značenie mapy má približne 107 KB (asi 30 KB komprimované) a po spustení obsahuje približne 670 prvkov a asi 200 CSS animácií. Logika je tiež ťažko testovateľná: časovanie je uložené v CSS kľúčových snímkach a skripte na stránke, takže jediný test je na pohľad.

2. Rust a WebAssembly

Jednoducho povedané: Rust je programovací jazyk známy svojou rýchlosťou a schopnosťou zachytiť mnoho chýb ešte predtým, než sa program spustí. Tu sme napísali „mozog“ mapy v Rust-e, zabalený do kompaktnej formy, ktorú dokážu prehliadače spustiť (nazýva sa WebAssembly), a nechali sme ho namaľovať celú mapu sám, ako maliara, ktorý prekresľuje jedno plátno mnoho krát za sekundu. Pre vás to vyzerá rovnako.

Celá mapa je nakreslená na jednom plátne Rust-om, ktorý bol skompilovaný do WebAssembly. Rust kód vlastní celé správanie mapy a prekresľuje všetko každý snímok.

Časť, ktorá sa nám páčila, je, že logika je čistý Rust bez ničoho z prehliadača: matematika pre to, kde sa veci nachádzajú a kedy sa menia, a parser, ktorý číta obrys krajiny. Má 13 testov, ktoré bežia za zlomok sekundy, a ak je časovanie cyklu nesprávne, test zlyhá namiesto toho, aby si niekto všimol, že to vyzerá divne. Asi tretina z približne 1 070 riadkov Rust-u je toto testované jadro (s jeho testami); zvyšok kreslí na plátno a spracováva udalosti myši.

Stránka nakoniec zostáva veľmi ľahká: jeden element canvas. Ale sťahovanie je väčšie. Skompilovaný modul má približne 254 KB (približne 92 KB komprimovaný) plus asi 28 KB JavaScriptového lepidla, ktoré generuje nástroj na zostavenie. A sú tu náklady, ktoré cítime pri práci na tom:

• Nástrojový reťazec. Na zostavenie je potrebný Rust, cieľ WebAssembly a príkazový nástroj, ktorého verzia sa musí presne zhodovať s verziou knižnice. Náš skript zostavenia najprv spustí testy a zastaví sa, ak niektorý zlyhá.
• Žiadny prístup cez klávesnicu alebo čítačku obrazovky k jednotlivým mestám. Canvas je obrázok. Verzia SVG so 44 zaostriteľnými bodmi zmizla.
• Len angličtina. Popisky sú napísané priamo v programe.
• Rozmazanie. Mäkký tieň okraja používa filter rozmazania canvasu, ktorý nepodporuje každý prehliadač. Safari sme netestovali, kde môže byť okraj tvrdý.

3. Flutter

Jednoducho povedané: Flutter je nástroj od Google na tvorbu aplikácií, ktoré bežia na telefónoch, počítačoch a webe z jedného zdrojového kódu. Nepoužíva vlastné stavebné bloky webovej stránky. Všetko kreslí sám. Tu je mapa malá aplikácia zobrazená v rámci tejto stránky, rovnaký nástroj, ktorý poháňa náš kalkulátor nabíjania.

Mapu maľuje vlastným kresličom a je tu zobrazená v ráme. Flutter dokáže tiež zostaviť aplikácie pre telefóny a počítače z toho istého kódu, čo je jeho hlavný argument: napísať mapu raz, spustiť ju na viacerých miestach.

Je to rovnaká logika ako Rust mapy, prenesená do Dart, s 11 testami. Asi 1 100 riadkov vrátane testov. Flutter odovzdáva každé mesto čítačkám obrazovky ako označené tlačidlo, čo verzia s canvasom nemá (neskúmali sme, ako dobre to funguje s reálnou čítačkou obrazovky). Je to tiež najväčšie stiahnutie: aplikácia má asi 1,8 MB (asi 535 KB skomprimované). Flutterov kresliaci engine je ďalšie stiahnutie, ale stránka už zdieľa jednu kópiu s kalkulačkou, takže návštevník, ktorý otvoril kalkulačku, si ho nestiahne znova. Jeho text je nastavený vo fontu stránky Merriweather, ktorý prehliadač načítava počas behu.

Čo sme zistili

Ešte jedna poznámka k rýchlosti. Pri našej kontrole SVG mapa aj Rust mapa bežali na obnovovacej frekvencii obrazovky (asi 120 snímok za sekundu na testovacom displeji), takže snímková frekvencia ich nerozlišovala. Flutterovu snímkovú frekvenciu sme nemerali, ani spotrebu batérie alebo CPU, takže nemôžeme povedať, ktorá je na telefóne ľahšia.

Veci, ktoré nás prekvapili

Niektoré detaily sa ľahko môžu pokaziť. Naše prvé klony kreslili kľúč a hodiny na pevnom podiele mapy, takže na malých obrazovkách sa zmenšovali a vyzerali maličko vedľa originálu. Originál ich veľkosť určuje v jednotke písma stránky (rem, ktorá sa mení so šírkou obrazovky). Klony teraz túto veľkosť čítajú zo stránky. Hodiny sa tiež líšia: ručičky originálu sa pohybujú po 15-minútových krokoch, zatiaľ čo v Rust a Flutter verziách sa otáčajú plynulo.

Časové pásma nie sú zabudované. Ani Rust skompilovaný do WebAssembly, ani Dart neobsahujú databázu časových pásiem, ktorá pozná “Asia/Dubai”. Oba namiesto toho pýtajú prehliadač cez jeho vstavanú službu Intl, ktorá tiež správne rieši letný čas.

Všetky tri zdieľajú svoje vstupy. Rust a Flutter mapy čítajú zoznam miest a obrys krajiny zo stránky, na ktorej sú, rovnaké údaje, aké používa SVG mapa. Zmeníte mesto a všetky tri sa zmenia. To tiež znamená, že mapy môžu bežať iba na stránke, ktorá im tieto údaje poskytuje.

Flutter web si pamätá. Flutter web inštaluje vlastnú cache, takže po prerobení sme stále videli starú verziu, kým sme ju nevymazali.

Naše závery

SVG mapa zostáva na domovskej stránke. Pre kresbu tejto veľkosti je najľahšia, je prístupná, preložená a nepotrebuje nič stavať. Rust je zaujímavejší druhý v poradí: ak niekedy budeme potrebovať, aby logika mapy bola dokázateľne správna, alebo potrebujeme robiť náročné výpočty v prehliadači, otestované Rust jadro je dobrý spôsob, ako to urobiť. Flutter má zmysel, ak mapa niekedy potrebuje žiť vo vnútri Flutter aplikácie.

Experiment nemusí meniť produkt, aby stál za to ho robiť. Nakoniec sme získali jasnejší obraz o tom, čo každý prístup stojí, otestovaný popis správania mapy a stránku, kde si môžete všetky tri sami pozrieť.

Čo naši zakladatelia budujú ďalej

Stabilná platforma necháva čas na ďalšie nápady. Okrem EVnSteven naši zakladatelia pracujú na týchto projektoch:

Služba zdieľanej dopravy, čoskoro spúšťame Kimem ↗ (opens in a new tab) Služba zdieľanej dopravy pre Bahir Dar v Etiópii, od zakladateľa Mekonnena Alemu. Cestujúci vidia odhad ceny pred rezerváciou, sledujú najbližšieho vodiča na mape a na konci jazdy platia meranú cenu v hotovosti.

Neziskový, open source StrayCats ↗ (opens in a new tab) Projekt od Davida na pomoc ľuďom, ktorí sa starajú o pouličné mačky, túlavé mačky alebo akúkoľvek mačku, aj keď tá mačka je náhodou pes. Projekt je stále v štádiu nápadu, aplikácia ešte nie je hotová, a David by ocenil vaše nápady a spätnú väzbu. Venované Saibovi, 2010–2026.

Sledovanie hotovosti, zadarmo, čoskoro spúšťame Effectivo ↗ (opens in a new tab) Nedokonalé účtovníctvo s pridaným zvratom, pre tých, ktorí používajú hotovosť. Zaznamenajte nákup niekoľkými ťuknutiami, spočítajte, čo máte v peňaženke, a pozrite sa späť, čo stálo za to. Zvrat je v tom, že každý, kto naďalej používa hotovosť, pomáha udržať ju pre všetkých ostatných. Zadarmo a bez reklám, prichádza na Android a iPhone, s betou a webovou ukážkou už teraz.