Ugyanaz a térkép, három módon: SVG, Rust és Flutter

Az EVnSteven egy kényelmes helyre jutott. A platform stabil és nem igényel sok karbantartást, ami pontosan az volt a célunk, amikor elkezdtük: egy kis rendszer, ami csendben működik. Ez hagy egy kis teret a kísérletezésre, és időt adott az alapítóinknak, hogy néhány más projektbe is belekezdjenek, amelyeket a végén találsz meg.

Szóval futtattunk egy kísérletet. A kezdőlapunkon lévő térképet kétszer is újraépítettük: egyszer Rustban, WebAssembly-re fordítva, és egyszer Flutterben. Ez a cikk mindhárom megoldást egy oldalon mutatja be és hasonlítja össze őket.

1. Az eredeti: SVG, CSS és egy kis JavaScript

Egyszerűen fogalmazva: ez a térkép a kezdőlapunkon. Úgy van felépítve, ahogy egy weboldal többi része is: egy rajz, amely alakzatokból áll, amelyeket a böngésződ már tud megjeleníteni és animálni. Ez a három közül a legegyszerűbb, és ezt látja a legtöbb látogató.

Ez egyetlen SVG rajz. A böngésző a CSS-ből futtatja a legtöbb animációt, és egy kis script kezeli a többit.

Előnye, hogy nincs szükség build lépésre, így elég egy Hugo sablon. Vektoros, tehát bármilyen méretben éles marad. Mind a 44 pont elérhető billentyűzettel, mindegyikhez tartozik címke képernyőolvasók számára. És a néhány szava le van fordítva az összes nyelvünkre.

A hátránya a mérete az oldalon. A térkép jelölése körülbelül 107 KB (kb. 30 KB tömörítve), és futás közben kb. 670 elem és kb. 200 CSS animáció van benne. A logika tesztelése is nehéz: az időzítés a CSS kulcskockákban és egy scriptben él az oldalon, így az egyetlen teszt a szemrevételezés.

2. Rust és WebAssembly

Egyszerűen: A Rust egy programozási nyelv, amely gyorsságáról és arról ismert, hogy sok hibát észlel még azelőtt, hogy a program futna. Itt a térkép „agya” Rustban íródott, egy tömör formába csomagoltuk, amit a böngészők futtatni tudnak (ezt hívják WebAssembly-nek), és hagytuk, hogy maga fesse meg az egész térképet, mint egy festő, aki másodpercenként többször újrafesti ugyanazt a vásznat. Neked ugyanúgy néz ki.

Az egész térképet egyetlen vásznon rajzolja meg a Rust, amely WebAssembly-re lett fordítva. A Rust kód irányítja a térkép összes viselkedését, és minden képkockán újrarajzol mindent.

A rész, ami tetszett, hogy a logika tiszta Rust, semmi böngészőspecifikus nincs benne: a matematikai számítások arról, hogy mi hova kerül és mikor változik, valamint a parser, amely a földrajzi körvonalat olvassa be. 13 tesztje van, amelyek egy töredék másodperc alatt lefutnak, és ha a ciklus időzítése rossz, egy teszt elbukik, ahelyett, hogy valaki észrevenné, hogy furcsán néz ki. A körülbelül 1070 sor Rust kód mintegy harmada ez a tesztelt mag (a tesztekkel együtt); a többi a vászonra rajzol és kezeli az egéres eseményeket.

Az oldal végül nagyon könnyű lesz: egyetlen canvas elem. De a letöltés nagyobb. A lefordított modul körülbelül 254 KB (kb. 92 KB tömörítve), plusz körülbelül 28 KB JavaScript ragasztó, amit a build eszköz generál. És vannak költségek, amiket érzünk a fejlesztés során:

• Eszközkészlet. Az építéshez Rust, a WebAssembly célplatform és egy parancssori eszköz szükséges, amelynek verziója pontosan meg kell egyezzen a könyvtáréval. Az építő szkriptünk először lefuttatja a teszteket, és leáll, ha valamelyik megbukik.
• Nincs billentyűzet- vagy képernyőolvasó-hozzáférés az egyes városokhoz. A canvas egy kép. Az SVG verzió 44 fókuszálható pontja eltűnt.
• Csak angol nyelvű. A feliratok a programba vannak írva.
• Elmosódás. A lágy árnyék szélét egy canvas elmosódási szűrővel készítjük, amit nem minden böngésző támogat. Nem teszteltük a Safarit, ahol az él lehet, hogy kemény lesz.

3. Flutter

Egyszerűen: A Flutter egy Google által fejlesztett eszközkészlet, amely lehetővé teszi, hogy egyetlen kódbázisból telefonokon, számítógépeken és weben futó alkalmazásokat építsünk. Nem használja a weboldal saját építőelemeit. Mindent maga rajzol meg. Itt a térkép egy kis alkalmazás, amely ezen az oldalon belül jelenik meg, ugyanaz az eszközkészlet, amely a mi töltőszámítónkat is működteti.

A térképet egy egyedi festővel rajzolja meg, és itt egy keretben látható. A Flutter ugyanabból a kódból telefonos és asztali alkalmazásokat is képes építeni, ami a fő érve: egyszer írd meg a térképet, több helyen futtasd.

Ugyanaz az elv, mint a Rust map esetében, Dart nyelvre átültetve, 11 teszttel. Körülbelül 1 100 sor, tesztekkel együtt. A Flutter minden várost egy címkézett gombként ad át a képernyőolvasóknak, ami a canvas verzióból hiányzik (nem ellenőriztük, mennyire működik jól egy valódi képernyőolvasóval). Ez a legnagyobb letöltés is: az alkalmazás körülbelül 1,8 MB (kb. 535 KB tömörítve). A Flutter rajzoló motorja külön letöltés, de az oldal már megoszt egy példányt a számológéppel, így aki megnyitotta a számológépet, nem tölti le újra. A szöveg az oldal betűtípusában, a Merriweather-ben van beállítva, amit a böngésző futásidőben tölt le.

Amit találtunk

Még egy megjegyzés a sebességről. Ellenőrzésünk során az SVG térkép és a Rust térkép is a képernyő frissítési frekvenciáján futott (kb. 120 képkocka másodpercenként a teszt kijelzőn), így a képkockasebesség nem különböztette meg őket. A Flutter képkockasebességét nem mértük, és az akkumulátor- vagy CPU-használatot sem, így nem tudjuk megmondani, melyik könnyebb egy telefonon.

Olyan dolgok, amik megleptek minket

Néhány részlet könnyen elrontható. Az első klónjaink a kulcsot és az órákat a térkép rögzített részén rajzolták, így kicsi képernyőkön összezsugorodtak, és aprónak tűntek az eredeti mellett. Az eredeti a lap saját betűméret egységében (rem, amely a képernyő szélességével változik) méretezi őket. A klónok most ezt a méretet olvassák be a lapról. Az órák is különböznek: az eredeti mutatói 15 perces lépésekben mozognak, míg a Rust és Flutter verziók folyamatosan forognak.

Az időzónák nem voltak beépítve. Sem a WebAssembly-re fordított Rust, sem a Dart nem tartalmaz olyan időzóna-adatbázist, amely ismeri az “Asia/Dubai” időzónát. Mindkettő helyette a böngészőt kérdezi meg, annak beépített Intl szolgáltatásán keresztül, amely a nyári időszámítást is helyesen kezeli.

Mindhárom megosztja a bemeneteit. A Rust és Flutter térképek a városlistát és a földrajzi körvonalat arról az oldalról olvassák be, amelyen vannak, ugyanabból az adatból, amit az SVG térkép használ. Ha megváltoztatunk egy várost, mindhárom változik. Ez azt is jelenti, hogy a térképek csak olyan oldalon futtathatók, amely biztosítja ezeket az adatokat.

A Flutter web megjegyzi. A Flutter web saját gyorsítótárat telepít, így az újrafordítás után is a régi verziót láttuk, amíg ki nem töröltük azt.

Következtetésünk

Az SVG térkép marad a kezdőlapon. Egy ilyen méretű rajz esetén ez a legkönnyebb, hozzáférhető, le van fordítva, és nem igényel semmit a buildeléshez. A Rust az érdekesebb második helyezett: ha valaha is szükségünk lenne arra, hogy a térkép logikája bizonyíthatóan helyes legyen, vagy nehéz számításokat kell végezni a böngészőben, egy tesztelt Rust mag jó megoldás. A Flutter akkor értelmes, ha a térképnek valaha egy Flutter alkalmazáson belül kell élnie.

Egy kísérletnek nem kell megváltoztatnia a terméket ahhoz, hogy érdemes legyen futtatni. Végül tisztább képet kaptunk arról, hogy mennyibe kerül mindegyik megközelítés, egy tesztelt leírást arról, hogyan viselkedik a térkép, és egy oldalt, ahol mindhárom verziót megnézheted magad is.

Mit építenek még alapítóink

Egy stabil platform időt hagy más ötletekre is. Az EVnSteven mellett alapítóink ezeken dolgoznak:

Fuvarhívó szolgáltatás, hamarosan indul Kimem ↗ (opens in a new tab) Egy fuvarhívó szolgáltatás Bahir Dar, Etiópia számára, Mekonnen Alemu alapítótól. Az utasok az utazás lefoglalása előtt látják a viteldíj becslést, térképen követhetik a legközelebbi sofőr közeledését, és az út végén készpénzben fizetik a mérőórás díjat.

Non-profit, nyílt forráskódú StrayCats ↗ (opens in a new tab) David projektje, amely segít azoknak, akik utcai macskákról, kóbor macskákról vagy bármilyen macskáról gondoskodnak, még akkor is, ha az a macska véletlenül kutya. Még az ötlet szakaszában van, nincs még alkalmazás, és David örömmel fogadja ötleteidet és visszajelzéseidet. Saibo-nak ajánlva, 2010–2026.

Készpénz nyomon követése, ingyenes, hamarosan indul Effectivo ↗ (opens in a new tab) Tökéletlen könyvelés egy csavarral, azoknak, akik készpénzt használnak. Néhány koppintással rögzíthetsz egy vásárlást, megszámolhatod, mi van a pénztárcádban, és visszatekinthetsz, mi volt megéri. A csavar az, hogy mindenki, aki továbbra is készpénzt használ, segít megőrizni azt mindenki más számára is. Ingyenes és reklámmentes, Androidra és iPhone-ra érkezik, jelenleg béta és webes demó fut.