Sama kartta, kolme tapaa: SVG, Rust ja Flutter

EVnSteven on saavuttanut mukavan tilan. Alusta on vakaa eikä vaadi paljon ylläpitoa, mikä oli juuri se, mitä halusimme aloittaessamme: pieni järjestelmä, joka toimii hiljaisesti. Tämä jättää hieman tilaa kokeiluille, ja se on antanut perustajillemme aikaa aloittaa muutamia muita projekteja, jotka löydät lopusta.

Joten teimme kokeen. Otimme kotisivumme kartan ja rakensimme sen kahdesti uudelleen: kerran Rustilla käännettynä WebAssemblyksi ja kerran Flutterilla. Tämä artikkeli esittelee kaikki kolme yhdellä sivulla ja vertaa niitä.

1. Alkuperäinen: SVG, CSS ja vähän JavaScriptiä

Yksinkertaisesti sanottuna: tämä on kartta kotisivullamme. Se on rakennettu samalla tavalla kuin muu verkkosivu: piirros muodoista, jotka selaimesi osaa jo näyttää ja animoida. Se on kolmesta yksinkertaisin, ja suurin osa kävijöistä näkee juuri tämän.

Se on yksi SVG-piirros. Selain suorittaa suurimman osan animaatioista CSS:stä, ja pieni skripti hoitaa loput.

Sen puolesta puhuu se, ettei tarvitse rakennusvaihetta, joten Hugo-malli riittää. Se on vektorigrafiikkaa, joten se pysyy terävänä missä tahansa koossa. Kaikki 44 pistettä ovat saavutettavissa näppäimistöllä, jokaisella on ruudunlukijaa varten etiketti. Ja sen harvat sanat on käännetty kaikille kielillemme.

Haittana on sivun paino. Kartan merkintä on noin 107 kt (noin 30 kt pakattuna), ja käynnissä ollessaan siinä on noin 670 elementtiä ja noin 200 CSS-animaatiota. Logiikkaa on myös vaikea testata: ajoitus on CSS:n keyframeissä ja sivun skriptissä, joten ainoa testi on katsoa sitä.

2. Rust ja WebAssembly

Yksinkertaisesti sanottuna: Rust on ohjelmointikieli, joka tunnetaan nopeudestaan ja siitä, että se löytää monia virheitä ennen kuin ohjelma edes suoritetaan. Tässä kirjoitimme kartan “aivot” Rustilla, paketoimme sen tiiviiseen muotoon, jota selaimet voivat suorittaa (kutsutaan WebAssemblyksi), ja annoimme sen maalata koko kartan itse, kuin maalari, joka piirtää yhtä kangasta monta kertaa sekunnissa uudelleen. Sinulle se näyttää samalta.

Koko kartta piirretään yhdelle kankaalle Rustilla, joka on käännetty WebAssemblyksi. Rust-koodi hallitsee koko kartan toimintaa ja piirtää kaiken uudelleen jokaisella ruudulla.

Se osa, josta pidimme, on se, että logiikka on puhdasta Rustia ilman mitään selainkohtaisia osia: matematiikkaa siitä, mihin asiat sijoittuvat ja milloin ne muuttuvat, sekä jäsentäjä, joka lukee maan rajaviivan. Siinä on 13 testiä, jotka suoritetaan murto-osassa sekuntia, ja jos sykli ei ajoitu oikein, testi epäonnistuu sen sijaan, että joku huomaisi sen näyttävän oudolta. Noin kolmannes noin 1 070 rivistä Rust-koodia on tätä testattua ydintä (testeineen); loput piirtävät kankaalle ja käsittelevät hiiritapahtumia.

Sivusta tulee hyvin kevyt: yksi canvas-elementti. Mutta lataus on suurempi. Käännetty moduuli on noin 254 KB (noin 92 KB pakattuna) plus noin 28 KB JavaScript-liimaa, jonka rakennustyökalu generoi. Ja työskentelyssä tuntuu myös kustannuksia:

• Työkaluketju. Rakentaminen vaatii Rustin, WebAssembly-kohteen ja komentorivityökalun, jonka version on oltava täsmälleen sama kuin kirjaston. Rakennusskriptimme suorittaa testit ensin ja pysähtyy, jos jokin epäonnistuu.
• Ei näppäimistö- tai ruudunlukijakäyttöä yksittäisiin kaupunkeihin. Kangas on kuva. SVG-version 44 fokusoitavaa pistettä on poistettu.
• Vain englanti. Etiketit on kirjoitettu ohjelmaan.
• Sumentaminen. Pehmeä varjon reuna käyttää kangassumentimen suodatinta, jota kaikki selaimet eivät tue. Emme ole testanneet Safaria, jossa reuna saattaa olla kova.

3. Flutter

Yksinkertaisesti: Flutter on Googlen työkalu sovellusten rakentamiseen, jotka toimivat puhelimissa, tietokoneissa ja verkossa yhdestä koodikokonaisuudesta. Se ei käytä verkkosivun omia rakennuspalikoita. Se piirtää kaiken itse. Tässä kartta on pieni sovellus, joka näytetään tällä sivulla, sama työkalu, joka pyörittää meidän latauslaskuriamme.

Se maalaa kartan mukautetulla maalarilla, ja se näytetään tässä kehyksessä. Flutter voi myös rakentaa puhelin- ja työpöytäsovelluksia samasta koodista, mikä on sen pääargumentti: kirjoita kartta kerran, aja sitä useissa paikoissa.

Se on sama logiikka kuin Rustin mapissa, siirretty Dartille, 11 testillä. Noin 1 100 riviä mukaan lukien testit. Flutter antaa jokaisen kaupungin ruudunlukijoille merkittynä painikkeena, mitä canvas-versiosta puuttuu (emme ole tarkistaneet, kuinka hyvin se toimii oikean ruudunlukijan kanssa). Se on myös suurin lataus: sovellus on noin 1,8 Mt (noin 535 kt pakattuna). Flutterin piirto-moottori on erillinen lataus, mutta sivusto jakaa jo yhden kopion laskimen kanssa, joten kävijä, joka on avannut laskimen, ei lataa sitä uudelleen. Sen teksti on asetettu sivuston fonttiin, Merriweatheriin, jonka selain hakee ajon aikana.

Mitä löysimme

Yksi lisähuomio nopeudesta. Tarkastuksessamme SVG-kartta ja Rust-kartta molemmat toimivat näytön virkistystaajuudella (noin 120 ruutua sekunnissa testinäytöllä), joten ruutunopeus ei erotellut niitä. Emme mitanneet Flutterin ruutunopeutta emmekä akun tai suorittimen käyttöä, joten emme voi sanoa, kumpi on kevyempi puhelimessa.

Asiat, jotka yllättivät meitä

Jotkin yksityiskohdat on helppo saada väärin. Ensimmäiset kloonimme piirsivät avaimen ja kellot kiinteänä osuutena kartasta, joten ne kutistuivat pienillä näytöillä ja näyttivät alkuperäiseen verrattuna pieniltä. Alkuperäinen määrittää niiden koon sivun omassa fonttiyksikössä (rem, joka muuttuu näytön leveyden mukaan). Kloonit lukevat nyt tämän koon sivulta. Kellotkin eroavat: alkuperäisen viisarit liikkuvat 15 minuutin askelin, kun taas Rust- ja Flutter-versioissa ne pyörivät jatkuvasti.

Aikavyöhykkeet eivät olleet sisäänrakennettuja. Ei Rust, joka käännetään WebAssemblyksi, eikä Dart sisällä aikavyöhyketietokantaa, joka tuntisi “Asia/Dubai”. Molemmat kysyvät sen sijaan selaimelta sen sisäänrakennetun Intl-palvelun kautta, joka myös käsittelee kesäajan oikein.

Kaikki kolme jakavat syötteensä. Rust- ja Flutter-kartat lukevat kaupunkilistan ja maan ääriviivat sivulta, jolla ne ovat, samat tiedot joita SVG-kartta käyttää. Muuta kaupunkia, ja kaikki kolme muuttuvat. Tämä tarkoittaa myös, että kartat voivat toimia vain sivulla, joka tarjoaa ne.

Flutter web muistaa. Flutter web asentaa oman välimuistinsa, joten uudelleenrakentamisen jälkeen näimme vanhan version, kunnes tyhjensimme sen.

Johtopäätöksemme

SVG-kartta pysyy kotisivulla. Tämän kokoiselle piirrokselle se on kevyin, saavutettava, käännetty, eikä sen rakentamiseen tarvita mitään. Rust on mielenkiintoisempi kakkonen: jos joskus tarvitsemme kartan logiikan olevan todistettavasti oikea tai tarvitsemme raskasta laskentaa selaimessa, testattu Rust-ydin on hyvä tapa tehdä se. Flutter on järkevä, jos kartan täytyy joskus elää Flutter-sovelluksen sisällä.

Koe ei tarvitse muuttaa tuotetta ollakseen kokeilemisen arvoinen. Päädyimme selkeämpään kuvaan siitä, mitä kukin lähestymistapa maksaa, testattuun kuvaukseen siitä, miten kartta käyttäytyy, ja sivuun, jossa voit nähdä kaikki kolme itse.

Mitä perustajamme rakentavat seuraavaksi

Vakaa alusta jättää aikaa muille ideoille. EVnStevenin lisäksi perustajamme työskentelevät näiden parissa:

Kyytipalvelu, tulossa pian Kimem ↗ (opens in a new tab) Kyytipalvelu Bahir Darissa, Etiopiassa, perustaja Mekonnen Alemun kehittämä. Matkustajat näkevät hinnan arvion ennen varausta, seuraavat lähimmän kuljettajan saapumista kartalla ja maksavat mittarilukeman mukaisen hinnan käteisellä matkan lopussa.

Voittoa tavoittelematon, avoimen lähdekoodin StrayCats ↗ (opens in a new tab) Davidin projekti auttamaan ihmisiä, jotka huolehtivat kaduilla olevista kissoista, kulkukissoista tai mistä tahansa kissasta, vaikka kyseinen kissa sattuisikin olemaan koira. Projekti on vielä ideavaiheessa, sovellusta ei ole vielä, ja David toivoo ideoitasi ja palautettasi. Omistettu Saibolle, 2010–2026.

Käteisen seuranta, ilmainen, tulossa pian Effectivo ↗ (opens in a new tab) Epätäydellinen kirjanpito pienellä twistillä niille, jotka käyttävät käteistä. Kirjaa ostos muutamalla napautuksella, laske lompakossasi oleva raha ja katso taaksepäin, mikä oli sen arvoista. Twistinä on, että jokainen, joka jatkaa käteisen käyttöä, auttaa pitämään sen käytössä kaikille muillekin. Ilmainen ja mainokseton, tulossa Androidille ja iPhonelle, beta ja verkkodemoversio ovat jo käytössä.