Stejná mapa, třemi způsoby: SVG, Rust a Flutter

EVnSteven dosáhl pohodlného stavu. Platforma je stabilní a nevyžaduje mnoho údržby, což je přesně to, co jsme chtěli, když jsme začínali: malý systém, který tiše funguje. To nechává trochu prostoru pro experimentování a zároveň to našim zakladatelům umožnilo začít několik dalších projektů, které najdete na konci.

Tak jsme provedli experiment. Vzali jsme mapu na naší domovské stránce a přestavěli ji dvakrát: jednou v Rustu přeloženém do WebAssembly a jednou ve Flutteru. Tento článek všechny tři verze umisťuje na jednu stránku a porovnává je.

1. Originál: SVG, CSS a trochu JavaScriptu

Jednoduše řečeno: toto je mapa na naší domovské stránce. Je postavena stejným způsobem jako zbytek webové stránky: kresba složená z tvarů, které váš prohlížeč již umí zobrazit a animovat. Je to nejjednodušší ze tří a je to ta, kterou vidí většina návštěvníků.

Je to jeden SVG obrázek. Prohlížeč spouští většinu animací pomocí CSS a malý skript se stará o zbytek.

Ve svůj prospěch: není potřeba žádný build krok, takže stačí Hugo šablona. Je to vektorové, takže zůstává ostré v jakékoli velikosti. Všechny 44 bodů lze dosáhnout pomocí klávesnice, každý má popisek pro čtečky obrazovky. A jeho pár slov je přeloženo do všech našich jazyků.

Cena je v velikosti stránky. Značení mapy má asi 107 KB (asi 30 KB po kompresi) a při běhu obsahuje asi 670 prvků a asi 200 CSS animací. Logika je také těžko testovatelná: načasování je uvnitř CSS klíčových snímků a skriptu na stránce, takže jediný test je se na to podívat.

2. Rust a WebAssembly

Jednoduše řečeno: Rust je programovací jazyk známý tím, že je rychlý a dokáže zachytit mnoho chyb ještě před tím, než program vůbec běží. Zde jsme napsali „mozek“ mapy v Rustu, zabalili ho do kompaktní podoby, kterou mohou prohlížeče spustit (nazývané WebAssembly), a nechali ho, aby celou mapu sám vykreslil, jako malíř, který přemalovává jedno plátno mnohokrát za sekundu. Pro vás to vypadá stejně.

Celá mapa je vykreslena na jednom plátně pomocí Rustu, který byl přeložen do WebAssembly. Rustový kód ovládá veškeré chování mapy a přemalovává vše každý snímek.

Část, která se nám líbila, je ta, že logika je čistý Rust bez jakýchkoli prvků z prohlížeče: matematika určující, kam co patří a kdy se mění, a parser, který čte obrys krajiny. Má 13 testů, které běží během zlomku sekundy, a pokud je načasování cyklu špatné, test selže místo toho, aby si někdo všiml, že to vypadá divně. Asi třetina z přibližně 1 070 řádků Rustu tvoří toto testované jádro (včetně testů); zbytek vykresluje na plátno a zpracovává události myši.

Stránka tak nakonec zůstává velmi lehká: jeden prvek canvas. Ale stažení je větší. Přeložený modul má asi 254 KB (asi 92 KB komprimovaný) plus asi 28 KB JavaScriptového lepidla, které generuje nástroj pro sestavení. A při práci na tom cítíme i další náklady:

• Sada nástrojů. Pro sestavení je potřeba Rust, cíl WebAssembly a příkazový nástroj, jehož verze musí přesně odpovídat verzi knihovny. Náš skript pro sestavení nejprve spustí testy a zastaví se, pokud některý selže.
• Žádný přístup z klávesnice nebo čtečky obrazovky k jednotlivým městům. Canvas je obrázek. Verze SVG se 44 zaostřitelnými body zmizela.
• Pouze angličtina. Popisky jsou napsány přímo do programu.
• Rozmazání. Měkký okraj stínu používá rozmazávací filtr canvasu, který nepodporuje každý prohlížeč. Safari jsme netestovali, kde může být okraj tvrdý.

3. Flutter

Jednoduše řečeno: Flutter je nástroj od Googlu pro vytváření aplikací, které běží na telefonech, počítačích a na webu z jednoho zdrojového kódu. Nepoužívá vlastní stavební bloky webové stránky. Vše kreslí sám. Zde je mapa malá aplikace zobrazená uvnitř této stránky, stejný nástroj, který pohání náš kalkulátor nabíjení.

Mapu kreslí pomocí vlastního kreslíře a je zde zobrazena v rámečku. Flutter také dokáže vytvořit aplikace pro telefony a počítače ze stejného kódu, což je jeho hlavní argument: napsat mapu jednou, spustit ji na více místech.

Je to stejná logika jako Rust mapy, převedená do Dart, s 11 testy. Přibližně 1 100 řádků včetně testů. Flutter předává každé město čtečkám obrazovky jako označené tlačítko, což verze s canvasem postrádá (neověřovali jsme, jak dobře to funguje s reálnou čtečkou obrazovky). Je to také největší stažení: aplikace má asi 1,8 MB (asi 535 KB komprimovaná). Flutterův kreslící engine je další stažení, ale stránka již sdílí jednu kopii s kalkulačkou, takže návštěvník, který otevřel kalkulačku, si ji nestahuje znovu. Její text je nastaven ve fontu stránky Merriweather, který si prohlížeč načítá za běhu.

Co jsme zjistili

Ještě jedna poznámka k rychlosti. Při našem testu běžely SVG mapa i Rust mapa na obnovovací frekvenci obrazovky (asi 120 snímků za sekundu na testovacím displeji), takže snímková frekvence je nerozlišovala. Rychlost snímků Flutteru jsme neměřili, stejně tak jsme neměřili spotřebu baterie nebo CPU, takže nemůžeme říct, která je na telefonu lehčí.

Věci, které nás překvapily

Některé detaily je snadné pokazit. Naše první klony kreslily klíč a hodiny na pevně daném podílu mapy, takže se na malých obrazovkách zmenšovaly a vedle originálu vypadaly maličké. Originál je velikostně nastavuje v jednotce písma stránky (rem, která se mění s šířkou obrazovky). Klony nyní tuto velikost čtou ze stránky. Hodiny se také liší: ručičky originálu se pohybují po 15minutových krocích, zatímco v Rust a Flutter verzích se otáčejí plynule.

Časová pásma nebyla zabudována. Ani Rust přeložený do WebAssembly, ani Dart nemají databázi časových pásem, která by znala „Asia/Dubai“. Oba místo toho dotazují prohlížeč přes jeho vestavěnou službu Intl, která také správně zohledňuje letní čas.

Všechny tři sdílejí svá vstupní data. Rust a Flutter mapy čtou seznam měst a obrys země z té stránky, na které jsou, ze stejných dat, která používá SVG mapa. Změníte-li město, změní se všechny tři. To také znamená, že mapy mohou běžet pouze na stránce, která jim tato data poskytuje.

Flutter web si pamatuje. Flutter web instaluje vlastní cache, takže po přestavbě jsme stále viděli starou verzi, dokud jsme ji nevymazali.

Naše závěry

SVG mapa zůstává na úvodní stránce. Pro kresbu této velikosti je nejlehčí, je přístupná, přeložená a nepotřebuje nic sestavovat. Rust je zajímavější druhý kandidát: pokud někdy budeme potřebovat, aby logika mapy byla prokazatelně správná, nebo budeme potřebovat těžké výpočty v prohlížeči, otestované Rust jádro je dobrá cesta. Flutter dává smysl, pokud mapa někdy bude muset žít uvnitř Flutter aplikace.

Experiment nemusí měnit produkt, aby stál za to ho provést. Nakonec jsme získali jasnější představu o nákladech každého přístupu, otestovaný popis chování mapy a stránku, kde si můžete všechny tři sami prohlédnout.

Co naši zakladatelé budují dál

Stabilní platforma nechává čas na další nápady. Kromě EVnSteven naši zakladatelé pracují na těchto projektech:

Služba sdílení jízd, brzy spuštěno Kimem ↗ (opens in a new tab) Služba sdílení jízd pro Bahir Dar v Etiopii od zakladatele Mekonnena Alemu. Cestující vidí odhad ceny před objednáním, sledují nejbližšího řidiče na mapě a na konci jízdy platí měřenou cenu v hotovosti.

Neziskový, open source StrayCats ↗ (opens in a new tab) Projekt od Davida na pomoc lidem, kteří se starají o pouliční kočky, toulavé kočky nebo jakoukoli kočku, i když ta kočka je náhodou pes. Je to stále ve fázi nápadu, aplikace zatím není, a David by ocenil vaše nápady a zpětnou vazbu. Věnováno Saibovi, 2010–2026.

Sledování hotovosti, zdarma, brzy spuštěno Effectivo ↗ (opens in a new tab) Nedokonalé účetnictví s přidaným prvkem, pro ty, kteří používají hotovost. Zaznamenejte nákup několika klepnutími, spočítejte, co máte v peněžence, a podívejte se zpět, co stálo za to. Přidaný prvek je, že každý, kdo pokračuje v používání hotovosti, pomáhá udržet hotovost i pro ostatní. Zdarma a bez reklam, přichází na Android a iPhone, s beta verzí a webovou ukázkou již nyní.