Zviri Mukati[Viga][Ratidza]
Mumazuva ano anomhanya-mhanya, ane simba, uye anokwikwidza dhijitari nharaunda, masangano akabudirira zvakanyanya humbowo hwekuti kuva mutengi-centric ndiyo yega nzira yakasimba yekuwedzera bhizinesi. Kutarisisa kwevashandisi kuri kuramba kuchidzikira, zvichimanikidza mabhizinesi kutsvaga nzira nyowani uye dziri nani dzekupa zviitiko zvisina musono kune vatengi vavo.
Kana iwe uchida kugadzira zvinonakidza, zvakasiyana, uye zvisina musono zviitiko zvevashandisi vako, Single Peji Zvikumbiro (SPAs) ndiyo nzira yekuenda nayo. Nechikonzero ichi kuti makambani mazhinji ari kutanga kugadzira zvinhu zvemaapplication avo epamhepo vachishandisa dhizaini nyowani inonzi Single Peji Chikumbiro.
MaSPA akashandiswawo kugadzira Google neFacebook, iwo mabhehemoth maviri ane maapplication ane simba rako rezuva nezuva reinternet uye social media chiitiko.
Iyi blog inovhara zvese zvepeji-peji application, kusanganisira zvayakanakira, mutsauko uripo pakati pepeji rimwe chete uye akawanda-mapeji application, SPA masisitimu, nezvimwe zvakawanda. Ngatitange!
Chii chinonzi Peji Imwe Yekushandisa?
A single-peji application (SPA) ipeji rimwe chete (saka iro zita) rine data rakawanda rinoramba rakafanana uye mabhiti mashoma anoda kuchinjwa kamwechete.
A single-peji application (SPA) iwebhu peji, webhusaiti, kana webhu application iyo inomhanya mukati mebrowser uye inongotakura gwaro rimwe chete. Izvo hazvidi kuzorodza peji panguva yekushandiswa, uye mazhinji ezvinyorwa zvinoramba zvisina kuchinjwa nepo chikamu chidiki chayo chichida kuvandudzwa.
Kana zvirimo zvichifanira kuchinjwa, SPA inoshandisa JavaScript APIs kuita kudaro. Vashandisi vanogona kuwana webhusaiti pasina kurodha yakazara nyowani peji uye data kubva kuseva nenzira iyi.
Nekuda kweizvozvo, kuita kunonatsiridza uye iwe unowana kunzwa kuti uri kushandisa yemuno chirongwa. Inopa vatengi ruzivo rwakawanda rwepamhepo. SPAs inoita kuti ive yakatwasuka, inoshanda, uye yakapusa kune vashandisi kuve mune imwechete, isina kuomesesa dhijitari nharaunda.
Mufananidzo uri pazasi unoratidza mamiriro ekuti mushandisi anodyidzana nebrowser yavo, iyo inobva yaita mibvunzo yeAPI kusevhisi zvakananga. Iyo bhurawuza inotumira yakananga API mibvunzo kune sevhisi mushure mekuwana iyo JavaScript uye HTML sosi kodhi kubva kumutengi. Nekuti zvese zvinoitwa zvakananga mubrowser, sevha yeapp haina kumbotumira mibvunzo yeAPI kushumiro.
Mashandisirwo ePeji Rimwechete anoshanda sei?
Mapurogiramu epeji rimwe chete ane dhizaini yakatwasuka. Mutengi-parutivi uye server-padivi rekupa matekinoroji anoshandiswa ese ari maviri. Ngatiti iwe unoda kuenda kune imwe webhusaiti.
Paunonyora URL yayo mubrowser yako kuti ukumbire kupinda, browser inoita chikumbiro kune server, iyo inopindura negwaro reHTML. Iyo sevha inoendesa iyo HTML yemukati chete yechikumbiro chekutanga kana uchishandisa SPA, uye JSON data yezvinotevera mibvunzo.
Izvi zvinoreva kuti pane kurodhazve peji rese rewebhu, SPA inovaka patsva zvirimo zvepeji. Nekuda kweizvozvo, pane kushoma kushoma kurodha zvakare kazhinji, uye kuita kunovandudzwa. Ichi chimiro chinobvumira SPA kushanda zvakafanana kune yemuno app.
Multi-peji mashandisirwo haana kufanana neamwechete-peji application (MPAs). Kana mushandisi akakumbira data nyowani, ekupedzisira mapurogiramu ewebhu ane akawanda mapeji anorodha zvakare.
Uyezve, maSPA anogona kutora nguva yakareba kurodha pakutanga, asi kana angoremerwa, anopa kukurumidza kuita uye kufamba kusina musono. MaMPA anogona kuita husimbe uye anoda internet inomhanya zvakanyanya, kunyanya kana uchishandisa graphical zvikamu. Amazon neGoogle Docs mienzaniso miviri yeMPAs.
Single-Peji Kushandisa Vs Multi-Peji Kushandisa
Iyo yakajairwa mapeji akawanda-mapeji app (MPA) zano haidi chero ruzivo rweJavaScript kudivi rechikwata chako chekusimudzira (kunyangwe kubatanidza kumberi nekumashure-kumagumo zvinoreva kuti masaiti anowanzo kutora nguva yakareba kuvaka). Nekuwedzera imwe peji, unogona kukura zvinhu sezvaunoda, uye nekuti ruzivo rwuri papeji rega rega rwakamira, Tsvaga Engine Optimization (SEO) inowanzo nyore.
MaMPA, kune rumwe rutivi, anononoka kushandisa sezvo peji yega yega nyowani inofanirwa kutakurwa kubva kutanga. Kana zvirimo zvewebhusaiti yako (kazhinji) kuverenga-chete, zvakadaro, MPA inogona kunge iri yese yaunoda. Iyo yakakosha bhenefiti yepeji-peji maapplication ndiko kukurumidza kwavo.
Uyezve, maSPA ari nani pakuunza mashandiro akawandisa kupfuura maMPA, uye anochengeta ruzivo kuitira kuti chirongwa chishandiswe kunze kwenyika.
Chinonyanya kukosha chakashata cheSPAs ndechekuti hunhu hwesimba hwezvazviri hunoita kuti SEO uye kuwanikwa kuome. Vanokambaira uye injini dzekutsvaga dzakashanduka kuita zvirinani nerudzi urwu rweapp sezvo masangano mazhinji achimbundira maSPA.
Izvo zvakati, mapeji-mapeji maapplication haafanire kunge ari epamusoro kune akawanda-mapeji mapeji, uye zvinopesana. Nzira dzose dziri mbiri dzine zvakanakira nekuipira.
Mabhenefiti eMPAs pamusoro peSPA anozotanga kudzikira kana iyo webhu inokambaira uye indexing zvinonetsa zvakambobatanidzwa nepeji rimwe chete zvikumbiro zvagadziriswa, uye iyo yekupedzisira inozove iyo de facto yakajairwa yemazuva ano maapplication epamhepo.
Single Page Application Frameworks
Kana iwe wagumisa kuti kugadzira SPA ndiyo nzira yakanakisa yekuzadzisa zvinodiwa nekambani yako, iwe uchafanirwa kuivaka pane yakasimba SPA chimiro. Isu takanyora rondedzero yeakanakisa peji-peji application masisitimu ehupfumi hwewebhu maapplication anogona kubata mahombe ekushandisa. Chimiro chega chega chine seti yaro yakasiyana yehunhu uye kugona.
1. Taura
Munzvimbo yanhasi ine simba redhijitari, apo nyika iri kusunda zvine simba kuenda kushanduko yedhijitari, masangano akaisa Scalability & Flexibility munzvimbo dzavo dzekutanga dzekusimbisa kubva pakutanga, izvo zvaimbova fungidziro. Nekuda kweizvozvo, kuchengeta ichi chakakosha mundangariro paunenge uchigadzira peji-peji application ndiyo inofanirwa.
ReactJS isimba rakanaka rekushandisa kana scalability uye kuchinjika zviri zvakakosha zvekambani yako. Kugadziriswa kwepeji-peji application yakagadzirwa uchishandisa React iri nyore kwazvo nekuda kwechikamu-chakavakirwa dhizaini.
A Virtual DOM inosanganisirwa mune ReactJS peji. Iyo inobvumira timu yekuvandudza kutevedzera uye kugadzirisa shanduko pasina kukanganisa zvimwe zvikamu zvemuti, ichibvumira iyo application kuti iwedzere kuchinjika.
Kune maraibhurari ayo akamira-ega, ReactJS inochinjika kupfuura mamwe masisitimu, inobvumira nguva dzekupindura nekukurumidza uye kuita iyo yakanakisa dhizaini yekugadzira maSPA. Nekuti mativi ese ari maviri anoshandisa ReactJS, iyo dhizaini inobvumira kugovaniswa kwemutoro pakati pesevha nemutengi.
2. Angular
Mabhizinesi anosangana nedambudziko rinowanzoitika pakuedza kusunda dandemutande kuti riite zvakawanda: application 'Performance.' MaSaiti nhasi ane akasiyana maficha kupfuura nakare kose, zvichiita kuti zviomere mabhizinesi kuwana mashandiro akanaka pamidziyo yakati wandei.
Nekuda kweizvozvo, paunenge uchisarudza imwe-peji application framework, kuita kwakakosha. Kana zvasvika kune imwechete-peji application kumhanya, hapana chirinani chimiro kupfuura AngularJS.
Iyo data inosunga mashandiro eAngularJS inodzivirira yakawanda kodhi iyo mugadziri aifanira kuita neimwe nzira. Nekuda kweizvozvo, kushandisa Angular kugadzira peji-peji application inoda mashoma mitsara yekodhi uye inopa yakatanhamara kumhanya.
AngularJS-based applications inozivikanwa nekukasira kurodha. Izvi zvinoitwa kuti zvigoneke neAngularJS 'chikamu router mashandiro, ayo anopa otomatiki kodhi kupatsanurwa. Inobvumira vashandisi kungoisa iyo yekukumbira kodhi yekuona. A SPA yakavakwa neAngularJS framework inogona kumhanya pane chero chikuva.
3. Vue
VueJS ndiyo yakakura dhizaini yekuvandudza peji rewebhu application kana yasanganiswa nemaraibhurari anotsigira uye zvishandiso zvemazuva ano. Vue.js inofambisa nzira-mbiri kutaurirana nekuita HTML zvidhinha zviri nyore kubata nekutenda kune yayo MVVM dhizaini.
Nzira mbiri-mbiri yekusunga data ibasa risingazivikanwe mune mamwe masisitimu seReact.js. Vue.js inozivikanwawo sereactive framework sezvo ichiita pane shanduko mudata. Vue.js inoonekwa seyakanakisa yepasirese, kusanganisa React uye Angular.
Inoshandisa Virtual DOM uye iri chikamu-chakavakirwa, senge React, ichiita kuti ive nekukurumidza. Iyo inoita, zvisinei, inopa mirairo uye nzira mbiri-data inosunga, ichiita iyo inoshanda sisitimu seAngular. Vue.js haisi chimiro kana raibhurari.
Inopa musanganiswa wakakwana wekugona kuvaka SPAs, uye zviri nyore kuwedzera zvimwe, senge State Management uye Routing.
4. Backbone.JS
Ndiyo imwe yeanonyanya kufarirwa SPA masisitimu ekuvaka anochinjika ewebhu maapplication, uye anobva paMVP yekugadzira pateni. Iyo ine router, modhi, zviitiko, maonero, kuunganidzwa, uye akauraya ezvimwe zvinonaka maficha anoita kugadzira SPAs kuve nyore uye nekukurumidza.
Backbone.JS chimiro chakakurumbira chekugadzira mapeji-rimwe maapplication. Yayo modhi yekuona chimiro inoita zvinopfuura kungobatsira vanogadzira kugadzira yavo JS zvivakwa. Chaizvoizvo, inoshandiswa kudzora zvikumbiro zveHTTP kune sevha uye kurerutsa zvakaoma user interface designs.
Icho chimiro chakakura chekuvaka peji rimwe chete webhu kunyorera nenharaunda huru. Matani emaraibhurari, diki-saizi, abstract kodhi, chiitiko-inofambiswa kutaurirana, uye coding maitiro maitiro angori mashoma emaitiro ayo anoshamisa.
5. Nyamavhuvhu
Iyo mushandisi interface (UI) chinhu chakakosha chechero chirongwa chinokurumidza kukumisa iwe kubva kumakwikwi ako. Kana ichigona kutumira iyo yese mushandisi interface kune mutengi, peji-imwe application inoonekwa seyakanyanya kushanda. Nekuda kweizvozvo, inowedzera kuita kwese network.
Kana imwe yezvinonyanya kunetsa paapp yako iri mushandisi interface, unofanira kufunga kushandisa EmberJS segadziriro. EmberJS, seAngularJS, ine nzira mbiri-data inosunga, iyo inova nechokwadi chekuti maonero uye modhi zvinogara zviri sync.
Zvinogoneka kukurudzira server-side DOM rendering neEmber FastbootJS module, zvichikonzera zvirinani zvakaoma maUI. EmberJS, iyo yakavakirwa panzira mbiri-inosunga, inogadzirisa iyo UI sekuchinja kwedata.
Nekuda kweizvozvo, zviri nyore kutsanangura mushandisi interface inonzwisisa nguva yekuvandudza. EmberJS inzvimbo yakavhurika-sosi ine pfungwa dzakasimba dzinokurudzira rusununguko rwakakura. Nekuda kweizvozvo, isarudzo yakanaka yekugadzira-yakapfuma-peji imwe-peji mawebhusaiti ane basa rakawanda. Nordstrom, Kickstarter, LinkedIn, Netflix, uye akauraya emamwe mabhuranzi makuru anoshandisa chimiro ichi.
Benefits yeSPA
1. Zviri nani mushandisi ruzivo
Chiitiko chemushandisi chirinani chakakosha pakubudirira kweapp. Zvinoenderana nehuwandu hwakawanda, vashanyi vanosiya mapeji epamhepo ane usimbe uye akaoma kushandisa. Vashandisi havafanirwe kumirira kuti zvinhu zvizere zvizorodze kana vachingoda chikamu chayo vachishandisa SPAs. Pane kudaro, vatengi vanogona kuwana ruzivo rwavanoda nekukurumidza, izvo zvinovandudza ruzivo rwavo rweSPA.
2. Kuvandudza kukurumidza
Mawebhusaiti anofanirwa kunge achimhanyisa uye kwete kutambisa nguva yevashandisi; kana zvisina kudaro, vanhu vachatsvaga nzvimbo dzakanyanya kushanda. Nekuti iyo webhusaiti yakazara haifanirwe kuzorodza uye chete iyo data mune yakakumbirwa yemukati zvikamu inoshanduka, maSPA anopa nekukurumidza mhinduro nguva. Nekuda kweizvozvo, kuita kwewebhu app kunowedzera zvakanyanya.
3. Kushandisa zviwanikwa zvishoma
Single Peji Mapurogiramu anoshandisa shoma bandwidth nekuti mapeji anongoiswa kamwe chete. Ivo zvakare vanoshanda mumatunhu ane inononoka internet yekubatanidza, zvichiita kuti iwanikwe kune chero munhu. Uyezve, kusiyana neMPAs seGoogle Docs, inoshanda kunze kwenyika, ichichengetedza data rako, saka haufanirwe kuvapa nguva dzose yekubatanidza internet kuti utarise uye ushande pairi.
4. Kushanda caching
Nekuti inongotumira chikumbiro chimwe chete kune sevha uye yobva yagadzirisa imwe data, Imwe Peji App inogona cache data nekukurumidza. Nenzira iyi, inokwanisa kushanda kunyangwe iwe usina kubatana neinternet. Kana chinongedzo chemushandisi chikarasika, data yemuno inogona kuwiriraniswa nesevha kana kubatana kwadzoreredzwa.
5. Debugging iri nyore.
Debugging application inova nechokwadi chekuti hapana chinogona kuitadzisa kuita nepainogoneka nekutsvaga nekugadzirisa zvikanganiso nezvinetso zvingaite kuti iite zvishoma. Nekuti akagadzirwa ane mafaera akakurumbira akaita seReact, Angular, uye Vue.js, Peji Rimwe Maapplication ari nyore kugadzirisa muGoogle Chrome. Mapeji ezvikamu, data, uye network maitiro anogona kutariswa nekuongororwa zviri nyore.
6. Kugarisana mumapuratifomu akati wandei
Uchishandisa imwechete codebase, vagadziri vanogona kugadzira maapplication anoshanda pane ese anoshanda sisitimu, mudziyo, kana browser. Nekuda kweizvozvo, inovandudza ruzivo rwevatengi nekuvabvumira kuwana iyo SPA chero kwavanosarudza. Uyezve, vanogadzira vanogona kugadzira maficha-akapfuma maapplication zviri nyore. Semuenzaniso, pavanenge vachigadzira chigadzirwa chekugadzirisa zvinyorwa, vanogona kubatanidza nhamba dzenguva chaiyo.
Zvakaipa zveSPA
1. Kutyisidzira paIndaneti
Njodzi dzepamhepo senge cross-saiti scripting (XSS) dziri panjodzi yeSPA kupfuura maMPA. Vanorwisa vanogona kushandisa XSS kukanganisa webhu app nekubaya maclient-side scripts mairi. Uyezve, kurambidzwa kwekupinda hakuna kusimbiswa zvakanyanya padanho rekushanda. Kana vagadziri vacho vakasatora matanho, data inonzwisisika uye mashandiro anogona kuburitswa.
2. Nhoroondo yebrowser yako
Nhoroondo yebrowser haina kuchengetwa neSPAs. Kana iwe ukapfuura nemunguva yakapfuura kune chero ruzivo runobatsira, zvese zvaunowana ndeye SPA's link kune yakazara webhusaiti. Mukuwedzera, iwe haugone kudzokera nekudzoka muSPA. Kana ukashandisa bhatani rekumashure, unotumirwa kune yakamborodha peji rewebhu kwete mamiriro ekare. Uchishandisa iyo HTML5 Nhoroondo API, zvisinei, kukanganisa uku kunogona kukundwa.
3. Nguva dzekutanga dzekutakura
Kunyangwe maSPA ane mukurumbira nekumhanya uye kuita kwavo, zvinotora nguva yakareba kuti saiti yese itakure. Zvinogona kutsamwisa vamwe vashandisi, zvichiita kuti vasazomboshandisa iyo app zvakare.
4. Zvisingabatsiri SEO mhedzisiro
Iyo dhizaini yeSPAs ine peji rimwe chete rine URL imwechete. Inodzikamisa kugona kweSPAs kuwana kubva yekutsvaga injini optimization (SEO). Nekuti kune kukwikwidza kwakawanda kunze uko, SEO mazano anogona kukubatsira iwe kuwedzera chiyero chesaiti yako mune yekutsvaga injini mhinduro.
Zvakaoma kukwiridzira SEO nekuti pane imwe chete URL isina zvigadziriso kana yakakosha kero. Indexation, analytics yakasimba, yakasarudzika yekubatanidza, metadata, uye zvimwe zvinhu zvese zvinoshaikwa. Nzvimbo dzakadaro dzine nguva yakaoma kuongororwa nekutsvaga bots, zvichiita kuti kugadzirisa kuve kwakaoma.
mhedziso
Kana iwe uchida kugadzira inoteerera, inokurumidza, uye chimiro-yakapfuma application ye pasocial network, SaaS bhizinesi, mararamiro ehupenyu, nezvimwewo, Single Page Applications (SPAs) inogona kubatsira.
Nekuda kweizvozvo, ongorora zvibodzwa nezvinangwa zvako kuti uone kana SPA yakakunakira, wobva watora JavaScript framework kuti utange.
Chinangwa ndechekuongorora kugona kwakazara kweSPAs kana femu ichida kuvaka chigadzirwa nechinangwa chekupedzisira chekusimudzira kuratidzwa, kusimba kwevashandisi, uye kugadzirwa kwepamusoro kwekuita zviitiko kana kuongorora data.
Leave a Reply