Serlêdana Rûpelek Yekane çi ye? Mîmarî, feyde û dijwarî

Serlêdana yek rûpelî (SPA) serîlêdanek malperê ye ku bi yek rûpelek HTML-ê ji bikarhêner re tê pêşkêş kirin da ku bêtir bersivdar be û ji nêz ve serîlêdanek sermaseyê an serîlêdana xwemalî dubare bike.

SPA carinan carinan tê defipêwendiya rûpela yekane (SPI).

Serlêdanek yek-rûpel dikare di dema barkirina destpêkê de hemî HTML, JavaScript, û CSS-ya serîlêdanê bigire, an jî ew dikare çavkaniyên dînamîkî ji bo nûvekirina bersivê li ser danûstendina bikarhêner an bûyerên din bar bike.

Serlêdanên din ên malperê, rûpelek malê ya ku bi beşên serîlêdanê ve girêdayî ye li ser rûpelên HTML-ê yên cihêreng pêşkêşî bikarhêner dikin, ku tê vê wateyê ku bikarhêner her gava ku ew daxwazek nû dike pêdivî ye ku li benda barkirina rûpelek nû bimîne.

Technologies

SPA HTML5 û Ajax (Asynchronous JavaScript û XML) bikar tînin da ku bersivên herikîn û dînamîkî yên li ser daxwazên bikarhêner çalak bikin, dihêlin ku gava ku bikarhêner çalakiyek dike naverok tavilê were nûve kirin. Piştî ku rûpel hate barkirin, danûstandinên bi serverê re bi bangên Ajax pêk tê û dane têne vegerandin, di formata JSON (JavaScript Object Notation) de têne vedîtin, da ku rûpelê nûve bikin bêyî ku ji nû ve barkirin.

SPA bi berfirehî

Serlêdanên yek rûpelî ji ber şiyana wan a ji nû ve dîzaynkirina her perçeyek navrûya bikarhêner bêyî ku hewcedariya gerîdeyek serverê hebe ku HTML-ê bigire diyar in. Ev bi veqetandina daneyan ji pêşkêşkirina daneyê bi qatek modela ku daneyan bi rê ve dibe û qatek dîtinê ya ku ji modelan dixwîne, pêk tê.

Koda baş ji çareserkirina heman pirsgirêkê gelek caran, an ji nûvekirina wê tê. Bi gelemperî, ev pêvajo di qalibên dûbare de pêşve diçe, digel ku yek mekanîzmayek bi domdarî heman tiştî dike.

Ji bo nivîsandina koda parastinê, hûn hewce ne ku kodê bi rengek hêsan binivîsin. Ev têkoşînek domdar e, bi rastî ew hêsan e ku meriv bi nivîsandina kodê tevliheviyê (tevlihevî / girêdan) zêde bike da ku pirsgirêkek çareser bike; û hêsan e ku pirsgirêkek bi rengek ku tevliheviyê kêm neke çareser bike.

Navên navan mînakek vê yekê ne.

Serlêdanên Yek Rûpelê (SPA) Serlêdanên Pir Rûpel (MPA) li hev kirin

Serlêdanên pir-rûpel (MPA) gelek rûpelan bi daneyên statîk û girêdanên bi malperên din re vedigirin. HTML û CSS teknolojiyên sereke ne ku ji bo pêşvebirina malperên MPA têne bikar anîn. Ew dikarin JavaScript-ê bikar bînin da ku barkirinê kêm bikin û lezê zêde bikin. Rêxistinên ku cûrbecûr karûbaran pêşkêşî dikin, wekî firotgehên serhêl, divê MPA bikar bînin ji ber ku ew girêdana bi databasên bikarhêner ên cihêreng re hêsan dikin.

Serlêdanên yek-rûpelî ji serîlêdanên pir-rûpelî bi awayên jêrîn cûda dibin:

• Pêvajoya pêşveçûnê: Dema ku MPA-yan diafirînin, berevajî SPA-yan, hûn ne hewceyê jêhatîbûna JavaScript-ê ne. Lêbelê, pevgirêdana pêş û paşîn di MPA-yan de tê vê wateyê ku van malperan ji SPA-yan demên çêkirinê bi nisbeten dirêjtir hewce dikin.
• speed: MPA bi hêdî hêdî dimeşin, pêdivî ye ku her rûpelek nû ji nû ve were barkirin. Lêbelê, SPA piştî dakêşana destpêkê pir zûtir bar dikin ji ber ku ew daneyan ji bo karanîna paşê vedişêrin.
• Optimîzasyona Lêgerînê: Motorên lêgerînê dikarin bi hêsanî malperan bi MPA-ê re navnîş bikin. MPA bêtir rûpelên ku ji hêla motorên lêgerînê ve têne xêz kirin hene ku rêzikên SEO çêtir çêbikin. Naveroka her rûpelê di heman demê de statîk e, ku wê bêtir bigihîje. Berevajî vê, SPA rûpelek bi yek URL-ya yekta (Yekçavkaniya Çavkaniyê ya Yekgirtî) heye. Ew di heman demê de JavaScript-ê jî bikar tînin, ku ji hêla pir motorên lêgerînê ve bi rêkûpêk nayê navnîş kirin. Ev ji bo SPA-ê navnîşên SEO-ê dijwartir dike.
• ewlekarî: Di MPA de, hûn hewce ne ku her rûpela serhêl bi rengek kesane ewle bikin. Lêbelê, SPA ji êrîşên hacker re bêtir meyla ne. Lê bi nêzîkatiya rast, tîmên pêşkeftinê dikarin ewlehiya serîlêdanê baştir bikin.

Her ku bêtir karsazî koç dikin ku SPA bikar bînin, crawlers û motorên lêgerînê dê pêşve bibin da ku wan çêtir navnîş bikin. Ji ber leza wê, ew tenê pirsek e ku kengê SPA dê ji bo pêşkeftina serîlêdana malperê bibin vebijarka govendê. Dûv re avantajên MPA-yê li ser SPA-ê dê dest pê bikin.

Dema ku meriv serîlêdanên rûpela yekane bikar bîne?

Pênc senaryo hene ku serîlêdanên weha herî zêde têkildar in:

• Bikarhênerên ku dixwazin malperek bi platformek dînamîkî û cildên daneya kêmtir pêşve bibin dikarin SPA bikar bînin.
• Bikarhênerên ku plan dikin ku ji bo malpera xwe serîlêdanek mobîl ava bikin jî dikarin SPA bikar bînin. Ew dikarin ji bo malper û serîlêdana mobîl API-ya paşerojê (Navenda Bernamesaziya Serlêdanê) bikar bînin.
• Mîmariya SPA ji bo avakirina torên civakî yên mîna Facebook, platformên SaaS û civakên girtî maqûl e ji ber ku ew kêmtir SEO hewce ne.
• Bikarhênerên ku dixwazin danûstendina bêkêmasî ya xerîdarên xwe pêşkêşî bikin divê SPA jî bikar bînin. Xerîdar jî dikarin ji bo daneyan û grafikên weşana zindî bigihîjin nûvekirinên zindî.
• Bikarhênerên ku dixwazin ezmûnek bikarhênerek domdar, xwecihî û dînamîkî li seranserê cîhaz, pergalên xebitandinê û gerokan peyda bikin.

Pêdivî ye ku tîmek baş xwedan budce, amûr û dem be da ku serîlêdanek yek rûpelek kalîteya bilind biafirîne. Ev ê SPA-ya pêbawer û bikêrhatî peyda bike ku demdirêjiya seyrûseferê nake.

Mîmariya serîlêdana rûpela yekane

Serlêdanên yek rûpelî bi barkirin û xebata li ser rûpela heyî re bi mêvanan re têkilî daynin, hewcedariya barkirina gelek rûpelên malperê ji serverê ji holê radike.

Malperên bi SPA ji yek girêdanek URL-ê pêk tê. Naverok tê daxistin û dema ku tê klîk kirin hêmanên navbeynkariya bikarhêner (UI) yên taybetî têne nûve kirin. Tecrûbeya bikarhêner çêtir dibe ji ber ku bikarhêner dikare bi rûpela heyî re têkilî daynin ji ber ku naveroka nû ji serverê tê derxistin. Dema ku nûvekirinek çêdibe, beşên rûpela heyî bi naveroka nû têne nûve kirin.

Daxwaza xerîdar a destpêkê di SPA de serîlêdanê û hemî hebûnên wê yên têkildar, wekî HTML, CSS û JavaScript bar dike. Dibe ku pelê barkirina destpêkê ji bo serîlêdanên tevlihev girîng be û di dema barkirinê de hêdîtir bibe. Dema ku bikarhêner bi navgîniya SPA-yê re navgînek bernamesaziya serîlêdanê (API) daneyên nû digire. pêşkêşker tenê bi daneyên di formata JSON (JavaScript Object Notation) bersiv dide. Bi wergirtina van daneyan, gerok dîmena serîlêdana ku bikarhêner bêyî nûvekirina rûpelek dibîne nû dike.

Mîmariya serîlêdanê ya yek-rûpel teknolojiyên pêşkêşkirina server-side û xerîdar-aliyê vedihewîne. Malper bi navgîniya Pêşkêşkirina Aliyê Xerîdar (CSR), Pêşkêşkera Aliyê Pêşkêşkar (SSR), an Generatorê Malpera Statîk (SSG) tê xuyang kirin û pêşkêşî bikarhêner dike.

1. Pêşkêşkirina Aliyê Xerîdar (CSR)
   Bi pêşkêşkirina ji hêla xerîdar ve, gerok ji serverê re ji bo pelek HTML-ê daxwazek dike û pelek bingehîn a HTML-ê bi tîp û şêwazên pêvekirî distîne. Dema ku JavaScript-ê dixebitîne, bikarhêner rûpelek vala an wêneyek barker dibîne. SPA daneyan digire, dîmenan çêdike, û daneyan dixe nav Modela Objeya Belgeyê (DOM). Dûv re SPA ji bo karanîna tê amadekirin. CSR bi gelemperî ji sê alternatîfan dirêjtirîn e û carinan dikare gerokê ji ber karanîna wê ya giran a çavkaniyên cîhazê dema ku naverokê temaşe dike, bişkîne. Wekî din, CSR ji bo malperên seyrûsefera zêde alternatîfek girîng e ji ber ku ew bêyî pêwendiya serverê ya zêde agahdarî pêşkêşî xerîdaran dike, ku di encamê de ezmûnek bikarhênerek zûtir çêdike.

2. Pêşkêşkera Aliyê Pêşkêşkar (SSR)
   Di dema pêşkêşkirina hêla serverê de, gerok ji serverê pelek HTML-ê daxwaz dikin, ku daneyên daxwazkirî digire, SPA-yê vedigire, û pelê HTML-ê ji bo serîlêdanê di rê de diafirîne. Dûv re materyalê gihîştî ji bikarhêner re tê pêşkêş kirin. Mîmariya SPA ji bo girêdana bûyeran, hilberandina DOMek virtual û pêkanîna operasyonên din hewce ye. Dûv re SPA ji bo karanîna tê amadekirin. SSR bernameyê bilez dike ji ber ku ew leza SPA-yê bi nebarkirina geroka bikarhêner re zêde dike.

3. Generatorê Malpera Statîk (SSG)
   Di nav çêkerê malpera statîk de, gerok tavilê ji serverê re ji bo pelek HTML daxwazek dikin. Rûpel ji bikarhênerê re tê xuyang kirin. SPA daneyan digire, dîtinan çêdike, û modela objeya belgeyê (DOM) dagir dike. Dûv re, SPA ji bo karanîna amade ye. Ji navî tê derxistin, SSG bi piranî ji bo rûpelên statîk maqûl in. Ew rûpelên statîk bi vebijarkek baş û bilez peyda dikin. Ji bo malperên xwedan naveroka dînamîkî, ji bikarhêneran tê şîret kirin ku yek ji du vebijarkên danasîna agahdariyê hilbijêrin.

Avantajên sepanên yek rûpel

Pargîdaniyên mezin ên mîna Meta, YouTube û Netflix ji serîlêdanên pirrûpelî derbasî serîlêdanên yek-rûpelî bûne. SPA serpêhatiyek bikarhênerek nermik, performansa bilind û bersivdar peyda dikin. Li jêr feydeyên karanîna serîlêdanên yek rûpelê hene.

1. Taybetmendiya caching
   Serlêdanek yek rûpel di dakêşana destpêkê de daxwazek yekane ji serverê re dike û her daneya ku werdigire hilîne. Xerîdar dikarin daneyên wergirtî bikar bînin da ku ger hewce bike negirêdayî bixebitin ku ev ji bikarhêneran re hêsantir dike ji ber ku ew dihêle ku ew çavkaniyên daneyê kêmtir bixwin. Di heman demê de, dema ku xerîdar têkiliyek Înternetê ya xirab hebe, heke pêwendiya LAN destûrê bide daneyên herêmî dikare bi serverê re were hevdeng kirin.
2. Bi lez û bersiv
   Bikaranîna SPA-yê dikare leza malperek çêtir bike ji ber ku ew li şûna nûvekirina tevahiya rûpelê tenê naveroka daxwazkirî nû dike. SPA li şûna rûpelek nû pelek JSON piçûk bar dikin. Pelê JSON leza barkirinê û karbidestiya zûtir peyda dike. Ew gihîştina tavilê ji hemî taybetmendî û fonksiyonên rûpelek re bêyî dereng encam dide. Ev zêdebûnek mezin e, ji ber ku dema barkirina malperek dikare bi girîngî bandorê li dahat û firotanê bike.

SPA bi peydakirina hemî agahdariya li ser rûpelê tavilê rê dide veguheztinên hêsan. Malper ne hewce ye ku were nûve kirin, ji ber vê yekê pêvajoyên wê ji serîlêdanên serhêl ên tîpîk bikêrtir in.

Di heman demê de, bi SPA, hebûnên wekî HTML, CSS, û nivîsar Java ew ê di jiyana serîlêdanê de tenê carekê werin girtin. Tenê daneyên pêwîst paş û paş têne veguheztin.

Rûpelên bi SPA di heman demê de rê dide bikarhêneran ku bi saya cachkirin û kêmkirina cildên daneyê zûtir rêve bibin. Tenê daneyên pêwîst paş û paş ve têne şandin û tenê beşên winda yên naveroka nûvekirî têne dakêşandin.

3. Debugging bi Chrome
   Debugging xeletî, xeletî, û qelsiyên ewlehiya serîlêdana webê yên ku performansê hêdî dikin tespît dike û radike. Bi amûrên pêşdebiran ên Chrome verastkirina SPA-yan hêsan tê çêkirin. Pêşdebir dikarin danasîna koda JS-ê ji gerokê kontrol bikin, SPA-yan xelet bikin bêyî ku di gelek rêzikên kodê de bişopînin.

SPA li ser çarçoveyên JavaScript-ê yên wekî AngularJS û Amûrên pêşdebiran React têne çêkirin, ku ew bi karanîna gerokên Chrome-ê verastkirina wan hêsantir dike.

Amûrên pêşdebir rê dide pêşdebiran ku fêm bikin ka gerok dê çawa daneyan ji pêşkêşkeran bixwaze, kaş bike, û dê çawa hêmanên rûpelê nîşan bide. Wekî din, van amûran rê didin pêşdebiran ku hêmanên rûpelê, karûbarên torê, û daneyên têkildar bişopînin û analîz bikin.

4. Pêşveçûna bilez
   Di pêvajoya pêşkeftinê de, pêş-end û paş-dawiya SPA-yê dikare were veqetandin, ku dihêle du an bêtir pêşdebiran bi hev re bixebitin. Guhertina pêşiyê an paşiya paşîn bandorê li dawiya din nake, bi vî rengî pêşveçûna zûtir pêşve dike.

Pêşdebir dikarin koda server-side ji nû ve bikar bînin û SPA-yê ji UI-ya pêşîn-end-ê veqetînin. Mîmariya veqetandî ya di SPA-yan de pêşandanên pêşîn û karûbarên paşîn ji hev vediqetîne. Ev rê dide pêşdebiran ku perspektîfan biguhezînin, ava bikin û biceribînin bêyî ku bandorê li naverokê bikin an ji teknolojiya paşîn-paş xeman bibin. Dûv re xerîdar dikarin bi karanîna van serlêdanan bibin xwedî ezmûnek domdar.

5. Tecrûbeya bikarhênerê çêtir kirin
   Bi SPA-yan re, bikarhêner bi yekcarî bi hemî naverokê re di cih de bigihîjin rûpelên ku têne dîtin. Ev hêsantir e ji ber ku bikarhêner dikarin bi rihetî û bêkêmasî bigerin. Wusa dixuye ku meriv sermaseyek xwemalî an serîlêdana mobîl bikar tîne.

SPA UXek erênî bi destpêk, navîn û dawînek cihêreng peyda dikin. Di heman demê de, bikarhêner dikarin bêyî tikandina pir zencîreyan, mîna MPA-yê, bigihîjin naveroka xwestinê. Dema ku bikarhêner tavilê bigihîjin agahdariyan, hûn rêjeyên guheztinê kêmtir dibînin, berevajî MPA-yên ku bikarhêner aciz dibin ji ber ku rûpel ji bo barkirinê demek girîng digire. Navîgasyon di heman demê de zûtir e ji ber ku hêmanên rûpelê ji nû ve têne bikar anîn.

6. Veguheztina nav sepanên IOS û Android
   Pêşdebirên ku dixwazin derbasî serîlêdanên iOS û Android-ê bibin divê SPA-yê bikar bînin ji ber ku veguheztina wan bi hêsanî hêsantir e. Ew dikarin heman kodê bikar bînin ku ji SPA veguherînin serîlêdanên mobîl. Ji ber ku tevahiya kodê di yek nimûneyê de tête peyda kirin, SPA-ê hêsan têne rêve kirin, ku wan ji bo serîlêdanên mobîl îdeal dike.
7. Lihevhatina cross-platform
   Pêşdebir dikarin bingehek kodek yekane bikar bînin da ku serîlêdanên ku dikarin li ser her amûr, gerok û pergala xebitandinê bimeşînin ava bikin. Ev ezmûna xerîdar zêde dike ji ber ku ew dikarin li her deverê SPA bikar bînin. Di heman demê de ew rê dide pêşdebiran û endezyarên DevOps ku dema ku serîlêdanên guherandina naverokê pêşve dibin, serîlêdanên dewlemend-taybetmendî ava bikin, di nav de analîtîkên rastîn.

Downsides

Tevî hemî avantajên serîlêdanên yek rûpelî, dema ku çarçoveyên SPA bikar tînin hin dezawantaj derdikevin. Xweşbextane, ji bo derbaskirina van pirsgirêkan bi SPAyan re xebat tê meşandin. Li jêr hin kêmasî hene;

1. Optimîzasyona Motora Lêgerînê (SEO)
   Bi gelemperî tê bawer kirin ku serîlêdanên rûpela yekane ji bo SEO ne baş in. Piraniya motorên lêgerînê, mîna Google an Yahoo, ji bo demekê nekarin malperên SPA-yê li ser bingeha danûstendinên Ajax-ê bi serveran re bişopînin. Wekî encamek, piraniya van malperên SPA-ê bêdestûr man. Heya nuha, botên Google-ê hatine fêr kirin ka meriv çawa JavaScript-ê li şûna HTML-ya birêkûpêk bikar tîne da ku malperên SPA-ê navnîş bike, ku ev yek zirarê dide rêzan.

Hewldana ku SEO di nav malperek SPA-ya amadekirî de bicîh bikin dijwar û biha ye. Pêşdebir neçar in ku malperek veqetandî ava bikin, ku ji hêla servera motora lêgerînê ve hatî pêşkêş kirin, ku bêbandor e û gelek kodên din jî vedigire. Teknîkên din ên wekî tespîtkirina taybetmendiyê û pêş-rendering jî dikarin werin bikar anîn. Di tesîsên SPA-yê de, ji bo her rûpelê yek URL-ya kapasîteyên SEO-yê ji bo SPA-yê sînordar dike.

2. Navîgasyon bişkojka paş û pêş
   Gerok agahdarî hildibijêrin da ku alîkariya rûpelên malperê zû bar bikin. Gava ku xerîdar bişkoja paşde lêdixin, pir kes li bendê ne ku rûpel di rewşek mîna dema paşîn a ku wan dîtiye de be, û ku veguheztin dê zû çêbibe. Mîmarên webê yên kevneşopî bi karanîna kopiyên cache yên malperê û çavkaniyên têkildar vê destûrê didin. Lêbelê, di pêkanîna nefsbiçûk a SPA-yê de, pêlkirina bişkoja paşîn bi tikandina lînkê re heman bandorek heye. Sedema daxwazek serverê, zêdebûna dereng, û guhertinên daneya xuya dike.

Ji bo ku hêviyên bikarhêner bicîh bînin û ezmûnek zûtir peyda bikin, pêşdebirên SPA pêdivî ye ku fonksiyona gerokên xwecî ku JavaScript bikar tînin teqlîd bikin.

3. Scroll location
   Gerok agahdariya wekî pozîsyona paşîn a paşîn a rûpelên serdankirî hilîne. Lêbelê, bikarhêner dikarin bibînin ku dema ku li SPA-yên navîgasyonê bişkojkên paş û pêş ên gerokê bikar tînin, pozîsyonên gerokê hatine guhertin. Mînakî, li ser Facebookê, carinan bikarhêner vedigerin pozîsyona xweya paşîn a paşîn, lê carinan na. Ev encam dibe sedema ezmûnek bikarhênerek nebaş ji ber ku ew neçar in ku bi desta vegerandina li cîhê geroka berê ji nû ve bidin destpêkirin.

Ji bo çareserkirina vê pirsgirêkê, pêşdebiran pêdivî ye ku kodek peyda bikin ku dema ku bikarhêner paş û paş digere, pozîsyona rastê ya gerîdeyê hildibijêre, hildide, û jê dipirse.

4. Analîzkirina malperê
   Bi lêzêdekirina koda analîtîk li ser rûpelek, bikarhêner dikarin seyrûsefera rûpelê bişopînin. Lêbelê, SPA dijwar dike ku hûn diyar bikin ka kîjan rûpel an naverok herî populer e ji ber ku ew tenê rûpelek yek e. Pêdivî ye ku hûn kodek din ji bo analîtîk peyda bikin da ku hûn rûpelên pseudo gava ku têne dîtin bişopînin.
5. Pirsgirêkên ewlehiyê
   SPA bêtir meyldar in ku bi rê ve werin tawîz kirin scripting site cross. Ew dihêlin xerîdar ku tevahiya serîlêdanê dakêşin, ji wan re bêtir fersend derdixin ku bi endezyariya berevajî ve qelsiyan bibînin. Ji bo çareserkirina vê pirsgirêkê, pêşdebiran divê pê ewle bibin ku hemî mantiqên alîgirê xerîdar ên ku bi ewlehiya serîlêdana malperê ve girêdayî ne, wek pejirandin û pejirandina têketinê, ji bo verastkirinê li ser serverê duqat dibe. Di heman demê de, pêşdebiran pêdivî ye ku gihîştina bingeha rola tixûbdar peyda bikin.

Di encamê de

Serlêdanên Yek Rûpelê di pêşkeftina ezmûnên sepanê de gava paşîn nîşan didin. Ew bileztir in, bêtir xwerû ne û dikarin bi taybetmendiyên pêşkeftî yên wekî xwerûkirinê re bêne yek kirin. Ji ber vê yekê pargîdaniyên çêtirîn ên ku bi gelek bikarhênerên hevdem re, wek Gmail, Netflix an nûçeyên Facebook-ê, xwe dispêrin mîmariya rûpelek yekane. Bi pêkanîna vê teknolojiyê, karsazî dikarin ji taybetmendiyên xwe yên serhêl bêtir nirx bistînin û wekî karsaziyek dîjîtal destwerdanên nû bikin.

Ercole Palmeri