Isiqulatho[Fihla][Bonisa]
Kwimeko yanamhlanje ekhawulezayo, eguquguqukayo, kunye nokhuphiswano lwedijithali, eyona mibutho iphumeleleyo bubungqina bokuba ukuba ngabathengi-centric kuphela kwesicwangciso esizinzileyo sokwandisa ishishini. Ingqwalasela yabasebenzisi iyaqhubeka isihla, nto leyo enyanzela amashishini ukuba afumane iindlela ezintsha nezingcono zokubonelela ngamava angenamthungo kubathengi bawo.
Ukuba ufuna ukwenza ukuzibandakanya, okwahlukileyo, kunye namava angenamthungo kubasebenzisi bakho, iSicelo sePhepha elinye (ii-SPAs) yindlela yokuhamba. Kungesi sizathu ke ukuba iinkampani ezininzi ziqala ukwenza izinto zeapps zazo ezikwi-intanethi zisebenzisa uyilo olutsha lwewebhu olubizwa ngokuba yiSicelo sePhepha elinye.
Ii-SPAs zikwasetyenziselwa ukwenza uGoogle kunye noFacebook, ezi zibhehemoth zimbini eziapps zinika amandla idosi yakho yemihla ngemihla ye-intanethi kunye nomsebenzi wemidiya yoluntu.
Le bhlog iya kugubungela zonke izinto zesicelo sephepha elinye, kubandakanya ukufaneleka kwayo, umahluko phakathi kwephepha elinye kunye nesicelo samaphepha amaninzi, izikhokelo ze-SPA, kunye nokunye okuninzi. Masiqale!
Yintoni usetyenziso lwePhepha elinye?
Isicelo sephepha elinye (i-SPA) liphepha elinye (ngaloo ndlela igama) elinedatha eninzi ehlala ifana kwaye kuphela amasuntswana ambalwa afuna ukutshintshwa kanye.
Isicelo esinephepha elinye (SPA) liphepha lewebhu, iwebhusayithi, okanye inkqubo yewebhu esebenza ngokupheleleyo ngaphakathi kwisikhangeli kwaye ilayisha kuphela uxwebhu olunye. Ayifuni kuhlaziywa kwephepha ngexesha lokusetyenziswa, kwaye uninzi lwemathiriyeli ihlala ingatshintshi ngelixa inxalenye encinci yayo ifuna ukuhlaziywa.
Xa umxholo kufuneka utshintshwe, i-SPA isebenzisa iJavaScript APIs ukwenza njalo. Abasebenzisi banokufikelela kwiwebhusayithi ngaphandle kokukhuphela iphepha elitsha elipheleleyo kunye nedatha evela kumncedisi ngale ndlela.
Ngenxa yoko, ukusebenza kuyaphucuka kwaye ufumana imvakalelo yokuba usebenzisa inkqubo yemveli. Ibonelela abathengi ngamava aguqukayo ngakumbi kwi-intanethi. Ii-SPAs ziyenza iqonde, isebenze, kwaye ilula kubasebenzisi ukuba babe kwindawo enye, engantsonkothanga yedijithali.
Lo mzobo ungezantsi ubonisa imeko apho umsebenzisi anxibelelana nesikhangeli sakhe, ethi emva koko yenze imibuzo nge-API kwinkonzo ngokuthe ngqo. Isikhangeli sithumela imibuzo ye-API ngqo kwinkonzo emva kokufumana iJavaScript kunye nekhowudi yemvelaphi yeHTML kumxhasi. Kuba yonke into yenziwa ngokuthe ngqo kwisikhangeli, iseva ye-app ayikhe ithumele imibuzo ye-API kwinkonzo.
Zisebenza njani ii-Aplikheshini ezinephepha elinye?
Usetyenziso olunephepha elinye linoyilo oluthe ngqo. Icala lomxhasi kunye necala lonikezelo lwetekhnoloji zisetyenziswa zombini. Masithi unqwenela ukuya kwiwebhusayithi ethile.
Xa uchwetheza i-URL yayo kwisikhangeli sakho ukuze ucele ukufikelela, isikhangeli senza isicelo kwiseva, ephendula ngoxwebhu lweHTML. Umncedisi unikezela ngomxholo we-HTML kuphela kwisicelo sokuqala xa usebenzisa i-SPA, kunye nedatha ye-JSON yemibuzo yexesha elizayo.
Oku kuthetha ukuba endaweni yokulayisha kwakhona lonke iphepha lewebhu, i-SPA iya kwakha kwakhona umxholo wephepha langoku. Ngenxa yoko, akukho mfuneko encinci yokulayisha kwakhona rhoqo, kwaye ukusebenza kuphuculwe. Eli nqaku livumela i-SPA ukuba isebenze ngokufanayo kwi-app yemveli.
Usetyenziso lwamaphepha amaninzi alufani nosetyenziso lwephepha elinye (MPAs). Xa umsebenzisi ecela idatha entsha, ezokugqibela ziinkqubo zewebhu ezinamaphepha amaninzi aphinda alayishwe.
Ngaphaya koko, ii-SPAs zinokuthatha ixesha elide ukulayisha ekuqaleni, kodwa xa sele zilayishiwe, zibonelela ngokusebenza okukhawulezileyo kunye nokuhamba ngokungenamthungo. Ii-MPA zinobuvila kwaye zifuna i-intanethi enesantya esiphezulu, ngakumbi xa usebenzisa iinxalenye zegraphical. IAmazon kunye neGoogle Docs yimizekelo emibini yeeMPAs.
Isicelo esinePhepha elinye Vs iSicelo saMaphepha amaninzi
Isicwangciso esiqhelekileyo se-multi-page app (MPA) asifuni naluphi na ulwazi lweJavaScript kwiqela lakho lophuhliso (nangona udibaniso lwangaphambili nasemva luthetha ukuba iisayithi zithatha ixesha elide ukwakha). Ngokungongeza elinye iphepha, unokukhulisa izinto eziphathekayo njengoko uthanda, kwaye ngenxa yokuba ulwazi kwiphepha ngalinye li-static, i-Search Engine Optimization (SEO) ngokuqhelekileyo ilula.
IiMPA, kwelinye icala, zicotha kakhulu ukusebenzisa kuba iphepha ngalinye elitsha kufuneka lilayishwe ukusuka ekuqaleni. Ukuba umxholo wewebhusayithi yakho (ubukhulu becala) ufunda kuphela, nangona kunjalo, iMPA inokuba yiyo yonke into oyifunayo. Inzuzo esisiseko yezicelo zephepha elinye kukukhawuleza kwazo.
Ngaphaya koko, ii-SPA zingcono kakhulu ekunikezeni umsebenzi obanzi kunee-MPA, kwaye zigcina ulwazi ukuze inkqubo isetyenziswe ngaphandle kweintanethi.
Eyona nto ingathandekiyo ibaluleke kakhulu kwii-SPAs kukuba ubume obuguquguqukayo bomxholo wabo benza i-SEO kunye nokufunyanwa nzima ngakumbi. Abakhasa kunye neenjini zokukhangela ziye zavela ukuze zijongane ngcono nolu hlobo lwe-app njengoko imibutho emininzi isamkela ii-SPA.
Oko kuthethiweyo, ii -apps zephepha elinye azikho phezulu kuneapps ezinamaphepha amaninzi, kwaye ngokuchaseneyo. Zombini iindlela zobugcisa zineenzuzo kunye nezingeloncedo.
Izibonelelo zeeMPAs ngaphezulu kwe-SPAs ziyakuqala ukuncipha xa isikhasi sewebhu kunye neenkxalabo zesalathiso ebezifudula zinxulunyaniswa nezicelo zephepha elinye zilungiswa, kwaye le yokugqibela iya kuba yinto eqhelekileyo kwiiapps zanamhlanje ze-intanethi.
IiNkqubo zeSicelo sephepha elinye
Ukuba uye wagqiba kwelokuba ukwenza i-SPA yeyona ndlela ilungileyo yokuhlangabezana neemfuno zenkampani yakho, kuya kufuneka uyakhele kwisikhokelo esiluqilima se-SPA. Siqulunqe uluhlu lwezona zikhokelo zesicelo zephepha elinye ezityebileyo zewebhu ezinokulawula ulwakhiwo olukhulu lwesicelo. Isakhelo ngasinye sineseti yaso eyodwa yeempawu kunye nesakhono.
1. usabela
Kwimeko yanamhlanje eguquguqukayo yedijithali, xa iglowubhu ityhalela ngamandla kwinguqu yedijithali, imibutho ibethelele iScalability & Flexibility kwiindawo zayo zogxininiso kwasekuqaleni, ebifudula iyingcinga yamva. Ngenxa yoko, ukugcina olu phawu lubalulekileyo engqondweni ngelixa uphuhlisa isicelo sephepha elinye kuyimfuneko.
I-ReactJS sisikhokelo esimangalisayo esinokusisebenzisa ukuba ukulinganisa kunye nokuguquguquka zizinto eziphambili eziphambili kwinkampani yakho. Ukugcinwa kwesicelo sephepha elinye elenziwe kusetyenziswa iReact kulula kakhulu ngenxa yoyilo olusekwe kwicandelo.
I-DOM ebonakalayo ibandakanyiwe kwiphepha le-ReactJS. Ivumela iqela lophuhliso ukuba lilandele kwaye lihlaziye utshintsho ngaphandle kokuchaphazela ezinye iinxalenye zomthi, ukuvumela ukuba isicelo sibe bhetyebhetye ngakumbi.
Kumathala eencwadi ayo azimeleyo, i-ReactJS iguquguquka ngakumbi kunezinye izikhokelo, ivumela amaxesha okuphendula akhawulezayo kwaye iyenze ibe yeyona nkqubo ilungileyo yokuphuhlisa ii-SPA. Ngenxa yokuba omabini amacala asebenzisa i-ReactJS, isakhelo sivumela ukwabelana ngomthwalo phakathi komncedisi kunye nomxhasi.
2. emboxo
Amashishini adibana nobunzima obuninzi xa ezama ukutyhala iwebhu ukuba ifezekise ngakumbi: isicelo 'Ukusebenza.' IiSayithi namhlanje zineempawu ezahlukileyo kunanini na ngaphambili, zenza kube nzima kumashishini ukuba asebenze kakuhle kuzo zonke izixhobo ezininzi.
Ngenxa yoko, ngelixa ukhetha inkqubo yesicelo sephepha elinye, ukusebenza kubalulekile. Xa kuziwa kwisantya sesicelo sephepha elinye, akukho sikhokelo singcono kune-AngularJS.
Umsebenzi obophelelayo wedatha we-AngularJS unqanda ikhowudi eninzi ekufuneka umphuhlisi ayenze ngenye indlela. Ngenxa yoko, ukusebenzisa i-Angular ukwenza isicelo sephepha elinye sidinga imigca embalwa yekhowudi kwaye ibonelela ngesantya esibalaseleyo.
Izicelo ezisekelwe kwi-AngularJS ziyaziwa ngokukhawuleza ukulayisha. Oku kwenziwa ukuba kube nokwenzeka ngumsebenzi we-router yecandelo le-AngularJS, ebonelela ngokwahlukana kwekhowudi ezenzekelayo. Ivumela abasebenzisi ukuba balayishe nje ikhowudi yomceli yokujonga. I-SPA eyakhiwe ngesakhelo se-AngularJS inokusebenza nakweliphi na iqonga.
3. Vue
I-VueJS sesona sikhokelo sikhulu sophuhliso lwesicelo sewebhu esinephepha elinye xa sidityaniswe namathala eencwadi axhasayo achanekileyo kunye nezixhobo zangoku. I-Vue.js iququzelela iindlela ezimbini zonxibelelwano ngokwenza iibhloko ze-HTML zibe lula ukulawula ngokubulela kuyilo lwayo lwe-MVVM.
Indlela ezimbini yokubophelela kwedatha kukusebenza okungadumanga kwezinye izikhokelo ezifana neReact.js. I-Vue.js yaziwa njengesakhelo esisebenzayo njengoko isabela kutshintsho lwedatha. I-Vue.js ithathwa njengeyona nto ibalaseleyo kuwo omabini amazwe, ukudibanisa Ukusabela kunye ne-Angular.
Isebenzisa i-DOM ebonakalayo kwaye isekwe kwicandelo, njengeReact, iyenza ikhawuleze kakhulu. Nangona kunjalo, ibonelela ngezikhokelo kunye neendlela ezimbini zokubopha idatha, iyenza isakhelo esisebenzayo njenge-Angular. I-Vue.js ayisosikhokelo okanye ithala leencwadi.
Ibonelela ngendibaniselwano egqibeleleyo yesakhono sokwakha ii-SPA, kwaye kulula ukongeza ngaphezulu, njengoLawulo lweLizwe kunye noNdlela.
4. Umqolo.JS
Sesinye sesakhelo se-SPA esidumileyo sokwakha ii-apps zewebhu eziguquguqukayo, kwaye isekelwe kwipatheni yomyili we-MVP. Inomzila, iimodeli, iziganeko, iimbono, ukuqokelela, kunye nokubulawa kwezinye izinto ezintle ezenza ukudala ii-SPA zibe lula kwaye zikhawuleze.
I-Backbone.JS sisikhokelo esidumileyo sokwenza izicelo zephepha elinye. Isakhelo sokujonga imodeli senza okungakumbi kunokuncedisa nje abaphuhlisi ukuba bamise iziseko zabo ze-JS. Ngokusisiseko, isetyenziselwa ukunqanda izicelo ze-HTTP kumncedisi kunye nokwenza lula ukuntsonkotha Indawo yomsebenzisi ziyilo.
Sisakhelo esivuthiweyo sokwakha iphepha elinye izicelo zewebhu noluntu olukhulu. Iitoni zamathala eencwadi, ubungakanani obuncinci, ikhowudi engabonakaliyo, unxibelelwano oluqhutywa sisiganeko, kunye nemimiselo yesimbo sokubhala zizinto ezimbalwa zeempawu zayo ezimangalisayo.
5. Ember
Ujongano lomsebenzisi (UI) yinxalenye ebalulekileyo yayo nayiphi na inkqubo ekwahlula ngokukhawuleza kukhuphiswano lwakho. Ukuba inokuthumela lonke ujongano lomsebenzisi kumxhasi, isicelo sephepha elinye sithathwa njengesona sisebenzayo. Ngenxa yoko, inyusa ukusebenza kwenethiwekhi iyonke.
Ukuba enye yeenkxalabo eziphambili zeapp yakho lujongano lomsebenzisi, kufuneka ucinge ngokusebenzisa i-EmberJS njengesakhelo. I-EmberJS, njenge-AngularJS, ineendlela ezimbini zokubopha idatha, eqinisekisa ukuba umbono kunye nemodeli zihlala zihambelana.
Kuyenzeka ukukhuthaza unikezelo lwe-server-side DOM ngemodyuli ye-Ember FastbootJS, okukhokelela kwii-UI ezintsonkothileyo ezingcono. I-EmberJS, eyakhelwe kwindlela ezimbini zokubopha, ilungisa i-UI njengoko utshintsho lwedatha.
Ngenxa yoko, kulula ukuchaza ujongano lomsebenzisi oluqondayo ukuba luhlaziywa nini. I-EmberJS sisikhokelo esivulelekileyo esinezimvo ezinamandla ezikhuthaza inkululeko enkulu. Ngenxa yoko, lukhetho olulungileyo lokudala i-apps yewebhu enephepha elinye elinobutyebi obunomsebenzi obanzi. I-Nordstrom, i-Kickstarter, i-LinkedIn, i-Netflix, kunye nokubulawa kwezinye iimpawu ezinkulu zisebenzisa esi sikhokelo.
Izibonelelo ze-SPA
1. Amava angcono omsebenzisi
Amava angcono omsebenzisi abaluleke kakhulu kwimpumelelo yesicelo. Ngokwezibalo ezininzi, abatyeleli bayawashiya amaphepha akwi-intanethi anobuvila kwaye kunzima ukuwasebenzisa. Abasebenzisi akufuneki balinde imathiriyeli epheleleyo ukuba ihlaziye ukuba bafuna kuphela icandelo layo besebenzisa ii-SPA. Endaweni yoko, abathengi banokufumana ulwazi abaludingayo ngokukhawuleza, oluphucula amava abo e-SPA.
2. Ukuphuculwa kwesantya
Iiapps zewebhu kufuneka zikhawuleze kwaye zingachithi ixesha labasebenzisi; kungenjalo, abantu baya kufuna iindawo ezisebenza ngempumelelo. Ngenxa yokuba iwebhusayithi epheleleyo akufuneki ukuba ihlaziye kwaye idatha nje kwizahlulo zomxholo oceliweyo ziyatshintsha, ii-SPA zinika amaxesha okuphendula ngokukhawuleza. Ngenxa yoko, ukusebenza kwe-app yewebhu kuphucula kakhulu.
3. Ukusetyenziswa kwezibonelelo ezimbalwa
I-Single Page Apps zisebenzisa i-bandwidth encinci kuba amaphepha alayishwe kube kanye kuphela. Zikwasebenza kwimimandla enoqhagamshelo olucothayo lwe-intanethi, nto leyo ezenza zifikeleleke kuye nabani na. Ngaphaya koko, ngokungafaniyo neeMPA ezifana neGoogle Docs, zisebenza ngaphandle kweintanethi, zigcina idatha yakho, ke akunyanzelekanga ukuba uzibonelele ngoqhagamshelo lwe-intanethi rhoqo ukuze uzijonge kwaye usebenze kuzo.
4. I-caching esebenzayo
Kuba ithumela isicelo esinye kuphela kumncedisi kwaye emva koko ihlaziye enye idatha, i-App yephepha elinye inokugcina idatha ngokukhawuleza. Ngale ndlela, iya kukwazi ukusebenza nokuba awuqhagamshelwanga kwi-intanethi. Ukuba uxhulumaniso lomsebenzisi lulahlekile, idatha yendawo inokudityaniswa kunye nomncedisi xa uxhulumaniso lubuyiselwe.
5. Ukulungisa ingxaki kulula.
Ukulungiswa kweempazamo kwisicelo kuqinisekisa ukuba akukho nto inokusithintela ekusebenzeni ngeyona ndlela ingcono ngokufumanisa kwaye silungise iziphene kunye neengxaki ezinokusenza sicothe. Kuba zidalwe ngesakhelo esidumileyo esinje ngeReact, Angular, kunye neVue.js, ii-aplikeshini zephepha elinye zilula ukulungisa ingxaki kuGoogle Chrome. Amacandelo ephepha, idatha, kunye neenkqubo zenethiwekhi zonke zinokujongwa ngokulula kwaye ziphandwe.
6. Ukuhambelana kwiiplatifti ezininzi
Ukusebenzisa i-codebase enye, abaphuhlisi banokwenza ii -apps ezisebenza kuyo yonke inkqubo yokusebenza, isixhobo, okanye isikhangeli. Ngenxa yoko, iphucula amava omthengi ngokubavumela ukuba bafikelele kwi-SPA naphi na apho bakhetha khona. Ngaphaya koko, abaphuhlisi banokwenza ii-apps ezityebileyo ngokulula ngokulula. Ngokomzekelo, ngelixa uyila isixhobo sokuhlela umxholo, banokudibanisa izibalo zexesha langempela.
Ukungaphumeleli kwe-SPA
1. Izisongelo ze-Intanethi
Iingozi ze-intanethi ezifana nokubhalwa kwe-cross-site scripting (XSS) zisesichengeni kakhulu kwii-SPA kune-MPAs. Abahlaseli banokusebenzisa i-XSS ukubeka esichengeni i-app yewebhu ngokufaka iscripts zecala lomxhasi kuyo. Ngaphaya koko, uthintelo lofikelelo alunyanzeliswa ngokungqongqo kwinqanaba lokusebenza. Ukuba abaphuhlisi abathathi manyathelo, idatha ebuthathaka kunye nemisebenzi inokuvezwa.
2. Imbali yesikhangeli sakho
Imbali yesikhangeli ayigcinwanga zii-SPAs. Ukuba udlula kwixesha elidlulileyo ngalo naluphi na ulwazi oluluncedo, konke okufumanayo likhonkco le-SPA kwiwebhusayithi epheleleyo. Ukongeza, awukwazi ukubuyela emva naphambili kwi-SPA. Ukuba usebenzisa iqhosha elingasemva, uya kuthunyelwa kwiphepha lewebhu elilayishwe ngaphambili kunesimo sangaphambili. Ukusebenzisa i-API yeMbali ye-HTML5, nangona kunjalo, esi siphene sinokoyiswa.
3. Amaxesha omthwalo wokuqala
Nangona ii-SPA zidume ngesantya kunye nokusebenza kwazo, kuthatha ixesha elide ukuba indawo yonke ilayishe. Inokubacaphukisa abanye abasebenzisi, ibenze bangaze baphinde basebenzise i-app.
4. Iziphumo ze-SEO ezingasebenziyo
Uyilo lwe-SPAs luqulathe iphepha elinye eline-URL enye. Ithintela amandla e-SPAs ukufumana kusetyenziso lwe-injini yokukhangela (SEO). Kuba kukho ukhuphiswano oluninzi phaya, izicwangciso ze-SEO zinokukunceda ukuba unyuse izinga lendawo yakho kwiziphumo zenjini yokukhangela.
Kunzima ukusebenzela i-SEO kuba inye kuphela i-URL engenahlaziyo okanye iidilesi ezikhethekileyo. I-Indexation, i-analytics eyomeleleyo, unxibelelwano olulodwa, i-metadata, kunye nezinye iimpawu zonke azikho. Iisayithi ezinjalo zinobunzima bokuhlalutywa yi-bots yokukhangela, ukwenza ukulungelelaniswa kube nzima.
isiphelo
Ukuba ufuna ukwakha usetyenziso oluphendulayo ngakumbi, olukhawulezayo, kunye nolutyebileyo lwesicelo inethiwekhi yokuncokola, Ishishini le-SaaS, uhlaziyo oluphilayo, njalo njalo, ii-Single Page Applications (SPAs) zinokunceda.
Ngenxa yoko, vavanya iinjongo zakho kunye neenjongo zokubona ukuba i-SPA ikulungele na, kwaye ukhethe isakhelo seJavaScript ukuqalisa.
Injongo kukuphonononga amandla apheleleyo e-SPAs ukuba ifemu ifuna ukwakha imveliso ngenjongo yokugqibela yokuvezwa okuphuculweyo, ukusebenzisana okunamandla kwabasebenzisi, kunye nemveliso ephezulu yokuphumeza imisebenzi okanye ukuphonononga idatha ngokudibeneyo.
Shiya iMpendulo