Table of Contents[Qari][muuji]
Jawiga dhijitaalka ah ee xawliga ku socda, firfircoonida iyo tartanka maanta jira, ururada ugu guulaha badan ayaa caddayn u ah in macmiilku udub dhexaad u yahay inay tahay xeeladda kaliya ee waara ee lagu balaadhiyo ganacsiga. Fiiro gaar ah isticmaaleyaasha ayaa had iyo jeer sii yaraanaya, taasoo ku qasbaysa ganacsiyada inay helaan habab cusub oo ka wanaagsan si ay u siiyaan macaamiishooda khibrado aan kala go 'lahayn.
Haddii aad rabto inaad u abuurto isticmaalayaashaada khibrado soo jiidasho leh, kala soocan, oo aan xidhiidh lahayn, Codsiyada Bog Keliya (SPAs) ayaa ah dariiqa loo maro. Waa sababtaas awgeed in shirkado badani ay bilaabeen inay dhisaan xubno ka mid ah barnaamijyadooda khadka tooska ah iyaga oo isticmaalaya nashqad shabakadeed cusub oo loo yaqaan Hal Page Application.
SPA-yada ayaa sidoo kale loo isticmaalay in lagu abuuro Google iyo Facebook, labada behemoths kuwaas oo abka ay xoojiyaan qiyaasta maalinlaha ah ee internetka iyo dhaqdhaqaaqa warbaahinta bulshada.
Blog-gani waxa uu dabooli doonaa dhammaan qaybaha codsiga hal bog ah, oo ay ku jiraan mudnaantiisa, faraqa u dhexeeya hal bog iyo codsi bogag badan, qaab-dhismeedka HBS, iyo wax ka badan. Aan bilowno!
Waa maxay Codsiga Hal bog ah?
Codsiga hal bog ka kooban (SPA) waa hal bog (sidaa magaca ah) oo leh xog badan oo sideedii ahaanaysa iyo xoogaa xoogaa ah oo u baahan in hal mar la beddelo.
Codsiga hal bog ka kooban (SPA) waa bog, degel ama arji mareegaha oo gebi ahaanba ka dhex shaqeeya browser-ka oo uu ku shubo hal dukumeenti. Uma baahna bog ka cusboonaysiin inta lagu jiro isticmaalka, iyo badi walxuhu wali waxba kama beddelin halka qayb yar oo ka mid ah ay u baahan tahay cusboonaysiin.
Marka macluumaadka la beddelo, SPA waxay isticmaashaa JavaScript API-yada si ay sidaas u samayso. Isticmaalayaashu waxay geli karaan mareegaha iyaga oo aan kala soo degin bogga cusub iyo xogta habkan oo kale.
Natiijo ahaan, waxqabadku wuu fiicnaanayaa oo waxaad dareemaysaa inaad isticmaalayso barnaamij hooyo. Waxay siisaa macaamiisha khibrad khadka tooska ah oo firfircoon. HBS waxay ka dhigtaa mid toos ah, shaqaynaysa, oo fudud isticmaalayaasha inay ku jiraan hal deegaan oo dhijitaal ah oo aan dhibsanayn.
Sawirka hoose wuxuu muujinayaa xaalad uu isticmaaluhu la falgalayo biraawsarkooda, kaaso ka dhigaya API su'aalo adeega si toos ah. Barrawsarku wuxuu u soo diraa su'aalo toos ah API ka dib markii uu ka helo JavaScript-ka iyo koodhka isha HTML ee macmiilka. Sababtoo ah wax walba si toos ah ayaa loogu sameeyaa browserka, server-ka abka waligii uma soo diro API weydiimaha adeega.
Sidee u shaqeeyaan Codsiyada Hal-bog keliya?
Barnaamijyada hal bog ka kooban waxay leeyihiin qaab dhismeed toosan. Tignoolajiyada samaynta dhinaca macmiilka iyo dhinaca server-ka ayaa labadaba la isticmaalaa. Aynu sheegno inaad rabto inaad tagto shabakad gaar ah.
Marka aad URL-keeda ku qorto biraawsarkaaga si aad u codsato marin u helka, browserku waxa uu codsiga u gudbiyaa adeegaha, kaas oo kaga jawaabaya dukumeenti HTML ah. Seerfarku wuxuu keenaa nuxurka HTML codsiga ugu horreeya marka la isticmaalayo HBS, iyo xogta JSON ee su'aalaha mustaqbalka.
Tani waxay tusinaysaa in halkii dib loo soo rari lahaa bogga shabakadda oo dhan, HBS ay dib u dhisi doonto waxa bogga hadda jira. Natiijo ahaan, waxaa yaraatay baahida dib u dejinta marar badan, iyo waxqabadka waa la hagaajiyay. Habkani wuxuu u oggolaanayaa SPA inay u shaqeyso si la mid ah abka waddaniga ah.
Codsiyada bogag badan isku mid maaha codsiyada hal bog (MPAs). Marka isticmaaluhu uu codsado xog cusub, kuwa dambe waa barnaamijyo shabakadeed oo leh bogag badan oo dib loo raray.
Intaa waxa dheer, SPA-yadu waxa ay qaadan karaan wakhti dheer in ay marka hore ku shubaan, laakiin marka la raro, waxa ay bixiyaan hawl qabad dheereeya iyo hagitaan bilaa xad ah. MPA-yadu waxay noqon karaan kuwo caajis ah oo u baahan internet xawaarihiisu sarreeyo, gaar ahaan marka la isticmaalayo qaybaha garaafyada. Amazon iyo Google Docs waa laba tusaale oo MPA ah.
Codsiga Hal-bog Vs Codsiga Bog-badan
Istaraatiijiyada abka badan ee bogag badan leh (MPA) kama baahna wax aqoon ah oo JavaScript ah dhanka kooxdaada horumarineed (inkasta oo isku xidhka hore iyo dambeedkaba ay ka dhigan tahay in goobuhu u janjeeraan inay qaataan waqti dheer in la dhiso). Markaad ku darto bog kale, waxaad kori kartaa alaabta inta aad rabto, iyo sababtoo ah macluumaadka bog kasta waa mid taagan, Raadinta Mashiinka Raadinta (SEO) caadi ahaan waa mid fudud.
MPA-yada, dhanka kale, aad bay u gaabis u yihiin isticmaalka maadaama bog kasta oo cusub laga soo rari karo xoq. Haddii waxa ku jira mareegahaagu yahay (inta badan) akhri-kaliya, in kastoo, MPA waxay noqon kartaa waxa aad u baahan tahay oo dhan. Faa'iidada aasaasiga ah ee codsiyada hal-bog ah waa degdegtooda.
Intaa waxaa dheer, SPA-yadu aad ayay uga fiican yihiin bixinta hawlqabad ballaadhan marka loo eego MPA-yada, waxayna kaydiyaan macluumaadka si barnaamijka looga faa'iidaysto offline.
Khasaaraha ugu weyn ee HPA-yada ayaa ah in dabeecadda firfircoon ee ka koobani ay ka dhigayso SEO iyo helitaanka mid aad u adag. Gurguurta iyo makiinadaha wax baadhista ayaa u xuubsiibteen si ay si wanagsan ula macaamilaan abka noocaan ah maadaama ururo badan ay qaataan SPA-yada.
Taasi waxay tidhi, apps-ka-hal-bog daruuri maaha inay ka sarreeyaan abka bogag badan, iyo lidkeeda. Labada farsamooyinba waxay leeyihiin faa'iidooyin iyo faa'iido darrooyin.
Faa'iidooyinka MPA-yada ee SPA-yada waxay bilaabi doonaan inay hoos u dhacaan marka gurguurta webka iyo tusmaynta walaacyada hore ee la xidhiidha codsiyada hal bog ah la saxo, tan dambena waxay runtii noqon doontaa heerka caadiga ah ee abka internetka ee casriga ah.
Qaababka Codsiga Bog Keliya
Haddii aad soo gabagabaysay in abuurista HBS ay tahay habka ugu wanaagsan ee lagu dabooli karo baahida shirkaddaada, waxaad u baahan doontaa inaad ku dhisto qaab HBS adag. Waxaan soo diyaarinay liiska qaab-dhismeedka codsiga ee hal bog ee ugu wanagsan ee abka webka qani ah ee maamuli kara qaab dhismeedka codsiga. Qaab dhismeed kastaa wuxuu leeyahay astaamo iyo awoodo gaar ah.
1. Diido
Jawiga dhijitaalka ah ee maanta firfircoon, marka dunidu si xoog leh ugu riixdo dhanka isbeddelka dhijitaalka ah, ururradu waxay geliyeen Scalability & Debacsanaan aagagga xooga saaraya bilowgiiba, taas oo hore u ahayd fikir danbe. Natiijo ahaan, in maskaxda lagu hayo sifadan muhiimka ah iyada oo la samaynayo codsi hal bog ah waa waajib.
ReactJS waa qaab-dhismeed cajiib ah oo la isticmaalo haddii miisaanka iyo dabacsanaanta ay yihiin mudnaanta sare ee shirkaddaada. Dayactirka codsi hal bog ah oo la abuuray iyadoo la isticmaalayo React waa mid aad u fudud sababtoo ah naqshadeeda ku salaysan.
DOM Virtual waxa lagu daray bogga ReactJS. Waxay u ogolaataa kooxda horumarinta inay la socdaan oo ay cusbooneysiiyaan isbeddelada iyaga oo aan saameyn ku yeelan qaybaha kale ee geedka, taas oo u oggolaanaysa codsigu inuu noqdo mid dabacsan.
Maktabadaha goonida u taagan, ReactJS way ka badan tahay la qabsiga qaab-dhismeedka kale, taas oo u oggolaanaysa waqtiyo jawaab celin degdeg ah iyo samaynta qaabka ugu wanaagsan ee horumarinta HBS. Sababtoo ah labada dhinacba waxay isticmaalaan ReactJS, qaab-dhismeedku wuxuu u oggolaanayaa wadaagista culeyska u dhexeeya serverka iyo macmiilka.
2. Xaglo
Shirkaduhu waxay la kulmaan dhibaato joogta ah markay isku dayayaan inay riixaan shabakada si ay wax badan u qabtaan: codsiga 'Performance'. Goobuhu maanta waxay leeyihiin astaamo ka duwan sidii hore, taas oo ku adkeynaysa ganacsiyada inay ka helaan waxqabad wanaagsan dhammaan aaladaha kala duwan.
Natiijo ahaan, markaad dooranayso qaab-dhismeedka codsiga hal bog, waxqabadku waa muhiim. Marka ay timaado xawaaraha codsiga hal bog, ma jiro qaab ka wanaagsan AngularJS.
Shaqeynta ku-xidhka xogta ee AngularJS waxay ka fogaataa koodka badan oo horumariyahu ay tahay inuu sameeyo si kale. Natiijo ahaan, ka faa'iidaysiga Angular si loo abuuro codsi hal bog ah waxay u baahan tahay khadadka koodka oo yar waxayna bixisaa xawaare aad u wanaagsan.
Codsiyada ku saleysan AngularJS waxaa lagu yaqaanaa inay si degdeg ah u rartaan. Tan waxa suurtageliyay AngularJS' qaybta router ee shaqaynta, kaas oo bixisa kala soocida koodka tooska ah. Waxay u ogolaataa isticmaalayaasha inay kaliya ku shubaan koodka codsadaha si ay u arkaan. HBS oo lagu dhisay qaabka AngularJS waxay ku socon kartaa madal kasta.
3. Vue
VueJS waa qaabka ugu weyn ee horumarinta codsiga shabakadda ee hal bog ah marka lagu daro maktabadaha taageeraya saxda ah iyo qalabaynta casriga ah. Vue.js waxa ay fududaysaa isgaadhsiinta laba-geesoodka ah iyada oo ka dhigaysa baloogyada HTML si fudud in loo maareeyo iyada oo ay ugu wacan tahay naqshadeeda MVVM.
Isku xidhka xogta labada dhinac waa shaqeyn aan caan ku ahayn qaab-dhismeedka kale sida React.js. Vue.js waxa kale oo loo yaqaan qaab-dhismeedka falcelinta tan iyo markii ay ka fal-celiso isbeddelada xogta. Vue.js waxaa loo arkaa inuu yahay kan ugu wanaagsan labada adduun, isku darka Falcelin iyo Xaglo.
Waxay isticmaashaa Virtual DOM oo waxay ku salaysan tahay qayb, sida React, taasoo ka dhigaysa mid aad u degdeg badan. Si kastaba ha ahaatee, waxay bixisaa awaamiirta iyo xogta laba-geesoodka ah, taas oo ka dhigaysa qaab-dhismeed falcelineed sida Angular. Vue.js ma aha qaab-dhismeedka ama maktabad.
Waxay bixisaa isku darka qumman ee awoodaha lagu dhisayo HBS, wayna fududahay in wax badan lagu daro, sida Maamulka Gobolka iyo Jideynta.
4. Laf-dhabarta.JS
Waa mid ka mid ah qaab-dhismeedka HBS ee ugu caansan ee lagu dhisayo abka shabakada la qabsan karo, waxayna ku salaysan tahay qaabka naqshadeeyaha MVP. Waxay leedahay router, moodallo, dhacdooyin, aragtiyo, ururin, iyo tiro astaamo kale oo fantastik ah oo ka dhigaya abuurista HBS mid fudud oo degdeg ah.
Laf-dhabarta.JS waa qaab-dhismeedka caanka ah ee abuuritaanka hal bog oo codsi ah. Qaabka muuqaalka moodeelkeedu waxa uu qabtaa in ka badan uun in uu caawiyo horumariyayaasha si ay u qaabeeyaan kaabayaashooda JS. Asal ahaan, waxaa loo isticmaalaa in lagu xaddido codsiyada HTTP serferka oo loo fududeeyo kakan interface interface naqshado.
Waa qaab-dhismeedka qaan-gaadhka ah ee lagu dhisayo hal bog codsiyada webka oo leh bulsho weyn. Tiro badan oo maktabado ah, cabbir yar, kood aan la taaban karin, isgaarsiin ay horseed u tahay dhacdo, iyo hab-samaynta habka codeeynta ayaa ah dhowr ka mid ah sifooyinkiisa yaabka leh.
5. Ember.JS
Interface-ka isticmaalaha (UI) waa qayb muhiim ah oo ka mid ah barnaamij kasta oo si deg deg ah kaaga soocaya tartankaaga. Haddii ay u diri karto guud ahaan is-dhexgalka isticmaalaha macmiilka, codsi hal bog ah ayaa loo arkaa kan ugu waxtarka badan. Natiijo ahaan, waxay kor u qaadaysaa waxqabadka guud ee shabakadda.
Haddii mid ka mid ah welwelka ugu weyn ee app-kaagu yahay is-dhexgalka isticmaalaha, waa inaad tixgelisaa isticmaalka EmberJS qaab dhismeed ahaan. EmberJS, sida AngularJS, waxay leedahay xogta laba-geesoodka ah, taas oo hubinaysa in aragtida iyo moodelku ay had iyo jeer isku mid yihiin.
Waa suurtogal in lagu soo dedejiyo samaynta DOM ee dhinaca server-ka ah iyada oo la adeegsanayo moduleka Ember FastbootJS, taasoo keentay UI adag oo ka sii wanaagsan. EmberJS, kaas oo lagu dhisay isku xidhka laba-geesoodka ah, ayaa hagaajiya UI sida ay xogta isu beddesho.
Natiijo ahaan, way fududahay in la qeexo is-dhexgalka isticmaalaha oo fahma goorta la cusboonaysiinayo. EmberJS waa qaab-dhismeedka il furan oo leh fikrado adag oo dhiirigeliya xoriyada weyn. Natiijo ahaan, waa doorasho wanaagsan in la abuuro barnaamijyo shabakadeed hal bog ka kooban sifo leh oo leh hawlkarnimo ballaaran. Nordstrom, Kickstarter, LinkedIn, Netflix, iyo qaar badan oo ka mid ah noocyada kale ee waaweyn ayaa isticmaala qaabkan.
Faa'iidooyinka HBS
1. Khibrad isticmaale oo wanaagsan
Khibrada isticmaale ee wanaagsan ayaa muhiim u ah guusha codsiga. Marka loo eego tirokoobyo dhowr ah, booqdayaashu waxay ka tagaan boggaga internetka ee caajiska ah oo ay adag tahay in la isticmaalo. Isticmaalayaashu maaha inay sugaan walxaha dhammaystiran si ay u soo kiciyaan haddii ay rabaan qayb ka mid ah oo keliya iyagoo isticmaalaya HBS. Taa baddalkeeda, macaamiishu waxay heli karaan macluumaadka ay u baahan yihiin si dhakhso ah, taas oo wanaajisa khibradooda HBS.
2. Xawaaraha la hagaajiyay
Barnaamijyada shabakadu waa inay ahaadaan kuwo aad u dheereeya oo ayan lumin wakhtiga isticmaalayaasha; haddii kale, dadku waxay raadsan doonaan goobo waxtar leh. Sababtoo ah mareegaha buuxa maaha inuu dib u soo kiciyo oo kaliya xogta ku jirta qaybaha la codsaday ayaa isbedelaya, HBS waxay bixiyaan waqtiyo jawaab celin degdeg ah. Natiijo ahaan, waxqabadka abka webka ayaa si weyn u horumaray.
3. Isticmaalka kheyraad yar
Hal Page Apps waxay isticmaalaan xajmigoodu yar yahay sababtoo ah boggaga hal mar kaliya ayaa la raray. Waxay sidoo kale ka shaqeeyaan gobollada leh xiriir internet oo gaabis ah, taas oo ka dhigaysa mid la heli karo qof kasta. Intaa waxaa dheer, si ka duwan MPA-yada sida Google Docs, waxay ku shaqeeyaan offline, iyagoo ilaalinaya xogtaada, markaa uma baahnid inaad siiso xiriir joogto ah oo internet si aad u aragto oo uga shaqeyso iyaga.
4. kaydin wax ku ool ah
Sababtoo ah waxay kaliya u dirtaa hal codsi serferka kadibna waxay cusbooneysiisaa xogta kale, Hal Page App si dhakhso ah ayuu u kaydin karaa xogta. Habkan, waxay awood u yeelan doontaa inay ku shaqeyso xitaa haddii aadan ku xidhnayn internetka. Haddii xidhiidhka isticmaalaha uu lumo, xogta deegaanka waxa lala jaanqaadi karaa serferka marka xidhiidhka dib loo soo celiyo.
5. Dejinta waa sahlan tahay.
Debuxinta arjiga waxa ay hubisaa in aanay waxba ka hor istaagi karin in uu qabto sida ugu fiican iyada oo la ogaanayo lana saxayo khaladaadka iyo dhibaatooyinka sababi kara in uu hoos u dhaco. Sababtoo ah waxaa lagu abuuray qaab-dhismeedka caanka ah sida React, Angular, iyo Vue.js, Codsiyada Bog Keliya waa sahlan tahay in lagu saxo Google Chrome. Qaybaha bogga, xogta, iyo hababka shabakada dhamaantood si diyaar ah ayaa loola socon karaa oo loo baari karaa.
6. Waafaqid dhowr goobood
Isticmaalka hal codebase, horumariyayaashu waxay abuuri karaan abka ka shaqeeya nidaam kasta oo qalliin, qalab, ama browser. Natiijo ahaan, waxay wanaajisaa khibradda macaamiisha iyadoo u oggolaanaysa inay galaan HBS meel kasta oo ay doortaan. Intaa waxaa dheer, horumariyayaashu waxay abuuri karaan abka qani ku ah sifo fudud. Tusaale ahaan, marka la naqshadeynayo qalabka tafatirka nuxurka, waxay isku dari karaan tirakoobka waqtiga-dhabta ah.
Dib u dhaca HBS
1. hanjabaad online ah
Khataraha intarneedka sida qoraal-qorista-goobadaha (XSS) ayaa aad ugu nugul HBS marka loo eego MPA-yada. Weeraryahanadu waxay isticmaali karaan XSS si ay u waxyeeleeyaan abka shabakada iyaga oo duraya qoraalada dhinaca macmiilka ah. Intaa waxaa dheer, xaddidaadda gelitaanka si adag looma dhaqan geliyo heerka hawlgelinta. Haddii horumariyayaashu aysan qaadin tillaabooyin, xogta xasaasiga ah iyo shaqeynta ayaa laga yaabaa in la kashifo.
2. Taariikhda biraawsarkaaga
Taariikhda browserka laguma kaydiyo HBS. Haddii aad u gudubto wixii la soo dhaafay macluumaad kasta oo faa'iido leh, waxa kaliya ee aad ka heli karto waa isku xirka HBS ee mareegaha buuxa. Intaa waxaa dheer, ma awoodid inaad dib ugu soo noqoto HBS. Haddii aad isticmaasho badhanka dambe, waxa laguu diri doonaa bog shabakadeed oo hore loo raray halkii uu ahaan lahaa gobolkii hore. Isticmaalka HTML5 History API, si kastaba ha ahaatee, cilladaan waa laga gudbi karaa.
3. Waqtiyada rarka hore
Inkasta oo HBS ay caan ku yihiin xawligooda iyo waxqabadkooda, waxay qaadataa wakhti dheer in goobta oo dhan ay soo shubato. Waxa laga yaabaa inay ka cadhaysiiso isticmaaleyaasha qaar, taasoo ku keenta inaanay mar dambe isticmaalin abka.
4. Natiijooyin SEO ah oo aan waxtar lahayn
Qaab dhismeedka HBS wuxuu ka kooban yahay hal bog oo leh hal URL. Waxay xaddidaysaa awoodda HBS si ay uga faa'iideysato hagaajinta mashiinka raadinta (SEO). Sababtoo ah waxaa jira tartan aad u badan, xeeladaha SEO ayaa kaa caawin kara inaad kor u qaaddo qiimeynta goobtaada natiijooyinka raadinta raadinta.
Way adagtahay in loo hagaajiyo SEO sababtoo ah waxaa jira hal URL oo kaliya oo aan lahayn wax cusub ama cinwaano gaar ah. Tilmaan-bixinta, falanqaynta xooggan, xidhiidhada gaarka ah, xog-ururinta, iyo sifooyin kale ayaa dhamaantood maqan. Goobaha noocan oo kale ah waxay leeyihiin waqti adag in lagu falanqeeyo bots raadinta, taasoo ka dhigaysa hagaajinta mid adag.
Ugu Dambeyn
Haddii aad rabto in aad dhisto codsi ka jawaab celin badan, dhaqso badan, oo sifo qani ah u leh xiriirka bulshada, Ganacsiga SaaS, cusbooneysiinta tooska ah, iyo wixii la mid ah, Codsiyada Bog Keliya (SPAs) ayaa ku caawin kara.
Natiijo ahaan, qiimee ujeedooyinkaaga iyo yoolalkaaga si aad u aragto haddii HBS ay kugu habboon tahay, ka dibna dooro qaabka JavaScript si aad u bilowdo.
Ujeedadu waa in la sahamiyo kartida buuxda ee SPA-yada haddii shirkad ay rabto inay dhisto badeecad iyada oo ujeedadu tahay dhammaadka soo-gaadhista, ka-qaybgalka xooggan ee isticmaalaha, iyo wax-soo-saarka sare si loo fuliyo hawlo ama si isdhexgal ah loo baadho xogta.
Leave a Reply