Mpempe Otu, Uzo Atọ: SVG, Rust na Flutter

EVnSteven eruola ebe dị mma. Ụlọ ọrụ ahụ kwụsie ike ma ọ naghị achọ ọtụtụ mmezi, nke bụ kpọmkwem ihe anyị chọrọ mgbe anyị malitere: usoro nta nke na-arụ ọrụ nwayọọ nwayọọ. Nke ahụ na-ahapụ obere ohere iji nwalee, ma ọ hapụrụ ndị guzobere anyị oge ịmalite ụfọdụ ọrụ ndị ọzọ, nke ị ga-ahụ na njedebe.

Ya mere, anyị mere nnwale. Anyị were map na ibe ụlọ anyị wee wughachi ya ugboro abụọ: otu na Rust nke a kọmpaịlụ na WebAssembly, na otu na Flutter. Isiokwu a na-etinye atọ ahụ niile na otu ibe ma na-atụnyere ha.

1. Nke mbụ: SVG, CSS na obere JavaScript

N’okwu dị mfe: nke a bụ map na ibe ụlọ anyị. E wuru ya otu ụzọ ahụ ka e si wuo akụkụ ndị ọzọ nke ibe weebụ: eserese nke mejupụtara ụdị ndị ihe nchọgharị gị maara otu esi egosipụta na imegharị. Ọ bụ nke kachasị mfe n’ime atọ ahụ, ma ọ bụ nke ọtụtụ ndị ọbịa na-ahụ.

Ọ bụ otu eserese SVG. Ihe nchọgharị na-agba ọtụtụ n’ime mmegharị site na CSS, na obere usoro na-elekọta ihe ndị ọzọ.

N’aka ya: enweghị nzọụkwụ iwulite, ya mere template Hugo bụ naanị ihe ọ chọrọ. Ọ bụ vector, ya mere ọ na-adị mma n’ogologo ọ bụla. A pụrụ iru ihe mkpụrụedemede 44 niile site na keyboard, nke ọ bụla nwere akara maka ndị na-agụ ihuenyo. Ma okwu ole na ole ya bụ a tụgharịrị n’asụsụ anyị niile.

Ọnụahịa ya bụ ibu na ibe ahụ. Markup nke map bụ ihe dị ka 107 KB (ihe dị ka 30 KB mgbe e compress), na mgbe ọ na-agba ọsọ ọ nwere ihe dị ka ihe 670 na ihe dị ka mmegharị CSS 200. Usoro ahụ siri ike ịnwale: oge dị n’ime CSS keyframes na usoro dị na ibe ahụ, ya mere ule naanị bụ ile ya anya.

2. Rust na WebAssembly

N’okwu dị mfe: Rust bụ asụsụ mmemme a maara maka ịdị ngwa ya na maka ịchọta ọtụtụ njehie tupu mmemme ahụ amalite ịrụ ọrụ. N’ebe a, anyị dere “ụbụrụ” nke map ahụ na Rust, tinye ya n’ime ụdị dị mkpụmkpụ nke ihe nchọgharị nwere ike ịrụ (akpọrọ WebAssembly), ma hapụ ya ka ọ na-ese map ahụ dum n’onwe ya, dịka onye na-ese ihe na-ese otu akwa ugbo ugboro ọtụtụ ugboro n’otu sekọnd. Maka gị, ọ na-ele anya otu ahụ.

A na-ese map ahụ dum na otu akwa ugbo site na Rust nke e mepụtara ka ọ bụrụ WebAssembly. Koodu Rust nwere ikike niile nke omume map ahụ ma na-esegharị ihe niile kwa ogbu oge.

Ihe anyị masịrị bụ na ụkpụrụ bụ Rust dị ọcha na enweghị ihe ọ bụla sitere na ihe nchọgharị n’ime ya: mgbakọ na mwepụ maka ebe ihe ga-aga na mgbe ha ga-agbanwe, na onye na-agụ akara ala. Ọ nwere ule 13 nke na-agba ọsọ n’ime obere oge, ma ọ bụrụ na oge nke okirikiri ezighi ezi, ule na-ada ma ọ bụghị ka mmadụ hụ na ọ na-ele anya dị iche. Ihe dị ka otu akụkụ nke ihe dị ka ahịrị 1,070 nke Rust bụ isi nke a na-enyocha (na ule ya); nke fọdụrụ na-ese na akwa ugbo ma na-ahụ maka ihe omume òké.

Ibe ahụ na-adị mfe nke ukwuu: otu ihe akwa ugbo. Ma nbudata ya buru ibu. Modulu a mepụtara bụ ihe dị ka 254 KB (ihe dị ka 92 KB mgbe e compressịrị) tinyere ihe dị ka 28 KB nke JavaScript glue nke ngwá ọrụ owuwu na-emepụta. Ma e nwere ụgwọ anyị na-enwe mgbe anyị na-arụ ọrụ na ya:

• Ngwaọrụ nchikota. Ịrụ ọrụ chọrọ Rust, ebumnuche WebAssembly na ngwa ọrụ akara iwu nke ụdị ya ga-adabara nke ụlọ akwụkwọ ahụ kpọmkwem. Ihe omume anyị na-eme na mbụ bụ ịgba ule ma kwụsị ma ọ bụrụ na otu n’ime ha dara.
• Enweghị ohere keyboard ma ọ bụ onye na-agụ ihuenyo na obodo ndị dị iche iche. Canvas bụ foto. Nsụgharị SVG nwere 44 ntụpọ nwere ike ịdọrọ uche adịghịzi.
• Bekee naanị. A na-ede akara ngosi n’ime mmemme ahụ.
• Ịdị nro. Ụdị okirikiri ndò dị nro na-eji nzacha blur canvas, nke ọ bụghị ihe nchọgharị niile na-akwado. Anyị ejụghị Safari ule, ebe okirikiri ahụ nwere ike ịdị ike.

3. Flutter

N’okwu dị mfe: Flutter bụ ngwá ọrụ sitere na Google maka ịmepụta ngwa na-agba ọsọ na ekwentị, kọmputa na webụ site na otu koodu. Ọ naghị eji ihe owuwu ibe weebụ nke ya. Ọ na-ese ihe niile n’onwe ya. N’ebe a, map bụ obere ngwa egosiri n’ime ibe a, otu ngwá ọrụ ahụ na-enye ike ngwaọrụ mgbakọ ụgwọ ụgwọ.

Ọ na-ese map ahụ na onye na-ese eserese ahaziri iche, a na-egosikwa ya ebe a n’ime okpokoro. Flutter nwekwara ike ịmepụta ngwa ekwentị na desktọọpụ site na otu koodu ahụ, nke bụ isi okwu ya: dee map otu ugboro, gbaa ya na ọtụtụ ebe.

Ọ bụ otu echiche ahụ dị ka Rust map, ebugharịrị na Dart, nwere ule 11. Ihe dị ka ahịrị 1,100 gụnyere ule. Flutter na-enye obodo ọ bụla aka na ndị na-agụ ihuenyo dị ka bọtịnụ e nwere akara, nke ụdị canvas enweghị (anyị ejụghị ka ọ si arụ ọrụ nke ọma na onye na-agụ ihuenyo n’eziokwu). Ọ bụkwa nbudata kachasị ibu: ngwa ahụ bụ ihe dị ka 1.8 MB (ihe dị ka 535 KB mgbe e compress). Engine eserese Flutter bụ nbudata ọzọ, mana saịtị ahụ na-ekekọrịta otu oyiyi na kalkuletọ, ya mere onye ọbịa nke mepere kalkuletọ anaghị ebudata ya ọzọ. A na-etinye ederede ya na font saịtị ahụ, Merriweather, nke nchọgharị na-ebudata n’oge ịrụ ọrụ.

Ihe anyị chọpụtara

Otu ihe ọzọ gbasara ọsọ. N’ule anyị, SVG map na Rust map abụọ gara na ọsọ ntughari ihuenyo (ihe dị ka 120 frames kwa sekọnd na ihuenyo ule), ya mere ọsọ frame anaghị ekewa ha. Anyị ejụghị ọsọ frame Flutter, anyị ejụghịkwa ojiji batrị ma ọ bụ CPU, ya mere anyị enweghị ike ikwu nke dị mfe na ekwentị.

Ihe ndị mere anyị ịtụnanya

Ụfọdụ nkọwa dị mfe ịghara ịghọta nke ọma. Ndị mbipụta mbụ anyị mere eserese igodo na elekere na akụkụ nke map ahụ nke edobere, ya mere ha na-ebelata na ihuenyo nta ma na-ele anya obere karịa nke mbụ. Nke mbụ na-eme ka ha nwee nha na otu mkpụrụedemede nke ibe ahụ (rem, nke na-agbanwe na obosara ihuenyo). Ndị mbipụta ugbu a na-agụ nha ahụ site na ibe ahụ. Elekere ndị ahụ dị ichekwa: aka nke mbụ na-agagharị na nzọụkwụ nke nkeji iri na ise, ebe na nsụgharị Rust na Flutter ha na-agagharị na-aga n’ihu na-enweghị nkwụsị.

Ejighị mpaghara oge arụnyere. Ma Rust nke na-agbakọta na WebAssembly ma Dart anaghị ebu data mpaghara oge nke maara “Asia/Dubai”. Ha abụọ na-ajụ ihe nchọgharị kama, site na ọrụ Intl nke etinyere na ya, nke na-enyekwa oge nchekwa anyanwụ nke ọma.

Ha atọ na-ekekọrịta ntinye ha. Map Rust na Flutter na-agụ ndepụta obodo na ọdịdị ala site na ibe ha nọ, otu data ahụ nke map SVG na-eji. Gbanwee obodo, ma ha atọ gbanwee. Nke a pụtara na map ndị ahụ nwere ike ịrụ ọrụ naanị na ibe nke na-enye ha data.

Flutter web na-echeta. Flutter web na-etinye cache nke ya, ya mere mgbe anyị rụrụgharịrị ya, anyị ka na-ahụ ụdị ochie ruo mgbe anyị hichachara ya.

Nchịkọta anyị

Map SVG na-anọgide na ibe ụlọ. Maka eserese nke nha a ọ bụ nke kachasị mfe, dịrị mfe iji, e sụgharịrị ya, na ọ naghị achọ ihe ọ bụla iji wuo ya. Rust bụ onye na-esote nke na-adọrọ mmasị: ma ọ bụrụ na anyị chọrọ ka ụkpụrụ map ahụ bụrụ nke a pụrụ ịtụkwasị obi, ma ọ bụ chọọ ime mgbakọ siri ike na ihe nchọgharị, isi Rust nke a nwaleela bụ ụzọ dị mma iji mee ya. Flutter bara uru ma ọ bụrụ na map ahụ chọrọ ibi n’ime ngwa Flutter.

Nnwale anaghị achọ ịgbanwe ngwaahịa iji bụrụ nke bara uru ịrụ. Anyị mechara nwee nghọta doro anya nke ihe ụzọ ọ bụla na-eri, nkọwa nwaleela nke otu map si arụ ọrụ, na ibe ebe ị nwere ike ịhụ ha atọ niile n’onwe gị.

Ihe ndị guzobere ụlọ ọrụ anyị na-ewu na-esote

Ụlọ ọrụ kwụsie ike na-ahapụ oge maka echiche ndị ọzọ. Ewezuga EVnSteven, ndị guzobere ụlọ ọrụ anyị na-arụ ọrụ na ndị a:

Ịkpọ ụgbọ ala, na-ebido ngwa ngwa Kimem ↗ (opens in a new tab) Ọrụ ịkpọ ụgbọ ala maka Bahir Dar, Ethiopia, sitere n'aka onye guzobere Mekonnen Alemu. Ndị njem na-ahụ ọnụahịa ọnụ tupu ha edebanye, na-ekiri onye ọkwọ ụgbọala kacha nso na map, ma kwụọ ụgwọ metered n’aka na njedebe njem ahụ.

Ọrụ na-enweghị uru, mepere emepe StrayCats ↗ (opens in a new tab) Ọrụ sitere na David iji nyere ndị na-elekọta nwamba ụzọ, nwamba na-apụ apụ, ma ọ bụ nwamba ọ bụla, ọbụna ma nwamba ahụ bụrụ nkịta. Ọ ka nọ na usoro echiche, enweghị ngwa ugbu a, David ga-achọ echiche na nzaghachi gị. E nyere Saibo, 2010–2026.

Nlekọta ego, n'efu, na-ebido ngwa ngwa Effectivo ↗ (opens in a new tab) Nlekọta ego na-adịghị mma nwere ntụgharị, maka ndị na-eji ego aka. Debe ihe ị zụtara na taps ole na ole, gụọ ego dị na akpa gị, ma lelee ihe bara uru. Ntughari bụ na onye ọ bụla na-eji ego aka na-enyere ka ọ dịrị ndị ọzọ. N'efu na-enweghị mgbasa ozi, na-abịa na Android na iPhone, nwere beta na ngosi weebụ na-agba ugbu a.