Ang Parehong Mapa, Tatlong Paraan: SVG, Rust at Flutter

Naabot na ng EVnSteven ang isang komportableng kalagayan. Matatag ang plataporma at hindi nangangailangan ng madalas na pagpapanatili, na eksaktong gusto namin noong nagsimula kami: isang maliit na sistema na tahimik na patuloy na gumagana. Nagbibigay ito ng kaunting puwang para sa eksperimento, at nagbigay ito ng oras sa aming mga tagapagtatag upang simulan ang ilang iba pang mga proyekto, na makikita mo sa dulo.

Kaya nagsagawa kami ng isang eksperimento. Kinuha namin ang mapa sa aming home page at muling binuo ito ng dalawang beses: isang beses sa Rust na naka-compile sa WebAssembly, at isang beses sa Flutter. Itong artikulo ay inilalagay ang tatlo sa isang pahina at inihahambing ang mga ito.

1. Ang orihinal: SVG, CSS at kaunting JavaScript

Sa simpleng salita: ito ang mapa sa aming home page. Ito ay ginawa sa paraan kung paano ginagawa ang iba pang bahagi ng isang web page: isang guhit na binubuo ng mga hugis na alam na ng iyong browser kung paano ipakita at i-animate. Ito ang pinakasimple sa tatlo, at ito ang nakikita ng karamihan ng mga bisita.

Isa itong SVG na guhit. Pinapatakbo ng browser ang karamihan ng mga animasyon mula sa CSS, at isang maliit na script ang humahawak sa iba pa.

Pabor dito: walang build step, kaya isang Hugo template lang ang kailangan nito. Ito ay vector, kaya nananatiling malinaw sa anumang sukat. Lahat ng 44 na tuldok ay maaaring maabot gamit ang keyboard, bawat isa ay may label para sa mga screen reader. At ang ilang mga salita nito ay isinalin sa lahat ng aming mga wika.

Ang kapalit nito ay ang bigat sa pahina. Ang markup ng mapa ay mga 107 KB (mga 30 KB kapag compressed), at kapag tumatakbo ay may mga 670 elemento at mga 200 CSS na animasyon. Mahirap din subukan ang lohika: ang timing ay nasa loob ng CSS keyframes at isang script sa pahina, kaya ang tanging pagsusuri ay ang pagtingin dito.

2. Rust at WebAssembly

Sa simpleng salita: Ang Rust ay isang programming language na kilala sa pagiging mabilis at sa pagkuha ng maraming pagkakamali bago pa man tumakbo ang isang programa. Dito isinulat namin ang “utak” ng mapa sa Rust, inilagay ito sa isang compact na anyo na kayang patakbuhin ng mga browser (tinatawag na WebAssembly), at pinayagan itong ipinta ang buong mapa nang mag-isa, tulad ng isang pintor na muling nagpipinta ng isang canvas nang maraming beses sa isang segundo. Sa iyo, pareho lang ang itsura.

Ang buong mapa ay iginuguhit sa isang canvas lamang ng Rust na na-compile sa WebAssembly. Ang Rust code ang may-ari ng lahat ng kilos ng mapa at muling iginuguhit ang lahat sa bawat frame.

Ang bahagi na nagustuhan namin ay ang lohika ay purong Rust lang na walang halong mula sa browser: ang matematika kung saan pupunta ang mga bagay at kung kailan sila magbabago, at ang parser na nagbabasa ng hugis ng lupa. Mayroon itong 13 na tests na tumatakbo sa loob ng isang bahagi ng segundo, at kung mali ang timing ng cycle, pumapalya ang test sa halip na mapansin ng isang tao na mukhang kakaiba ito. Mga isang katlo ng humigit-kumulang 1,070 linya ng Rust ay ang tested core na iyon (kasama ang mga tests); ang natitira ay para sa pagguhit sa canvas at paghawak ng mga mouse events.

Ang pahina ay nagiging napakagaan: isang canvas element lang. Pero mas malaki ang download. Ang compiled module ay mga 254 KB (mga 92 KB kapag compressed) dagdag pa ang mga 28 KB ng JavaScript glue na ginagawa ng build tool. At may mga gastos na nararamdaman namin habang nagtatrabaho dito:

• Isang toolchain. Kailangan ng Rust, ang WebAssembly target, at isang command-line tool na ang bersyon ay dapat eksaktong tugma sa library. Ang aming build script ay nagpapatakbo muna ng mga tests at humihinto kung may pumalya.
• Walang access sa keyboard o screen-reader sa mga indibidwal na lungsod. Ang canvas ay isang larawan. Ang 44 na focusable dots sa SVG na bersyon ay wala na.
• Ingles lamang. Ang mga label ay nakasulat sa loob ng programa.
• Blur. Ang malambot na gilid ng anino ay gumagamit ng canvas blur filter, na hindi sinusuportahan ng lahat ng browser. Hindi pa namin nasubukan ang Safari, kung saan maaaring maging matigas ang gilid.

3. Flutter

Sa simpleng salita: Ang Flutter ay isang toolkit mula sa Google para sa paggawa ng mga app na tumatakbo sa mga telepono, kompyuter, at web mula sa isang set ng code. Hindi nito ginagamit ang sariling mga building blocks ng web page. Ginuguhit nito ang lahat mismo. Dito, ang mapa ay isang maliit na app na ipinapakita sa loob ng pahinang ito, ang parehong toolkit na nagpapatakbo sa aming charging calculator.

Ipinipinta nito ang mapa gamit ang isang custom painter, at ipinapakita dito sa isang frame. Kaya rin ng Flutter na gumawa ng mga phone at desktop app mula sa parehong code, na siyang pangunahing argumento nito: isulat ang mapa isang beses, patakbuhin ito sa iba’t ibang lugar.

Pareho lang ang lohika tulad ng Rust map, na inilipat sa Dart, na may 11 na pagsusulit. Mga humigit-kumulang 1,100 linya kasama ang mga pagsusulit. Pinapasa ng Flutter ang bawat lungsod sa mga screen reader bilang isang naka-label na button, na wala sa bersyon ng canvas (hindi pa namin nasubukan kung gaano ito kaepektibo sa totoong screen reader). Ito rin ang pinakamalaking download: ang app ay mga 1.8 MB (mga 535 KB kapag compressed). Ang drawing engine ng Flutter ay isa pang download, ngunit ang site ay nagbabahagi na ng isang kopya nito kasama ang calculator, kaya ang bisitang nagbukas na ng calculator ay hindi na ito muling ida-download. Ang teksto nito ay naka-set sa font ng site, Merriweather, na kinukuha ng browser sa oras ng pagpapatakbo.

Ano ang aming natuklasan

Isang dagdag na tala tungkol sa bilis. Sa aming pagsusuri, ang SVG map at ang Rust map ay parehong tumakbo sa refresh rate ng screen (mga 120 frames per second sa test display), kaya hindi sila nahati ng frame rate. Hindi namin sinukat ang frame rate ng Flutter, at hindi rin namin sinukat ang paggamit ng baterya o CPU, kaya hindi namin masasabi kung alin ang mas magaan sa telepono.

Mga bagay na nagulat sa amin

May ilang detalye na madaling magkamali. Ang aming mga unang clone ay nag-drawing ng susi at mga orasan sa isang fixed na bahagi ng mapa, kaya lumiit sila sa maliliit na screen at mukhang napakaliit kumpara sa orihinal. Ang orihinal ay nagsasaayos ng laki gamit ang sariling font unit ng pahina (rem, na nagbabago depende sa lapad ng screen). Ngayon, binabasa ng mga clone ang sukat na iyon mula sa pahina. Iba rin ang mga orasan: ang mga kamay ng orihinal ay gumagalaw sa mga hakbang na 15 minuto, habang sa mga bersyon ng Rust at Flutter ay patuloy ang pag-ikot.

Hindi kasama ang mga time zone. Wala sa Rust na naka-compile sa WebAssembly o Dart ang may database ng time zone na nakakakilala sa “Asia/Dubai”. Pareho nilang tinatanong ang browser sa halip, gamit ang built-in na Intl service nito, na tama rin ang pag-handle ng daylight saving.

Lahat ng tatlo ay nagbabahagi ng kanilang mga input. Binabasa ng mga mapa ng Rust at Flutter ang listahan ng mga lungsod at ang balangkas ng lupa mula sa pahinang kanilang kinaroroonan, ang parehong data na ginagamit ng SVG map. Kapag binago ang isang lungsod, nagbabago rin ang lahat ng tatlo. Ibig sabihin nito, ang mga mapa ay maaari lamang tumakbo sa isang pahina na nagbibigay sa kanila ng data.

Naalala ng Flutter web. Nag-iinstall ang Flutter web ng sarili nitong cache, kaya pagkatapos ng rebuild ay patuloy naming nakikita ang lumang bersyon hanggang sa na-clear namin ito.

Ang aming konklusyon

Nanatili ang SVG map sa home page. Para sa isang drawing na ganito kalaki, ito ang pinakamagaan, accessible, isinalin, at hindi kailangan ng anuman para mabuo. Ang Rust ang mas kawili-wiling pangalawang pagpipilian: kung kailanman kailangan natin na ang lohika ng mapa ay mapatunayan na tama, o kailangan ng mabigat na computation sa browser, ang isang nasubok na Rust core ay magandang paraan para gawin ito. May saysay ang Flutter kung kailanman kailangan ng mapa na mabuhay sa loob ng isang Flutter app.

Hindi kailangang baguhin ang produkto para maging sulit ang isang eksperimento. Nagtapos kami na may mas malinaw na larawan kung magkano ang gastos ng bawat pamamaraan, isang nasubok na paglalarawan kung paano kumikilos ang mapa, at isang pahina kung saan maaari mong makita ang lahat ng tatlo para sa iyong sarili.

Ano ang susunod na binubuo ng aming mga tagapagtatag

Ang isang matatag na plataporma ay nagbibigay ng oras para sa iba pang mga ideya. Bukod sa EVnSteven, ang aming mga tagapagtatag ay nagtatrabaho sa mga sumusunod:

Ride-hailing, launching very soon Kimem ↗ (opens in a new tab) Isang serbisyo ng ride-hailing para sa Bahir Dar, Ethiopia, mula kay tagapagtatag Mekonnen Alemu. Nakikita ng mga sakay ang pagtataya ng pamasahe bago mag-book, pinapanood ang pinakamalapit na drayber na papalapit sa mapa, at nagbabayad ng metered na pamasahe sa cash sa pagtatapos ng biyahe.

Non-profit, open source StrayCats ↗ (opens in a new tab) Isang proyekto mula kay David upang tulungan ang mga taong nag-aalaga ng mga pusa sa kalye, mga ligaw na pusa, o kahit anong pusa, kahit na ang pusa ay isang aso. Nasa yugto pa ito ng ideya, wala pang app, at nais ni David ang iyong mga ideya at puna. Iniaalay kay Saibo, 2010–2026.

Cash tracking, free, launching soon Effectivo ↗ (opens in a new tab) Hindi perpektong accounting na may kakaibang twist, para sa mga gumagamit ng cash. Mag-log ng pagbili sa ilang tap, bilangin ang laman ng iyong pitaka, at balikan kung ano ang sulit. Ang twist ay ang bawat taong patuloy na gumagamit ng cash ay tumutulong upang mapanatili ito para sa lahat. Libre at walang patalastas, darating sa Android at iPhone, may beta at web demo na tumatakbo ngayon.