Ramani Ile Ile, Njia Tatu: SVG, Rust na Flutter

EVnSteven imefikia mahali pa starehe. Jukwaa ni thabiti na halihitaji matengenezo mengi, ambayo ni hasa tulivyotaka tulipoanza: mfumo mdogo unaoendelea kufanya kazi kimya kimya. Hii inatoa nafasi kidogo ya kujaribu mambo, na imempa waanzilishi wetu muda wa kuanzisha miradi mingine michache, ambayo utaiwona mwishoni.

Kwa hivyo tulifanya jaribio. Tulichukua ramani kwenye ukurasa wetu wa nyumbani na kuijenga upya mara mbili: mara moja kwa Rust iliyokusanywa hadi WebAssembly, na mara moja kwa Flutter. Makala hii inaweka zote tatu kwenye ukurasa mmoja na kuzilinganisha.

1. Asili: SVG, CSS na kidogo JavaScript

Kwa maneno rahisi: hii ni ramani kwenye ukurasa wetu wa nyumbani. Imejengwa kama sehemu nyingine ya ukurasa wa wavuti inavyojengwa: mchoro ulio na maumbo ambayo kivinjari chako tayari kinajua jinsi ya kuonyesha na kuhuisha. Ni rahisi zaidi kati ya tatu, na ndiyo ambayo wageni wengi huiona.

Ni mchoro mmoja wa SVG. Kivinjari kinaendesha nyingi za uhuishaji kutoka CSS, na script ndogo inashughulikia zingine.

Kwa upande wake: hakuna hatua ya kujenga, hivyo template ya Hugo ndilo tu linahitaji. Ni vector, hivyo hubaki mkali kwa ukubwa wowote. Nukta zote 44 zinaweza kufikiwa kwa kibodi, kila moja ikiwa na lebo kwa wasomaji wa skrini. Na maneno yake machache yamefasiriwa katika lugha zetu zote.

Gharama ni uzito kwenye ukurasa. Alama za ramani ni takriban KB 107 (takriban KB 30 zikiwa zimekandamizwa), na mara inapoendesha ina takriban vipengele 670 na uhuishaji wa CSS takriban 200. Mantiki pia ni ngumu kujaribu: muda unaishi ndani ya keyframes za CSS na script kwenye ukurasa, hivyo jaribio pekee ni kuangalia.

2. Rust na WebAssembly

Kwa maneno rahisi: Rust ni lugha ya programu inayojulikana kwa kuwa haraka na kugundua makosa mengi kabla programu hata ianze kuendesha. Hapa tuliandika “ubongo” wa ramani kwa Rust, tukaiweka katika fomu ndogo ambayo vivinjari vinaweza kuendesha (inayoitwa WebAssembly), na kuiruhusu kuchora ramani nzima yenyewe, kama mchora picha anayerudia kuchora turubai moja mara nyingi kwa sekunde. Kwako inaonekana sawa.

Ramani nzima inachorwa kwenye turubai moja na Rust ambayo imetafsiriwa kuwa WebAssembly. Msimbo wa Rust unamiliki tabia zote za ramani na huchora upya kila kitu kila fremu.

Sehemu tuliyopenda ni kwamba mantiki ni Rust safi bila chochote kutoka kwa kivinjari ndani yake: hesabu za mahali vitu vinaenda na lini hubadilika, na msomaji anayesoma muundo wa ardhi. Ina majaribio 13 yanayokimbia kwa sehemu ndogo ya sekunde, na ikiwa mzunguko wa wakati si sahihi, jaribio linashindwa badala ya mtu kugundua inaonekana isiyo ya kawaida. Takriban theluthi moja ya mistari takriban 1,070 ya Rust ni msingi huo uliothibitishwa (pamoja na majaribio yake); sehemu nyingine huchora kwenye turubai na kushughulikia matukio ya panya.

Ukurasa unakuwa mwepesi sana: kipengele kimoja cha turubai. Lakini upakuaji ni mkubwa. Moduli iliyotafsiriwa ni takriban KB 254 (takriban KB 92 iliyoshinikwa) pamoja na takriban KB 28 ya gundi ya JavaScript ambayo chombo cha kujenga kinatengeneza. Na kuna gharama tunazohisi tunapofanya kazi juu yake:

• Zana ya ujenzi. Ujenzi unahitaji Rust, lengo la WebAssembly na zana ya mstari wa amri ambayo toleo lake lazima lifanane kabisa na la maktaba. Skripti yetu ya ujenzi inaendesha majaribio kwanza na kusitisha ikiwa moja linashindwa.
• Hakuna ufikiaji wa kibodi au msomaji wa skrini kwa miji binafsi. Canvas ni picha. Toleo la SVG lenye nukta 44 zinazoweza kupigiwa msukumo limeondolewa.
• Kiingereza tu. Lebo zimeandikwa ndani ya programu.
• Kufifia. Kivuli laini cha kingo kinatumia kichujio cha kufifia cha canvas, ambacho si kivinjari vyote vinaunga mkono. Hatujajaribu Safari, ambapo kingo inaweza kuwa ngumu.

3. Flutter

Kwa maneno rahisi: Flutter ni zana kutoka Google kwa ajili ya kujenga programu zinazotumia simu, kompyuta na wavuti kutoka kwa seti moja ya msimbo. Haitegemei vipengele vya kujenga vya ukurasa wa wavuti. Huichora yote yenyewe. Hapa ramani ni programu ndogo inayoonyeshwa ndani ya ukurasa huu, zana ile ile inayoiendesha kalkuleta ya kuchaji.

Inachora ramani kwa mchora maalum, na inaonyeshwa hapa ndani ya fremu. Flutter pia inaweza kujenga programu za simu na kompyuta kutoka kwa msimbo ule ule, ambayo ni hoja yake kuu: andika ramani mara moja, itumie sehemu mbalimbali.

Ni mantiki ile ile kama ramani ya Rust, iliyobadilishwa kwenda Dart, ikiwa na majaribio 11. Takriban mistari 1,100 ikijumuisha majaribio. Flutter huwapa kila jiji wasomaji wa skrini kama kitufe kilicho na lebo, ambacho toleo la canvas halina (hatujajaribu jinsi inavyofanya kazi vizuri na msomaji halisi wa skrini). Pia ni pakiaji kubwa zaidi: programu ni takriban 1.8 MB (takriban 535 KB iliyobanwa). Injini ya kuchora ya Flutter ni pakiaji zaidi, lakini tovuti tayari inashiriki nakala moja na kalkuleta, hivyo mgeni aliyefungua kalkuleta haipakii tena. Maandishi yake yamewekwa katika fonti ya tovuti, Merriweather, ambayo kivinjari huchukua wakati wa kuendesha.

Tulichokipata

Kumbukumbu moja zaidi kuhusu kasi. Katika ukaguzi wetu, ramani ya SVG na ramani ya Rust zote zilicheza kwa kiwango cha kusasisha skrini (takriban fremu 120 kwa sekunde kwenye skrini ya majaribio), hivyo kiwango cha fremu hakikutofautisha. Hatujapima kiwango cha fremu cha Flutter, na hatujapima matumizi ya betri au CPU, hivyo hatuwezi kusema ni ipi nyepesi zaidi kwenye simu.

Mambo yaliotushangaza

Baadhi ya maelezo ni rahisi kuyakosea. Kloni zetu za kwanza zilichora funguo na saa kwa sehemu iliyowekwa ya ramani, hivyo zilipungua kwenye skrini ndogo na kuonekana ndogo ikilinganishwa na asili. Asili huziweka kwa ukubwa wa fonti wa ukurasa (rem, ambayo hubadilika kulingana na upana wa skrini). Kloni sasa husoma ukubwa huo kutoka kwenye ukurasa. Saa pia zinatofautiana: mikono ya asili husogea kwa hatua za dakika 15, wakati katika toleo la Rust na Flutter zinageuka kwa mzunguko endelevu.

Mikoa ya saa haikujengwa ndani. Hata Rust iliyokusanywa kwa WebAssembly wala Dart haina hifadhidata ya mikoa ya saa inayojua “Asia/Dubai”. Zote mbili huuliza kivinjari badala yake, kupitia huduma yake ya ndani ya Intl, ambayo pia hupata saa za kuokoa mchana kwa usahihi.

Zote tatu hushiriki pembejeo zao. Ramani za Rust na Flutter husoma orodha ya miji na muhtasari wa ardhi kutoka kwenye ukurasa wanapo, data ile ile ambayo ramani ya SVG hutumia. Badilisha jiji, na zote tatu hubadilika. Pia inamaanisha ramani zinaweza kuendeshwa tu kwenye ukurasa unaowapatia.

Flutter web hukumbuka. Flutter web huweka cache yake mwenyewe, hivyo baada ya kujenga upya tulibaki kuona toleo la zamani hadi tulipolifuta.

Hitimisho letu

Ramani ya SVG hubaki kwenye ukurasa wa nyumbani. Kwa mchoro wa ukubwa huu ni nyepesi zaidi, inapatikana kwa urahisi, imetafsiriwa, na haitaji chochote kujengwa. Rust ni mbadala wa kuvutia zaidi: ikiwa tutahitaji mara yoyote mantiki ya ramani iwe sahihi kuthibitishwa, au tunahitaji kufanya hesabu nzito kwenye kivinjari, msingi wa Rust uliothibitishwa ni njia nzuri ya kufanya hivyo. Flutter ina maana ikiwa ramani itahitaji kuishi ndani ya programu ya Flutter.

Jaribio halihitaji kubadilisha bidhaa ili liwe na thamani ya kuendeshwa. Tulimaliza na picha wazi zaidi ya gharama za kila mbinu, maelezo yaliyothibitishwa ya jinsi ramani inavyotenda, na ukurasa ambapo unaweza kuona zote tatu kwa mwenyewe.

Kile waanzilishi wetu wanachojenga kinachofuata

Jukwaa thabiti hutoa muda kwa mawazo mengine. Mbali na EVnSteven, waanzilishi wetu wanafanya kazi kwenye haya:

Huduma ya kupiga simu ya usafiri, itazinduliwa hivi karibuni Kimem ↗ (opens in a new tab) Huduma ya kupiga simu ya usafiri kwa Bahir Dar, Ethiopia, kutoka kwa mwanzilishi Mekonnen Alemu. Abiria wanaona makadirio ya gharama kabla ya kuhifadhi, watazamaji dereva aliye karibu akikaribia kwenye ramani, na wanalipa gharama iliyopimwa kwa pesa taslimu mwishoni mwa safari.

Sio ya faida, chanzo huria StrayCats ↗ (opens in a new tab) Mradi kutoka kwa David kusaidia watu wanaowatunza paka wa mitaani, paka waliotoroka, au paka wowote, hata kama paka huyo ni mbwa. Bado iko katika hatua ya wazo, haina programu bado, na David angependa mawazo na maoni yako. Imejitolea kwa Saibo, 2010–2026.

Ufuatiliaji wa pesa taslimu, bure, itazinduliwa hivi karibuni Effectivo ↗ (opens in a new tab) Uhasibu usio kamilifu wenye mabadiliko, kwa wale wanaotumia pesa taslimu. Rekodi ununuzi kwa bonyeza chache, hesabu kile kilichoko mfukoni mwako, na rudi nyuma kuona kilichokuwa na thamani. Mabadiliko ni kwamba kila mtu anayendelea kutumia pesa taslimu husaidia kuifanya iendelee kuwepo kwa kila mtu mwingine. Bure na bila matangazo, inakuja kwa Android na iPhone, na beta pamoja na maonyesho ya wavuti yanayofanya kazi sasa.