Tebulu ọdịnaya[Zoo][Gosi]
N'ebe dị ugbu a dị ngwa ngwa, ike na asọmpi dijitalụ, ụlọ ọrụ kacha nwee ihe ịga nke ọma bụ ihe akaebe na ịbụ onye na-azụ ahịa bụ naanị atụmatụ na-adigide iji gbasaa azụmahịa. Ogologo nlebara anya nke ndị ọrụ na-ebelata, na-amanye ndị ọchụnta ego ka ha chọta ụzọ ọhụrụ na nke ka mma iji nye ndị na-azụ ahịa ha ahụmịhe enweghị nkebi.
Ọ bụrụ na ịchọrọ ịmepụta ahụmịhe na-adọrọ adọrọ, pụrụ iche, na enweghị nkebi maka ndị ọrụ gị, Ngwa Otu Page (SPAs) bụ ụzọ ị ga-esi gaa. Ọ bụ n'ihi nke a ka ọtụtụ ụlọ ọrụ na-amalite ịrụpụta akụkụ nke ngwa ịntanetị ha na-eji ụdị webụ ọhụrụ akpọrọ Single Page Application.
A na-ejikwa SPA mepụta Google na Facebook, behemoth abụọ nke ngwa ha na-enye ike ịntanetị gị kwa ụbọchị na ọrụ mgbasa ozi.
Blọọgụ a ga-ekpuchi akụkụ niile nke ngwa nwere otu ibe, gụnyere uru ya, ọdịiche dị n'etiti otu ibe na ngwa nwere ọtụtụ ibe, usoro SPA, na ọtụtụ ndị ọzọ. Ka anyị malite!
Kedu ihe bụ ngwa otu ibe?
Ngwa otu ibe (SPA) bụ otu ibe (ya mere aha ahụ) nwere ọtụtụ data nke na-adị otu na naanị ntakịrị ntakịrị mkpa ịgbanwe ozugbo.
Ngwa nwere otu ibe (SPA) bụ ibe weebụ, webụsaịtị, ma ọ bụ ngwa webụ nke na-agba ọsọ kpamkpam n'ime ihe nchọgharị na-ebu naanị otu akwụkwọ. Ọ dịghị achọ ihu na-enye ume ọhụrụ mgbe a na-eji ya eme ihe, na ọtụtụ ihe na-anọgide na-agbanweghị ebe naanị obere akụkụ ya chọrọ imelite.
Mgbe a ga-agbanwe ọdịnaya, SPA na-eji Javascript API mee ya. Ndị ọrụ nwere ike ịnweta webụsaịtị na-enweghị nbudata ibe zuru oke na data sitere na sava n'ụzọ dị otú a.
N'ihi ya, arụmọrụ na-akawanye mma ma ị na-enwe mmetụta na ị na-eji mmemme obodo. Ọ na-enye ndị na-azụ ahịa ahụmịhe ịntanetị dị ike karịa. Ndị SPA na-eme ka ọ kwụ ọtọ, na-arụ ọrụ ma dị mfe maka ndị ọrụ ịnọ n'otu ebe dijitalụ na-enweghị mgbagwoju anya.
Eserese dị n'okpuru na-egosi ọnọdụ nke onye ọrụ na-emekọrịta ihe na ihe nchọgharị ha, nke na-eme ka API jụọ ọrụ ahụ ozugbo. Ihe nchọgharị ahụ na-eziga ajụjụ API ozugbo na ọrụ ahụ ka ọ nwetasịrị Javascript na koodu isi HTML n'aka onye ahịa. N'ihi na a na-eme ihe niile ozugbo na ihe nchọgharị ahụ, ihe nkesa ngwa ahụ anaghị eziga ajụjụ API na ọrụ ahụ.
Kedu otu ngwa otu ibe si arụ ọrụ?
Ngwa nwere otu ibe nwere ụkpụrụ ụlọ kwụ ọtọ. A na-eji teknụzụ nsụgharị nke ndị ahịa na akụkụ nkesa. Ka anyị kwuo na ịchọrọ ịga na otu webụsaịtị.
Mgbe ị pịnyere URL ya n'ime ihe nchọgharị gị iji rịọ ohere, ihe nchọgharị ahụ na-arịọ arịrịọ na sava, nke na-eji akwụkwọ HTML zaa. Ihe nkesa na-ebuga ọdịnaya HTML naanị maka arịrịọ mbụ mgbe ị na-eji SPA, yana data JSON maka ajụjụ n'ọdịnihu.
Nke a pụtara na kama ibugharị ibe weebụ niile, SPA ga-ewughachi ọdịnaya ibe dị ugbu a. N'ihi ya, ọ dị ntakịrị mkpa ibugharị ugboro ugboro, a na-emeziwanye arụmọrụ. Njirimara a na-enye ohere ka SPA rụọ ọrụ n'otu aka ahụ na ngwa ala.
Ngwa nwere ọtụtụ ibe abụghị otu ngwa otu ibe (MPAs). Mgbe onye ọrụ na-arịọ data ọhụrụ, nke ikpeazụ bụ mmemme webụ nwere ọtụtụ ibe ebugharịrị.
Ọzọkwa, SPA nwere ike were ogologo oge ibu ibu na mbụ, mana ozugbo ebukọrọ ya, ha na-enye arụmọrụ ọsọ ọsọ yana igodo enweghị nkebi. MPA nwere ike ịdị umengwụ ma chọọ ịntanetị ọsọ ọsọ, ọkachasị mgbe ị na-eji ngwa eserese. Amazon na Google Docs bụ ihe atụ abụọ nke MPA.
Ngwa otu ibe Vs Ngwa ọtụtụ ibe
Atụmatụ ngwa multi-page (MPA) anaghị eme ka ndị otu mmepe gị nwee ihe ọmụma Javascript ọ bụla (ọ bụ ezie na njikọta nke ihu na azụ na-egosi na saịtị na-ewe ogologo oge iji wuo). Site n'ịgbakwunye ibe ọzọ, ị nwere ike itolite ihe ahụ dịka masịrị gị, yana n'ihi na ozi dị na ibe ọ bụla kwụ ọtọ, Nchọgharị Nchọgharị Nchọgharị (SEO) na-adịkarị mfe.
MPA, n'aka nke ọzọ, na-adị nwayọọ karịa iji ebe ọ bụ na ibe ọhụrụ ọ bụla ga-eburịrị site na ọkọ. Ọ bụrụ na ọdịnaya webụsaịtị gị bụ (karịsịa) naanị ọgụgụ, mana MPA nwere ike ịbụ naanị ihe ịchọrọ. Uru bụ isi nke ngwa otu ibe bụ ngwa ngwa ha.
Ọzọkwa, SPA dị mma n'ịkwasa ọrụ dị ukwuu karịa MPA, ha na-echekwa ozi ka enwere ike iji mmemme ahụ na-anọghị n'ịntanetị.
Ihe ọghọm kachasị dị na SPA bụ na ọdịdị dị ike nke ọdịnaya ha na-eme ka SEO na nchọpụta siri ike karị. Crawlers na igwe nchọta ewepụtala iji nweta ụdị ngwa a nke ọma ka ọtụtụ ụlọ ọrụ na-anabata SPA.
Nke ahụ kwuru, ngwa nwere otu ibe esichaghị mma karịa ngwa ibe nwere ọtụtụ peeji, ma ọzọ. Usoro abụọ a nwere uru na ọghọm.
Uru ndị MPA nwere karịa SPA ga-amalite ịla azụ mgbe a na-emezigharị crawler webụ na nrụtụ aka na mbụ metụtara ngwa otu ibe, na nke ikpeazụ ga-abụ n'ezie ụkpụrụ maka ngwa ịntanetị ọgbara ọhụrụ.
Otu ibe akwụkwọ Frameworks
Ọ bụrụ na ị kwubiri na ịmepụta SPA bụ ụzọ kacha mma iji gboo mkpa ụlọ ọrụ gị, ị ga-achọ iwulite ya na usoro SPA siri ike. Anyị achịkọtala ndepụta kacha mma otu ibe akwụkwọ maka ngwa weebụ bara ụba nke nwere ike ijikwa nnukwu akụrụngwa ngwa. Usoro nke ọ bụla nwere njirimara na ike ya pụrụ iche.
1. Emeghachi
N'ebe a na-agbanwe agbanwe nke oge a, mgbe ụwa na-agbasi mbọ ike na mgbanwe dijitalụ, òtù dị iche iche etinyela Scalability & Mgbanwe n'ime ebe a na-ekwusi ike na mbụ site na mmalite, nke bụbu echiche emechaa. N'ihi ya, iburu akụkụ a dị mkpa n'uche mgbe ị na-emepụta ngwa nwere otu ibe bụ ihe dị mkpa.
ReactJS bụ ọmarịcha usoro iji ma ọ bụrụ na scalability na mgbanwe bụ ihe kacha mkpa maka ụlọ ọrụ gị. Idozi ngwa nke otu ibe emepụtara site na iji React dị nnọọ mfe n'ihi atụmatụ dabere na mpaghara ya.
Agụnyere DOM mebere na ibe ReactJS. Ọ na-enye ohere ka ndị otu mmepe soro ma melite mgbanwe na-enweghị emetụta akụkụ ndị ọzọ nke osisi ahụ, na-ekwe ka ngwa ahụ dịkwuo mfe.
Maka ọba akwụkwọ ya naanị ya, ReactJS na-eme mgbanwe karịa usoro ndị ọzọ, na-enye ohere maka oge nzaghachi ngwa ngwa yana mee ka ọ bụrụ usoro kachasị mma maka ịmepụta SPA. N'ihi na akụkụ abụọ ahụ na-eji ReactJS, usoro ahụ na-enye ohere maka ịkekọrịta ibu n'etiti ihe nkesa na onye ahịa.
2. Mmụọ
Ụlọ ọrụ na-ezute ihe isi ike ugboro ugboro mgbe ha na-agbalị ịkwanye weebụ iji rụzuo ihe ndị ọzọ: ngwa 'Ọrụ.' Saịtị taa nwere atụmatụ dị iche iche karịa ka ọ dị na mbụ, na-eme ka ọ na-esiri ndị azụmaahịa ike inweta nnukwu arụmọrụ n'ofe ngwaọrụ dị iche iche.
N'ihi ya, mgbe ị na-ahọrọ usoro ngwa ngwa otu ibe, arụmọrụ dị oke mkpa. A bịa na ọsọ ngwa otu ibe, ọ nweghị usoro dị mma karịa AngularJS.
Ọrụ njide data nke AngularJS na-ezere ọtụtụ koodu onye nrụpụta ga-eme ma ọ bụghị ya. N'ihi ya, iji Angular mepụta ngwa nwere otu ibe chọrọ ahịrị koodu ole na ole ma na-enye ọsọ dị egwu.
Amara ngwa dabere na AngularJS maka ịdị ngwa ibu. Emere nke a ka o kwe omume site na arụrụ ọrụ akụrụngwa akụrụngwa AngularJS, nke na-enye nkewa koodu akpaaka. Ọ na-enye ndị ọrụ ohere ibu naanị koodu arịrịọ maka nlele. SPA wuru na usoro AngularJS nwere ike ịgba ọsọ n'elu ikpo okwu ọ bụla.
3. Anya
VueJS bụ usoro kachasị mma maka mmepe ngwa webụ otu ibe mgbe ejikọtara ya na ọba akwụkwọ nkwado ziri ezi yana ngwa ngwa nke oge a. Vue.js na-akwado nzikọrịta ozi ụzọ abụọ site n'ime ka ngọngọ HTML dị mfe ijikwa ekele maka imewe MVVM ya.
Njikọ data ụzọ abụọ bụ ọrụ na-ewu ewu na usoro ndị ọzọ dị ka React.js. A na-akpọkwa Vue.js dị ka usoro reactive ebe ọ na-emeghachi omume na mgbanwe na data. A na-ahụta Vue.js dị ka ihe kacha mma nke ụwa abụọ a, ijikọta React na Angular.
Ọ na-eji Virtual DOM ma dabere na akụrụngwa, dị ka React, na-eme ya ngwa ngwa pụrụ iche. Ọ na-enye, agbanyeghị, na-enye ntuziaka na njikọ data ụzọ abụọ, na-eme ka ọ bụrụ usoro mmeghachi omume dị ka Angular. Vue.js abụghị ụkpụrụ ma ọ bụ ọbá akwụkwọ.
Ọ na-enye ikike nchikota zuru oke maka iwulite SPA, ọ dịkwa mfe itinyekwu ndị ọzọ, dị ka njikwa steeti na Routing.
4. Ọkpụkpụ azụ.JS
Ọ bụ otu n'ime usoro SPA kachasị ewu ewu maka iwulite ngwa weebụ nwere ike ime mgbanwe, ọ dabere na ụkpụrụ mmebe MVP. Ọ nwere rawụta, ụdị, ihe omume, nlele, mkpokọta, yana ọtụtụ atụmatụ ndị ọzọ dị egwu na-eme ka ịmepụta SPA dị mfe na ngwa ngwa.
Backbone.JS bụ usoro ewu ewu maka ịmepụta ngwa nwere otu ibe. Usoro nlele ihe nlereanya ya na-eme karịa naanị inyere ndị mmepe aka ịhazi akụrụngwa JS ha. N'ụzọ bụ isi, a na-eji ya machibido arịrịọ HTTP na sava wee mee ka ọ dị mfe nghọta onye ọrụ interface aghụghọ.
Ọ bụ usoro tozuru oke maka iwu otu ibe ngwa weebụ ya na nnukwu obodo. Ọtụtụ ọba akwụkwọ, obere nha, koodu nkịtị, nkwurịta okwu mmemme na-akpali akpali, na ụkpụrụ ụdị koodu bụ naanị ole na ole n'ime njirimara ya dị ịtụnanya.
5. Mmmmmmmmmmmm
Ihe interface onye ọrụ (UI) bụ akụkụ dị oke mkpa nke mmemme ọ bụla na-ekewapụ gị ngwa ngwa na asọmpi gị. Ọ bụrụ na ọ nwere ike izipu ngwa ọrụ niile na onye ahịa, a na-ahụta ngwa otu ibe dị ka nke kacha arụ ọrụ nke ọma. N'ihi ya, ọ na-ebuli arụmọrụ netwọk ahụ n'ozuzu ya.
Ọ bụrụ na otu n'ime ihe na-echegbu ngwa gị bụ interface onye ọrụ, ị ga-atụle iji EmberJS dị ka ụkpụrụ. EmberJS, dị ka AngularJS, nwere njikọ data ụzọ abụọ, nke na-eme ka echiche na ihe nlereanya na-emekọrịta ihe mgbe niile.
Ọ ga-ekwe omume iji modul Ember FastbootJS mee ka DOM na-eme ihe nkesa, na-ebute UI dị mgbagwoju anya. EmberJS, nke arụnyere na njide ụzọ abụọ, na-edozi UI ka mgbanwe data.
N'ihi ya, ọ dị mfe ịkọwapụta interface onye ọrụ na-aghọta mgbe a ga-emelite. EmberJS bụ usoro mepere emepe nwere echiche siri ike na-akwado nnwere onwe ka ukwuu. N'ihi ya, ọ bụ ezigbo nhọrọ maka ịmepụta ngwa weebụ nwere otu ihu akwụkwọ nwere nnukwu ọrụ. Nordstrom, Kickstarter, LinkedIn, Netflix, na ọtụtụ nnukwu ụdị ndị ọzọ na-eji usoro a.
Uru nke SPA
1. Ahụmahụ onye ọrụ ka mma
Ahụmahụ onye ọrụ ka mma dị oke mkpa maka ịga nke ọma ngwa. Dị ka ọtụtụ ọnụ ọgụgụ si kwuo, ndị ọbịa na-ahapụ ibe weebụ ndị dị umengwụ ma sie ike iji. Ndị ọrụ agaghị echere ka ihe zuru ezu nweta ume ma ọ bụrụ na ha chọrọ naanị akụkụ ya site na iji SPA. Kama, ndị ahịa nwere ike nweta ozi ha chọrọ ngwa ngwa, nke na-eme ka ahụmịhe SPA ha dịkwuo mma.
2. Mma ọsọ
Ngwa weebụ ga-adịrịrị ngwa ngwa ma ghara igbu oge nke ndị ọrụ; ma ọ bụghị ya, ndị mmadụ ga-achọ ebe dị mma karị. N'ihi na webụsaịtị zuru ezu agaghị enwe ume ọhụrụ yana naanị data dị na mpaghara ọdịnaya achọrọ na-agbanwe, SPA na-enye oge nzaghachi ngwa ngwa. N'ihi ya, arụmọrụ ngwa weebụ na-akawanye mma nke ukwuu.
3. Iji obere akụ eme ihe
Ngwa otu ibe na-eji obere bandwidth n'ihi na a na-ebugo ibe ya naanị otu ugboro. Ha na-arụkwa ọrụ na mpaghara nwere njikọ ịntanetị dị nwayọ, na-eme ka ha nweta onye ọ bụla. Ọzọkwa, n'adịghị ka MPA dị ka Google Docs, ha na-arụ ọrụ na-anọghị n'ịntanetị, na-echekwa data gị, yabụ na ịgaghị enye ha njikọ ịntanetị mgbe niile iji lelee ma rụọ ọrụ na ha.
4. Ndokwa dị irè
N'ihi na ọ na-eziga naanị otu arịrịọ na ihe nkesa wee melite data nke ọzọ, ngwa otu ibe nwere ike ịchekwa data ngwa ngwa. N'ụzọ dị otú a, ọ ga-enwe ike ịrụ ọrụ ọ bụrụgodị na ị jikọọghị na ịntanetị. Ọ bụrụ na njikọ onye ọrụ efunahụ, data mpaghara nwere ike imekọrịta na ihe nkesa ozugbo njikọ ahụ eweghachiri.
5. Debugging dị mfe.
Imebi ngwa na-achọpụta na ọ nweghị ihe nwere ike igbochi ya ịrụ ọrụ kachasị mma site n'ịchọpụta na mezie ntụpọ na nsogbu ndị nwere ike ime ka ọ kwụsịlata. N'ihi na ejiri usoro ndị a ma ama dị ka React, Angular, na Vue.js mepụta ha, Ngwa otu ibe dị mfe iji degharịa na Google Chrome. Ngwa ibe, data, na usoro netwọk nwere ike nyochaa ngwa ngwa ma nyochaa ya.
6. Ndakọrịta gafee ọtụtụ nyiwe
Iji otu codebase, ndị mmepe nwere ike ịmepụta ngwa na-arụ ọrụ na sistemụ arụmọrụ ọ bụla, ngwaọrụ ma ọ bụ ihe nchọgharị. N'ihi ya, ọ na-eme ka ahụmahụ ndị ahịa dịkwuo mma site n'ikwe ka ha nweta SPA ebe ọ bụla ha họọrọ. Ọzọkwa, ndị mmepe nwere ike ịmepụta ngwa bara ụba nwere njiri dị mfe. Dịka ọmụmaatụ, mgbe ha na-emepụta ngwá ọrụ na-edezi ọdịnaya, ha nwere ike jikọta ọnụ ọgụgụ dị adị.
Mgbanwe nke SPA
1. Online egwu
Ihe egwu dị n'ịntanetị dị ka scripting saịtị (XSS) dị mfe na SPA karịa MPA. Ndị na-awakpo nwere ike iji XSS mebie ngwa webụ site n'itinye ederede n'akụkụ ndị ahịa n'ime ya. Ọzọkwa, anaghị amanye mmachi ohere na ọkwa ọrụ. Ọ bụrụ na ndị nrụpụta emeghị usoro, data nwere mmetụta na arụmọrụ nwere ike ikpughe.
2. Akụkọ ihe nchọgharị gị
Ndị SPA adịghị echekwa akụkọ ihe nchọgharị. Ọ bụrụ na ịgafe n'oge gara aga maka ozi ọ bụla bara uru, naanị ihe ị ga-ahụ bụ njikọ SPA na webụsaịtị zuru ezu. Na mgbakwunye, ị nweghị ike ịlaghachi azụ na SPA. Ọ bụrụ na ijiri bọtịnụ azụ, a ga-eziga gị na ibe weebụ ebugoro na mbụ karịa steeti gara aga. Iji HTML5 History API, Otú ọ dị, enwere ike imeri ntụpọ a.
3. Oge ibu mbụ
Ọ bụ ezie na ndị SPA bụ ndị a ma ama maka ọsọ na arụmọrụ ha, ọ na-ewe ogologo oge maka saịtị ahụ dum ibu. Ọ nwere ike iwe ụfọdụ ndị ọrụ iwe, mee ka ha ghara iji ngwa ahụ ọzọ.
4. nsonaazụ SEO na-adịghị arụ ọrụ
Ihe owuwu nke SPA nwere otu ibe nwere otu URL. Ọ na-egbochi ikike nke SPA iji nweta site na njikarịcha search engine (SEO). N'ihi na enwere asọmpi dị ukwuu n'ebe ahụ, atụmatụ SEO nwere ike inyere gị aka ịkwalite ọkwa saịtị gị na nsonaazụ ọchụchọ.
O siri ike ịkwalite SEO maka na enwere naanị otu URL na-enweghị mmelite ma ọ bụ adreesị pụrụ iche. Ndekọ ndepụta, nyocha siri ike, njikọ pụrụ iche, metadata na atụmatụ ndị ọzọ na-efu. Saịtị ndị dị otú ahụ na-esiri ike nyocha site na bots ọchụchọ, na-eme ka njikarịcha sie ike.
mmechi
Ọ bụrụ na ịchọrọ ịmepụta ngwa na-anabata, ngwa ngwa na njirimara bara ụba maka ịkparịta ụka n'socialntanet, Azụmahịa SaaS, mmelite ndụ, na ihe ndị ọzọ, Ngwa Otu Page (SPAs) nwere ike inye aka.
N'ihi ya, nyochaa ebumnobi gị na ebumnuche gị iji hụ ma SPA ọ dị gị mma, wee họrọ usoro Javascript ka ịmalite.
Ebumnobi a bụ inyocha ikike nke SPA zuru oke ma ọ bụrụ na ụlọ ọrụ chọrọ iwupụta ngwaahịa na ebumnuche njedebe nke mkpughe ka mma, ntinye aka ndị ọrụ siri ike, yana nrụpụta dị elu maka imezu ihe omume ma ọ bụ nyocha data na mmekọrịta.
Nkume a-aza