Chii chinonzi Peji Imwe Yekushandisa? Architecture, zvinobatsira uye matambudziko

Peji imwe chete application (SPA) iwebhu app inounzwa kumushandisi kuburikidza nepeji imwe chete yeHTML kuti ipindure uye kunyatso tevedzera desktop application kana yemuno app.

A SPA inouya dzimwe nguva defisingle page interface (SPI).

Iyo peji-peji application inogona kutora ese echishandiso HTML, JavaScript, uye CSS panguva yekutanga kurodha, kana inogona kurodha zviwanikwa zvekugadzirisa mukupindura kupindirana kwevashandisi kana zvimwe zviitiko.

Mamwe maapplication ewebhu, ipa mushandisi nepeji repamba rakabatana nezvikamu zvekushandisa pamapeji akasiyana eHTML, zvinoreva kuti mushandisi anofanirwa kumirira peji idzva kuti rikwire pese pavanenge vakumbira chitsva.

Technologies

MaSPA anoshandisa HTML5 neAjax (asynchronous JavaScript neXML) kugonesa mhinduro dzemvura uye dzine simba kune zvikumbiro zvevashandisi, zvichibvumira zvirimo kuti zvigadziriswe nekukurumidza kana mushandisi aita chiito. Kana peji yatakura, kudyidzana neserver kunoitika kuburikidza neAjax mafoni uye data inodzoserwa, yaonekwa muJSON (JavaScript Object Notation) fomati, kuzorodza peji pasina kudiwa kurodha zvakare.

SPA zvakadzama

Mapeji mapeji maapplication akakosha pakugona kwavo kugadzirisazve chero chikamu chemushandisi wemushandisi pasina kuda sevha kutenderera kunotora iyo HTML. Izvi zvinopedzwa nekuparadzanisa data kubva pakuratidzwa kwedata nemuenzaniso layer inodzora data uye yekuona layer inoverenga kubva kumamodheru.

Kodhi yakanaka inobva pakugadzirisa dambudziko rimwechete kakawanda, kana kuigadzirisa zvakare. Kazhinji, iyi nzira inoshanduka mune inodzokororwa mapatani, neimwe nzira ichiita chinhu chimwe chete nguva dzose.

Kuti unyore kodhi inochengetedzwa, unofanirwa kunyora kodhi nenzira iri nyore. Uku kurwa kunogara kuchinetsa, chokwadi zviri nyore kuwedzera kuomarara (mapindiro/kutsamira) nekunyora kodhi kugadzirisa dambudziko; uye zviri nyore kugadzirisa dambudziko nenzira isingaderedze kuoma.

Mazita ndiwo muenzaniso weizvi.

Peji Rimwe Zvikumbiro (SPA) Multi Peji Zvikumbiro (MPA) zvichienzaniswa

Multi-peji mapeji (MPAs) ane akawanda mapeji ane static data uye zvinongedzo kune mamwe masaiti. HTML neCSS ndiwo matekinoroji makuru anoshandiswa kugadzira mawebhusaiti eMPA. Vanogona kushandisa JavaScript kuderedza mutoro uye kuwedzera kukurumidza. Masangano anopa akawanda masevhisi, akadai sezvitoro zvepamhepo, anofanirwa kufunga nezvekushandisa MPA sezvo achiita kuti zvive nyore kubatana kune akasiyana dhatabhesi.

Zvishandiso zvepeji rimwechete zvinosiyana kubva kune akawanda-mapeji ekushandisa nenzira dzinotevera:

• Development process: Paunenge uchigadzira MPAs, haudi hunyanzvi hweJavaScript, kusiyana nemaSPA. Nekudaro, kubatanidzwa kwekumberi-kumashure uye kumashure-kumagumo muMPA zvinoreva kuti nzvimbo idzi dzinoda nguva yakareba yekuvaka kupfuura maSPA.
• havukavu: MPAs dzinomhanya zvishoma, zvinoda kuti peji yega yega itsva itakurwe kubva pakutanga. Nekudaro, maSPA anoremedza nekukurumidza zvakanyanya mushure mekutanga kurodha sezvavanochengeta data rekushandisa gare gare.
• Kutsvaga Engine Optimization: Injini dzekutsvaga dzinogona kunyoresa mawebhusaiti neMPA zviri nyore. MaMPA ane mamwe mapeji anokambaira neinjini dzekutsvaga kuti abudise zvirinani SEO masosi. Zviri mukati peji rega rega zvakare zvakamira, zvichiita kuti zvive nyore kuwanikwa. Mukupesana, maSPA ane peji ine imwechete yakasarudzika URL (Uniform Resource Locator). Ivo zvakare vanoshandisa JavaScript, iyo isina indexed nemazvo neinjini zhinji dzekutsvaga. Izvi zvinoita kuti SEO zvikwiriso zveSPAs zvinyanye kunetsa.
• chibatiso: MuMPA, unofanirwa kuchengetedza peji yega yega yepamhepo wega. Nekudaro, maSPAs anowanzo kurwisa hacker. Asi nenzira kwayo, zvikwata zvekusimudzira zvinogona kuvandudza kuchengetedza kwekushandisa.

Sezvo mabhizinesi mazhinji anotama kuti ashandise maSPA, vanokambaira uye injini dzekutsvaga dzinoshanduka kuti dziite zvirinani. Tichifunga nezvekumhanya kwayo, ingori mubvunzo wekuti SPAs ichave riinhi sarudzo yekuvandudza webhu application. Ipapo zvakanakira MPA pamusoro peSPA zvinotanga kupera.

Ndeipi nguva yekushandisa mapeji ega ega?

Pane mamiriro mashanu ayo maapplication akadaro anonyanya kukosha:

• Vashandisi vanoda kugadzira webhusaiti ine simba repuratifomu uye yakaderera data mavhoriyamu vanogona kushandisa SPAs.
• Vashandisi vari kuronga kuvaka nharembozha yewebhusaiti yavo vanogonawo kufunga nezvekushandisa SPA. Ivo vanogona kushandisa backend API (Application Programming Interface) yesaiti uye nharembozha.
• SPA architecture yakakodzera kuvaka masocial network seFacebook, SaaS mapuratifomu uye nharaunda dzakavharwa sezvo dzichida shoma SEO.
• Vashandisi vanoda kupa vatengi vavo kupindirana kusina musono vanofanirawo kushandisa SPAs. Vatengi vanogona zvakare kuwana zvigadziriso zvepamoyo zvehupenyu hwekutepfenyura data uye magirafu.
• Vashandisi vanoda kuunza inowirirana, yekuzvarwa, uye ine simba mushandisi ruzivo pamidziyo yese, masisitimu anoshanda, uye mabhurawuza.

Chikwata chakanaka chinofanirwa kuve nebhajeti, zvishandiso uye nguva yekugadzira yakakwira mhando peji peji application. Izvi zvinovimbisa yakavimbika uye inoshanda SPA iyo isingawane traffic-ine chekuita nekudzika.

Single peji application architecture

Single peji mapurogiramu anodyidzana nevashanyi nekurodha nekushanda pane yazvino peji, kubvisa kudiwa kwekutakura akawanda mapeji ewebhu kubva kune server.

Mawebhusaiti ane SPA ane imwechete URL link. Izvo zvirimo zvinodhawunirodha uye chaiyo mushandisi interface (UI) zvikamu zvinogadziridzwa kana wadzvanywa. Chiitiko chemushandisi chinovandudzwa sezvo mushandisi anogona kupindirana neazvino peji sezvo zvinyorwa zvitsva zvinotorwa kubva kuseva. Kana zororo rikaitika, zvikamu zvepeji razvino zvinogadziridzwa nezviri mukati.

Yekutanga mutengi chikumbiro muSPA inoremedza application uye zvese zvayo zvine chekuita nemidziyo, senge HTML, CSS uye JavaScript. Iyo yekutanga faira yekuremedza inogona kuve yakakosha kune yakaoma maapplication uye inokonzeresa kunonoka kurodha nguva. Iyo application programming interface (API) inotora data nyowani sezvo mushandisi anofamba neSPA. sevha inopindura chete nedata muJSON (JavaScript Object Notation) fomati. Paunenge wagamuchira iyi data, bhurawuza rinozorodza maonero echishandiso icho mushandisi anoona pasina kurodha peji.

Single-peji application architecture inosanganisira server-side uye client-side rendering matekinoroji. Iyo saiti inoratidzwa uye inounzwa kumushandisi kuburikidza neClient Side Rendering (CSR), Server Side Rendering (SSR), kana Static Site Generator (SSG).

1. Client Side Rendering (CSR)
   Nekupa mutengi-parutivi, browser inoita chikumbiro kune sevha yeHTML faira uye inogamuchira yakakosha HTML faira ine akabatanidzwa mascript uye masitaera. Paunenge uchiita JavaScript, mushandisi anoona peji isina chinhu kana mufananidzo wekurodha. Iyo SPA inotora iyo data, inogadzira zviono, uye inosundira iyo data muChinyorwa Chinhu Model (DOM). Iyo SPA inobva yagadzirirwa kushandiswa. CSR ndiyo inowanzorebesa pane dzimwe nzira nhatu uye dzimwe nguva inogona kuremedza bhurawuza nekuda kwekushandisa kwayo zvakanyanya zviwanikwa zvemudziyo paunenge uchiona zvirimo. Pamusoro pezvo, CSR inzira huru yemawebhusaiti ane traffic yakawanda sezvo ichipa ruzivo kune vatengi pasina yakawandisa server kutaurirana, zvichikonzera kukurumidza mushandisi ruzivo.

2. Server Side Rendering (SSR)
   Munguva ye server padivi rekupa, mabhurawuza anokumbira HTML faira kubva kune server, iyo inotora yakakumbirwa data, inopa iyo SPA, uye inogadzira iyo HTML faira rekushandisa pakuenda. Zvinhu zvinosvikika zvinobva zvaratidzwa kumushandisi. Iyo SPA dhizaini inodiwa kubatanidza zviitiko, kugadzira chaiyo DOM uye kuita mamwe mashandiro. Iyo SPA inobva yagadzirirwa kushandiswa. SSR inoita kuti chirongwa chikurumidze sezvo ichibatanidza kumhanya kweSPA nekusaremedza browser yemushandisi.

3. Static Site Generator (SSG)
   Mukati meiyo static saiti muvaki, mabhurawuza anobva aita chikumbiro kune sevha yefaira reHTML. Iyo peji inoratidzwa kune mushandisi. Iyo SPA inotora iyo data, inogadzira maonero, uye inozadza iyo gwaro chinhu modhi (DOM). Zvadaro, iyo SPA yakagadzirira kushandiswa. Inferring kubva pazita, maSSG anonyanya kukodzera mapeji akamira. Ivo vanopa static mapeji ane yakanaka uye inokurumidza sarudzo. Kune mawebhusaiti ane zvine simba zvemukati, vashandisi vanorayirwa kuti vasarudze imwe yemamwe maviri maviri ruzivo rwekupa sarudzo.

Zvakanakira zveimwe peji application

Makambani makuru akaita seMeta, YouTube neNetflix akatama kubva pamapeji akawanda ekushandisa kuenda kune imwe peji-peji application. SPAs inopa yakapfava mushandisi ruzivo, yakakwirira kuita uye kupindura. Pazasi pane mabhenefiti ekushandisa single peji application.

1. Caching chimiro
   Peji imwe chete application inoita chikumbiro chimwe chete kune sevha pane yekutanga kurodha uye inochengetedza chero data yainogamuchira. Vatengi vanogona kushandisa data rakagamuchirwa kushanda kunze kwenyika kana zvichidikanwa izvo zvinoita kuti zvive nyore kune vashandisi sezvo zvichivabvumira kushandisa zvishoma zviwanikwa zvedata. Zvakare, kana mutengi aine yakaipa Internet yekubatanidza, data yemuno inogona kuwiriraniswa nesevha kana iyo LAN yekubatanidza ichibvumira.
2. Inokurumidza uye inopindura
   Kushandisa SPAs kunogona kuvandudza kumhanya kwewebhusaiti sezvo ichizorodza chete izvo zvakakumbirwa pane kuzorodza peji rese. SPAs inorodha diki JSON faira pane peji nyowani. Iyo JSON faira inovimbisa kukurumidza kurodha kumhanya uye kushanda zvakanaka. Inoita kuti uwane nekukurumidza kune ese maficha uye mabasa epeji pasina kunonoka. Uku kusanganisa kukuru, senguva yekuremerwa kwewebhusaiti inogona kukanganisa zvakanyanya mari nekutengesa.

SPAs inobvumira shanduko yakatsetseka nekupa ruzivo rwese pane peji ipapo ipapo. Iyo webhusaiti haidi kuvandudzwa, saka maitiro ayo anoshanda zvakanyanya kupfuura akajairika maapplication epamhepo.

Zvakare, neSPAs, zvinhu zvakaita seHTML, CSS, uye zvinyorwa Java vanozotorwa kamwe chete muhupenyu hwekushandisa. Chete data inodiwa inotsinhaniswa nekudzoka.

Mapeji ane SPA anobvumirawo vashandisi kufamba nekukurumidza nekuda kwecaching uye kuderedzwa kwedata mavhoriyamu. Iyo chete data inodiwa inofambiswa kumashure nekudzoka uye chete zvikamu zvisipo zvezvakagadziridzwa zvinotorwa.

3. Kugadzirisa neChrome
   Debugging inoona uye inobvisa tsikidzi, zvikanganiso, uye kusadzivirirwa kwewebhu application kunonotsa kuita. Debugging SPAs inoitwa nyore neChrome kuvandudza maturusi. Vagadziri vanogona kudzora kupihwa kweJS kodhi kubva kubrowser, debug SPAs pasina kusefa kuburikidza nemitsara yakawanda yekodhi.

MaSPA akavakirwa pamusoro peJavaScript masisitimu akadai seAngularJS uye React developer maturusi, zvichiita kuti zvive nyore kugadzirisa uchishandisa Chrome browser.

Zvishandiso zvekuvandudza zvinobvumira vanogadzira kuti vanzwisise kuti bhurawuza rinokumbira sei data kubva kumaseva, cache iyo, uye kuti icharatidza sei mapeji mapeji. Pamusoro pezvo, maturusi aya anobvumira vanogadzira kutarisa uye kuongorora mapeji epeji, mashandiro etiweki, uye data rakabatana.

4. Kukurumidza kukura
   Munguva yekuvandudza maitiro, kumberi-kumagumo uye kumashure-kumagumo kweSPA kunogona kupatsanurwa, zvichibvumira vaviri kana kupfuura vanogadzira kuti vashande pamwe chete. Kushandura iyo yekumberi kana yekumashure haina kukanganisa imwe magumo, nekudaro kukurudzira kukurumidza kusimudzira.

Vagadziri vanogona kushandisazve server-parutivi kodhi uye kupatsanura maSPA kubva kumberi-kumagumo UI. Iyo yakadhirowewa dhizaini muSPAs inoparadzanisa kumberi-kuguma kuratidzwa uye kumashure-kumagumo masevhisi. Izvi zvinobvumira vanogadzira kuchinja maonero, kuvaka uye kuedza pasina kukanganisa zvirimo kana kunetseka nezve tekinoroji yekumashure. Vatengi vanogona ipapo kuve neruzivo rwakafanana vachishandisa aya maapplication.

5. Kuvandudzwa kwemushandisi ruzivo
   NeSPAs, vashandisi vanowana mapeji anoonekwa ipapo ipapo nezvose zvirimo kamwechete. Izvi zviri nyore sezvo vashandisi vanogona kupururudza zvakanaka uye zvisina musono. Zvinonzwa sekushandisa desktop desktop kana mobile app.

SPAs inopa UX yakanaka ine mavambo akasiyana, epakati, uye ekupedzisira. Zvakare, vashandisi vanogona kusvika pane zvinodiwa pasina kudzvanya akawanda malink, senge muMPAs. Iwe unosangana neakaderera bounce rates kana vashandisi vawana ruzivo rwekukurumidza, kusiyana neMPAs apo vashandisi vanogumburwa sezvo mapeji anotora nguva yakawanda yekutakura. Kufamba kunokurumidza zvakare nekuti mapeji epeji anoshandiswa zvakare.

6. Shanduko kuita IOS uye Android zvikumbiro
   Vagadziri vanotarisa kune shanduko kuenda kuIOS uye Android maapplication vanofanirwa kushandisa maSPA sezvo ari nyore kushandura. Vanogona kushandisa kodhi imwechete kuchinja kubva kuSPA kuenda kunharembozha. Nekuti iyo kodhi yese inopihwa muchiitiko chimwe chete, maSPA ari nyore kufamba, achiaita akanakira nharembozha.
7. Cross-platform kuenderana
   Vagadziri vanogona kushandisa imwechete kodhi base kuvaka maapplication anogona kumhanya pane chero mudziyo, browser, uye inoshanda sisitimu. Izvi zvinowedzera ruzivo rwevatengi sezvo vachigona kushandisa SPA chero kupi. Inogonesawo vanogadzira uye mainjiniya eDevOps kuvaka maficha-akapfuma maapplication, kusanganisira chaiyo-nguva analytics, uku uchigadzira zvemukati-ekugadzirisa maapplication.

Downsides

Kunyangwe zvese zvakanakira zveimwe peji mashandisirwo, zvimwe zvipingamupinyi zvinomuka kana uchishandisa SPA masimusi. Sezvineiwo, basa riri kuenderera mberi rekukunda nyaya idzi nemaSPA. Pazasi pane zvimwe zvakaderera;

1. Kutsvaga Engine Optimization (SEO)
   Zvinotendwa zvakanyanya kuti mapeji ega ega mashandisirwo haasi akakodzera ku SEO. Mazhinji mainjini ekutsvaga, seGoogle kana Yahoo, haana kukwanisa kukambaira mawebhusaiti eSPA zvichienderana neAjax kudyidzana nemaseva kwechinguva. Nekuda kweizvozvo, mazhinji emasaiti aya eSPA akaramba asina kunyorwa. Parizvino, Google bots yakadzidziswa mashandisiro eJavaScript pane yenguva dzose HTML kunongedzera mawebhusaiti eSPA, izvo zvinokuvadza mazinga.

Kuedza kukwana SEO mune yakagadzirira-yakagadzirwa SPA saiti inonetsa uye inodhura. Vagadziri vanofanirwa kuvaka webhusaiti yakaparadzana, yakapihwa nesevha yekutsvaga injini, iyo isingashande uye inosanganisira yakawanda yekuwedzera kodhi. Mamwe matekiniki akadai sekuona chimiro uye pre-rendering anogona kushandiswa zvakare. Munzvimbo dzeSPA, URL imwechete yepeji rega rega inodzikamisa kugona kweSEO kweSPAs.

2. Kufamba kwebhatani rekumashure nekumberi
   Mabhurawuza anochengetedza ruzivo kubatsira mapeji ewebhu kurodha nekukurumidza. Vatengi pavanorova bhatani rekumashure, vazhinji vanotarisira kuti peji yacho ive muchimiro chakafanana nenguva yavakapedzisira kuriona, uye kuti shanduko ichaitika nekukurumidza. Chinyakare mawebhu architecture anobvumira izvi nekushandisa cached makopi esaiti uye zvine chekuita nazvo. Nekudaro, mukuita zvisina basa kweSPA, kudzvanya bhatani rekumashure kune mhedzisiro yakafanana nekudzvanya chinongedzo. Inokonzeresa chikumbiro cheserver, yakawedzera lag, uye inooneka data shanduko.

Kuti usangane nezvinotarisirwa nemushandisi uye nekupa chiitiko chinokurumidza, Vagadziri veSPA vanofanirwa kutevedzera mashandiro emabhurawuza emunharaunda vachishandisa JavaScript.

3. Mupumburu nzvimbo
   Mabhurawuza anochengeta ruzivo rwakaita seyekupedzisira kurongeka nzvimbo yemapeji akashanyirwa. Nekudaro, vashandisi vanogona kuona kuti mipumburu zvinzvimbo zvachinja kana uchifambisa SPAs uchishandisa browser kumashure uye kumberi mabhatani. Semuenzaniso, paFacebook, dzimwe nguva vashandisi vanokwenya vachidzokera kunzvimbo dzavo dzekupedzisira, asi dzimwe nguva havadaro. Izvi zvinoguma neine suboptimal mushandisi ruzivo sezvo ivo vachifanirwa kutanga nemaoko kupuruzira vachidzokera kune yakapfuura mipumburu chinzvimbo.

Kuti vagadzirise nyaya iyi, vanogadzira vanofanirwa kupa kodhi inochengetedza, inotora, uye inokurudzira yeiyo chaiyo mipumburu chinzvimbo sezvo mushandisi anotenderera achidzoka nekudzoka.

4. Webhusaiti kuongororwa
   Nekuwedzera analytics kodhi kune peji, vashandisi vanogona kuteedzera traffic kune peji. Nekudaro, maSPA anoita kuti zviome kuona kuti ndeapi mapeji kana zvirimo zvinonyanya kufarirwa sezvo ingori peji rimwe chete. Iwe unofanirwa kupa imwe kodhi kodhi yeanalytics yekutevera mapeji ekunyepedzera sezvaanoonekwa.
5. Safety issues
   MaSPAs anowanzo kukanganiswa kuburikidza cross site scripting. Ivo vanobvumira vatengi kurodha iyo yese application, vachivaisa kune yakawanda mikana yekuwana kusagadzikana kuburikidza nereverse engineering. Kugadzirisa nyaya iyi, vanogadzira vanofanirwa kuve nechokwadi chekuti ese mutengi-parutivi logic ine chekuita newebhu chengetedzo yewebhu, senge chokwadi uye kuisirwa kwekuisa, inopetwa kaviri paserver kuti ionekwe. Zvakare, vanogadzira vanofanirwa kupa mashoma-yakavakirwa-nzvimbo yekuwana.

Mhedziso

Single Peji Mapurogiramu anomaka nhanho inotevera mukushanduka kwezviitiko zveapp. Iwo anokurumidza, akanyanya intuitive uye anogona kusanganiswa nemhando yepamusoro senge customization. Ndosaka makambani akanakisa ane vashandisi vakawanda panguva imwe chete, seGmail, Netflix kana Facebook's feed feed, vanovimba nepeji rimwe chete rekuvaka. Nekuita tekinoroji iyi, mabhizinesi anogona kuwana kukosha kwakawanda kubva pazvivakwa zvavo zvepamhepo uye kuita hutsva hutsva sebhizinesi redhijitari.

Ercole Palmeri