Taswirar Daya, Hanyoyi Uku: SVG, Rust da Flutter

EVnSteven ya kai wani matsayi mai dadi. Dandalin yana da kwanciyar hankali kuma baya bukatar kulawa mai yawa, wanda shi ne abin da muka so tun farko: tsarin karami wanda ke ci gaba da aiki cikin natsuwa. Wannan ya bar ɗan sarari don gwaji, kuma ya ba wa masu kafa mu lokaci don fara wasu ayyuka, waɗanda za ku samu a ƙarshe.

Don haka mun gudanar da gwaji. Mun ɗauki taswirar da ke shafin gida mu sake ginawa sau biyu: sau ɗaya a Rust wanda aka haɗa zuwa WebAssembly, da sau ɗaya a Flutter. Wannan labarin yana haɗa duk uku a shafi guda kuma yana kwatanta su.

1. Asali: SVG, CSS da ɗan JavaScript

A cikin kalmomi masu sauƙi: wannan shi ne taswirar da ke shafin gidan mu. An gina ta kamar yadda ake gina sauran shafin yanar gizo: zane wanda aka yi da sifofi da burauzarka tuni ta san yadda za ta nuna su da motsa su. Ita ce mafi sauƙi daga cikin uku, kuma ita ce mafi yawan baƙi ke gani.

Zane ne na SVG guda ɗaya. Burauzan yana gudanar da yawancin motsin daga CSS, kuma ƙaramin rubutun yana kula da sauran.

A cikin amfaninsa: babu matakin gini, don haka samfurin Hugo kawai yake bukata. Yana da vector, don haka yana ci gaba da kasancewa mai kaifi a kowane girma. Duk maki 44 ana iya isa gare su da madannin kwamfuta, kowanne da lakabi don masu karanta allo. Kuma kalmomin kaɗan an fassara su cikin dukkan harsunanmu.

Farashin shi ne nauyi a shafin. Alamar taswirar kusan KB 107 ce (kusar KB 30 bayan an matsa), kuma da zarar yana aiki yana da kusan abubuwa 670 da kusan motsin CSS 200. Hakanan lissafin yana da wuya a gwada: lokacin yana cikin CSS keyframes da rubutun a cikin shafin, don haka gwajin kawai shi ne kallon sa.

2. Rust da WebAssembly

A cikin sauki: Rust wani yaren shirye-shirye ne da aka sani da sauri da kuma gano kuskure da yawa kafin shirin ya fara gudana. Anan mun rubuta “hankalin” taswirar a cikin Rust, mun tattara shi cikin wani tsari mai ƙanƙanta wanda masu bincike za su iya gudanarwa (wanda ake kira WebAssembly), kuma mun bar shi ya zana dukkan taswirar da kansa, kamar mai zanen da ke sake zanen allo ɗaya sau da yawa a cikin dakika. A gare ku yana kama da yadda yake.

Dukkan taswirar an zana ta a kan allo ɗaya ta Rust wanda aka haɗa zuwa WebAssembly. Lambar Rust tana da alhakin duk halayen taswirar kuma tana sake zanawa a kowane lokaci.

Abin da muka fi so shi ne cewa tsarin shine Rust na ainihi ba tare da wani abu daga mai binciken ba: lissafin inda abubuwa suke da lokacin da suke canzawa, da kuma mai fassara wanda ke karanta iyakar ƙasa. Yana da gwaje-gwaje 13 waɗanda ke gudana cikin kankanin lokaci, kuma idan lokacin zagaye bai dace ba, gwajin zai kasa maimakon wani ya lura cewa yana kama da ba daidai ba. Kimanin kashi ɗaya bisa uku na kusan layuka 1,070 na Rust shine wannan ɓangaren da aka gwada (tare da gwaje-gwajensa); sauran yana zana zuwa allo kuma yana sarrafa abubuwan linzamin kwamfuta.

Shafin yana ƙarshe da sauƙi sosai: abu ɗaya na allo. Amma saukarwa ya fi girma. An haɗa module ɗin kusan 254 KB (kimanin 92 KB bayan an matse) tare da kusan 28 KB na JavaScript glue wanda kayan aikin gini ke samarwa. Kuma akwai ƙalubale da muke ji yayin aiki a kai:

• Kayan aikin gini. Gina yana buƙatar Rust, burin WebAssembly da kayan aikin layin umarni wanda sigar sa dole ta dace da na ɗakin karatu daidai. Rubutun gininmu yana gudanar da gwaje-gwaje da farko kuma yana dakatarwa idan ɗaya ya gaza.
• Babu damar amfani da madannin rubutu ko na’urar karanta allo ga birane ɗaya-ɗaya. Canvas hoto ne. Sigogin SVG na dots 44 masu mayar da hankali sun ɓace.
• Turanci kawai. Alamomin an rubuta su cikin shirin.
• Ruwa. Iyakacin inuwa mai laushi yana amfani da matattarar ruɓaɓɓen canvas, wanda ba kowanne burauza ke goyan baya ba. Ba mu gwada Safari ba, inda iyakar zai iya zama mai wuya.

3. Flutter

A cikin kalmomi masu sauƙi: Flutter kayan aikin ne daga Google don gina manhajoji da ke gudana a wayoyi, kwamfutoci da yanar gizo daga saiti ɗaya na lambar. Ba ya amfani da tubalan ginin shafin yanar gizo na kansa. Yana zana komai da kansa. Anan taswira ƙaramar manhaja ce da aka nuna a cikin wannan shafi, kayan aikin da ke ƙarfafa kalkuleta cajinmu.

Yana zanen taswira tare da mai zanen al’ada, kuma an nuna shi anan cikin firam. Flutter na iya kuma gina manhajojin wayar hannu da kwamfuta daga wannan lambar, wanda shine babban hujjar sa: rubuta taswira sau ɗaya, gudanar da ita a wurare da dama.

Haka ne tunanin kamar na Rust map, an fassara shi zuwa Dart, tare da gwaje-gwaje 11. Kimanin layuka 1,100 ciki har da gwaje-gwaje. Flutter yana ba kowace birni ga masu karatun allo a matsayin maballin da aka sanya lakabi, wanda sigar canvas ba ta da shi (ba mu duba yadda yake aiki da gaske tare da mai karatun allo ba). Hakanan shine mafi girman saukarwa: manhajar tana kusan 1.8 MB (kimanin 535 KB bayan an matsa). Injiniyan zane na Flutter wani karin saukarwa ne, amma shafin yana riga ya raba kwafi guda daya tare da kalkuleta, don haka baƙon da ya bude kalkuleta ba zai sake saukar da shi ba. Rubutunsa an saita shi cikin font ɗin shafin, Merriweather, wanda burauzar ke ɗauka a lokacin gudu.

Abin da muka samu

Wani karin bayani game da sauri. A bincikenmu, taswirar SVG da taswirar Rust duka sun gudana a matsayin sabunta allo (kimanin 120 frames a sakan a allon gwaji), don haka yawan frames bai bambanta su ba. Ba mu auna yawan frames na Flutter ba, kuma ba mu auna amfani da batir ko CPU ba, don haka ba za mu iya cewa wanne ne mafi sauƙi a wayar hannu ba.

Abubuwan da suka ba mu mamaki

Wasu cikakkun bayanai suna da sauƙin kuskure. Kwafinmu na farko sun zana makullin da agogon a wani kaso na taswira, don haka sun yi ƙanƙanta a kan ƙananan allo kuma sun yi ƙanana sosai idan aka kwatanta da asali. Asalin yana girman su a cikin nau’in font na shafin (rem, wanda ke canzawa tare da faɗin allo). Kwafin yanzu suna karanta wannan girman daga shafin. Agogon ma sun bambanta: hannun asalin yana motsawa a matakai na minti 15, yayin da a sigar Rust da Flutter suna juyawa a ci gaba.

Ba a gina yankunan lokaci ba. Babu Rust da aka haɗa zuwa WebAssembly ko Dart da ke ɗauke da bayanan yankin lokaci wanda ya san “Asia/Dubai”. Dukansu suna tambayar mai bincike maimakon haka, ta hanyar sabis ɗin Intl na ciki, wanda kuma yana samun daidai lokacin ceton rana.

Duk uku suna raba shigarwarsu. Taswirar Rust da Flutter suna karanta jerin birane da iyakar ƙasa daga shafin da suke a kai, wato bayanan da taswirar SVG ke amfani da su. Canza birni, kuma duk uku suna canzawa. Hakanan yana nufin taswirar na iya gudana ne kawai a shafi wanda ke ba su damar yin hakan.

Flutter web yana tuna. Flutter web yana girka ajiyar kansa, don haka bayan sake ginawa mun ci gaba da ganin tsohuwar sigar har sai mun share ta.

Kammalawarmu

Taswirar SVG tana nan a shafin gida. Don zane mai wannan girman ita ce mafi sauƙi, mai sauƙin samu, an fassara ta, kuma ba ta buƙatar komai don ginawa. Rust shine wanda ya fi ban sha’awa a matsayin mai biyowa: idan muka taɓa buƙatar hujjar daidai na dabarun taswirar, ko buƙatar yin lissafi mai nauyi a cikin mai bincike, tushen Rust da aka gwada hanya ce mai kyau don yin hakan. Flutter yana da ma’ana idan taswirar ta taɓa buƙatar zama a cikin manhajar Flutter.

Gwaji ba ya buƙatar canza samfurin don ya cancanci gudanarwa. Mun ƙare da hoto mafi bayyana na abin da kowanne hanya ke kashewa, bayanin da aka gwada na yadda taswirar ke aiki, da shafi inda za ka iya ganin duk uku da kanka.

Abin da masu kafa mu ke ginawa na gaba

Dandamali mai ƙarfi yana barin lokaci don wasu ra’ayoyi. Baya ga EVnSteven, masu kafa mu suna aiki kan waɗannan:

Sabis ɗin ɗaukar fasinja, zai ƙaddamar nan ba da jimawa ba Kimem ↗ (opens in a new tab) Sabis ɗin ɗaukar fasinja don Bahir Dar, Ethiopia, daga mai kafa Mekonnen Alemu. Masu tafiya suna ganin kimar farashin kafin su yi ajiyar, suna kallon direban mafi kusa yana matsowa a taswira, kuma suna biyan farashin da aka auna a cikin kuɗi a ƙarshen tafiyar.

Ba riba, tushen buɗe StrayCats ↗ (opens in a new tab) Wani aikin daga David don taimakawa mutane masu kula da kuliyoyi na titi, kuliyoyi marasa gida, ko kowace kuliya, ko da wannan kuliya ta kasance kare. Har yanzu yana matakin ra'ayi ne, ba tare da wata manhaja ba tukuna, kuma David zai so ra'ayoyinku da ra'ayoyin ku. An sadaukar da shi ga Saibo, 2010–2026.

Bibiya kuɗi, kyauta, zai ƙaddamar nan ba da jimawa ba Effectivo ↗ (opens in a new tab) Lissafin kuɗi mara cikakkiyar inganci tare da wani salo, ga waɗanda ke amfani da kuɗi a hannu. Yi rajistar sayayya cikin dannawa kaɗan, ƙidaya abin da ke cikin walat ɗinka, kuma duba baya ga abin da ya cancanci. Salo ɗin shi ne cewa kowa da ke ci gaba da amfani da kuɗi yana taimakawa wajen ci gaba da kasancewarsa ga kowa da kowa. Kyauta kuma babu talla, zai zo ga Android da iPhone, tare da beta da demo na yanar gizo yana gudana yanzu.