Ripanga o Ihirangi[Huna][Whakaatu]
I roto i te taiao matihiko tere, hihiri, whakataetae hoki, ko nga whakahaere tino angitu he tohu ko te noho-a-kaihoko anake te rautaki tauwhiro hei whakawhanui pakihi. Kei te iti haere te aro o nga kaiwhakamahi, e akiaki ana i nga pakihi ki te rapu tikanga hou me te pai ake hei whakarato i nga wheako pai ki o raatau kaihoko.
Mena kei te pirangi koe ki te hanga wheako whakahihiri, motuhake, maamaa hoki mo o kaiwhakamahi, Ko nga Tono Wharangi Kotahi (SPA) te huarahi hei haere. Koinei te take i timata ai te maha o nga kamupene ki te hanga huānga o a raatau taupānga ipurangi ma te whakamahi i tetahi hoahoa tukutuku hou e kiia nei ko te Tono Wharangi Kotahi.
I whakamahia ano nga SPA ki te hanga i a Google me Facebook, nga behemoths e rua e kaha ana o raatau taupānga ki to horopeta ipurangi me nga mahi pāpāho pāpori.
Ka hipokina e tenei blog nga waahanga katoa o te tono wharangi kotahi, tae atu ki ona painga, te rereketanga i waenga i te wharangi kotahi me te tono wharangi maha, anga SPA, me te maha atu. Kia timata tatou!
He aha te tono wharangi kotahi?
Ko te tono wharangi-kotahi (SPA) he wharangi kotahi (koia te ingoa) me te maha o nga raraunga e noho rite tonu ana me etahi moka noa me whakarereke i te wa kotahi.
Ko te tono wharangi kotahi (SPA) he wharangi paetukutuku, paetukutuku, tono paetukutuku ranei e rere katoa ana i roto i te kaitirotiro me te uta i te tuhinga kotahi anake. Kaore e hiahiatia kia whakahouhia te wharangi i te wa e whakamahia ana, a ko te nuinga o nga rauemi kare tonu i te rereke i te mea he iti noa te waahanga me whakahou.
Ina huri te ihirangi, ka whakamahia e te SPA nga API JavaScript hei mahi pera. Ka taea e nga kaiwhakamahi te uru ki tetahi paetukutuku me te kore e tango i te wharangi hou me nga raraunga mai i te tūmau i tenei tikanga.
Ko te mutunga mai, ka pai ake te mahi me te mohio kei te whakamahi koe i tetahi kaupapa taketake. Ka whakawhiwhia ki nga kaihoko he wheako ipurangi kaha ake. Ko nga SPA he maamaa, he mahi, he ngawari hoki mo nga kaiwhakamahi ki te noho i roto i te taiao mamati kotahi, ngawari noa.
Ko te kauwhata i raro nei e whakaatu ana i tetahi ahuatanga e taunekeneke ana te kaiwhakamahi me tana kaitirotiro, katahi ka tukuna nga patai API ki te ratonga. Ka tukuna e te kaitirotiro nga patai API tika ki te ratonga i muri i te whiwhi i te waehere puna JavaScript me HTML mai i te kiritaki. Na te mea ka mahia tika nga mea katoa i roto i te kaitirotiro, kaore rawa te kaitoro o te taupānga e tuku patai API ki te ratonga.
Me pehea te mahi a nga tono wharangi kotahi?
Ko nga taupānga wharangi kotahi he hoahoanga ngawari. Ka whakamahia nga hangarau whakaputa taha-kiritaki me te taha-tumau. Me kii e hiahia ana koe ki te haere ki tetahi paetukutuku.
Ina pato koe i tana URL ki roto i to kaitirotiro ki te tono uru, ka tukuna e te kaitirotiro te tono ki tetahi tūmau, ka whakautu me te tuhinga HTML. Ka tukuna e te tūmau nga ihirangi HTML anake mo te tono tuatahi ina whakamahi ana i te SPA, me nga raraunga JSON mo nga patai a meake nei.
Ko te tikanga tenei, kaua e utaina te wharangi paetukutuku katoa, ka hanga ano e te SPA nga ihirangi o te wharangi o naianei. Ko te mutunga, he iti ake te hiahia ki te whakahou i nga wa katoa, ka pai ake te mahi. Ma tenei ahuatanga ka taea e te SPA te mahi rite ki tetahi taupānga taketake.
Ko nga tono wharangi maha kaore e rite ki nga tono wharangi kotahi (MPA). Ina tono te kaiwhakamahi i nga raraunga hou, ko enei he kaupapa tukutuku me te maha o nga wharangi ka utaina ano.
I tua atu, ka roa pea te utaina o nga SPA i te tuatahi, engari ka utaina, ka tere ake te mahi me te whakatere ngawari. Ka puhoi nga MPA me te hiahia ipurangi tere, ina koa ka whakamahi i nga waahanga whakairoiro. Ko Amazon me Google Docs nga tauira e rua o nga MPA.
Taupānga Wharangi Takitahi vs Taupānga Wharangi-maha
Ko te rautaki taupānga maha-wharangi paerewa (MPA) karekau he matauranga JavaScript mo to roopu whanaketanga (ahakoa te hono o mua me muri-mutunga ko te tikanga he roa ake te hanga o nga waahi). Ma te taapiri i tetahi atu wharangi, ka taea e koe te whakatipu i nga rawa kia rite ki taau e pai ai, a na te mea he pateko nga korero kei ia wharangi, he maamaa noa te Rapu Engine Optimization (SEO).
Ko nga MPA, he puhoi ake te whakamahi i te mea me utaina ia wharangi hou mai i te wahanga. Mena ko te ihirangi o to paetukutuku he panui-anake (te nuinga), ko te MPA te mea e hiahia ana koe. Ko te tino painga o nga tono wharangi kotahi ko to ratou tere.
I tua atu, he pai ake nga SPA ki te tuku mahi nui atu i nga MPA, a ka huna e ratou nga korero kia taea ai te whakamahi tuimotu.
Ko te tino kino o nga SPA ko te ahua hihiri o o raatau ihirangi ka uaua ake te SEO me te kitea. Kua piki ake nga ngoki me nga miihini rapu kia pai ake te whakahaere i tenei momo tono na te maha o nga whakahaere e awhi ana i nga SPA.
E ai ki tera, ko nga taupānga wharangi kotahi ehara i te mea pai ake i nga taupānga maha-wharangi, me te rereke. He painga me nga huakore nga tikanga e rua.
Ko nga painga o nga MPA i runga i nga SPA ka timata ki te whakaheke i te wa e whakatikahia ana te kaipakihi tukutuku me nga awangawanga taupū e hono ana ki nga tono wharangi kotahi, a ka noho ko enei te tikanga mo nga taupānga ipurangi hou.
Anga Taupānga Wharangi Kotahi
Mena kua whakatau koe ko te hanga SPA te huarahi pai ki te whakatutuki i nga hiahia o to kamupene, me hanga e koe ki runga i te angamahi SPA totoka. Kua whakahiatohia e matou he rarangi o nga anga tono wharangi kotahi pai rawa atu mo nga taupānga tukutuku whai rawa ka taea te whakahaere i nga hanganga tono nui. Kei ia anga he huinga ahuatanga me ona kaha.
1. tauhohe
I roto i te taiao whakamamati hihiko o enei ra, i te wa e pana ana te ao ki te hurihanga matihiko, kua whakauruhia e nga whakahaere te Whakanuia me te Whakangoikoretanga ki roto i o raatau kaupapa matua mai i te tiimatanga, he mea whakaaro i mua. Ko te mutunga mai, me mau tonu tenei ahuatanga nui i te wa e whakawhanake ana i te tono wharangi kotahi.
Ko te ReactJS he anga tino pai hei whakamahi mena he kaupapa matua mo to kamupene te tauineine me te ngawari. Ko te tiaki i tetahi tono wharangi kotahi i hangaia ma te whakamahi i te React he tino ngawari na runga i tana hoahoa-waahanga.
He DOM Mariko kei roto i te wharangi ReactJS. Ka taea e te roopu whanaketanga te whai me te whakahou i nga huringa me te kore e pa ki etahi atu waahanga o te rakau, kia ngawari ake te tono.
Mo ona whare pukapuka tu-kotahi, he pai ake te urutau a ReactJS i era atu anga, e tuku ana i nga wa whakautu tere me te hanga hei anga pai mo te whakawhanake i nga SPA. Na te mea kei te whakamahi nga taha e rua i te ReactJS, ka taea e te angamahi te tiritiri kawenga i waenga i te tūmau me te kiritaki.
2. t
He uaua tonu nga umanga i te wa e ngana ana ki te pana i te paetukutuku kia nui ake te whakatutuki: tono 'Mahi.' He maha ake nga ahuatanga o nga waahi o enei ra i nga wa o mua, na te mea he uaua ki nga umanga kia eke ki nga mahi pai puta noa i nga taputapu maha.
Ko te mutunga, i te wa e whiriwhiri ana i tetahi anga tono wharangi kotahi, he mea nui te mahi. Ina tae mai ki te tere tono kotahi-wharangi, kaore he anga pai ake i te AngularJS.
Ko te mahi herenga raraunga a AngularJS ka karo i te maha o nga waehere ka mahia e te kaiwhakawhanake. Ko te mutunga, ko te whakamahi i te Angular ki te hanga tono wharangi kotahi me iti ake nga rarangi waehere me te tere tere.
Ko nga tono a-AngularJS e mohiotia ana mo te tere ki te uta. Ka taea tenei e te AngularJS 'taumahinga pouara, e whakarato ana i te wehenga waehere aunoa. Ka taea e nga kaiwhakamahi te uta noa i te waehere tono mo te tirohanga. Ko te SPA i hangaia me te angamahi AngularJS ka taea te whakahaere i runga i tetahi papanga.
3. Tiro
Ko VueJS te anga nui rawa atu mo te whanaketanga tono paetukutuku kotahi wharangi ka honoa me nga whare pukapuka tautoko tika me nga taputapu o naianei. Ko te Vue.js e whakahaere ana i nga korero e rua-ara ma te ngawari ki te whakahaere i nga poraka HTML na tana hoahoa MVVM.
Ko te herenga raraunga-rua he mahinga kaore i te rongonui i etahi atu anga penei i a React.js. Kei te mohiotia ano a Vue.js he anga tauhohenga na te mea ka aro ki nga huringa o nga raraunga. Ko te Vue.js te mea pai rawa atu o nga ao e rua, te whakakotahi React and Angular.
Ka whakamahia e ia te DOM Mariko me te hanga-waahanga, pera i te React, he tere rawa. Heoi, ka tukuna he tohutohu me te herenga raraunga e rua-ara, ka waiho hei anga tauhohe penei i te Angular. Ehara a Vue.js i te anga, i te whare pukapuka ranei.
Ka whakaratohia e ia te huinga tino pai o nga kaha mo te hanga SPA, a he ngawari ki te taapiri atu, penei i te Whakahaere Kawanatanga me te Ararere.
4. Te tuara.JS
Koia tetahi o nga anga SPA tino rongonui mo te hanga i nga taupānga tukutuku urutau, a he mea hanga i runga i te tauira hoahoa MVP. He pouara, he tauira, he huihuinga, he tirohanga, he kohinga, me te maha atu o nga ahuatanga whakahirahira e ngawari ai te hanga SPA.
He anga rongonui a Backbone.JS mo te hanga tono wharangi kotahi. Ko tana anga tirohanga tauira ka nui ake i te awhina i nga kaiwhakawhanake ki te hanga i o raatau hanganga JS. Ko te tikanga, ka whakamahia ki te aukati i nga tono HTTP ki te tūmau me te whakangawari i te uaua atanga kaiwhakamahi whakaaro.
He anga pakeke mo te hanga wharangi kotahi tono tukutuku me te hapori nui. Ko te tini o nga whare pukapuka, te rahi iti, te waehere waitara, te whakawhitiwhiti korero-a-takahanga, me nga tikanga ahua whakawaehere etahi noa o ona ahuatanga whakamiharo.
5. Ember.JS
Ko te atanga kaiwhakamahi (UI) tetahi waahanga nui o tetahi papatono ka tere wehe koe i to whakataetae. Mena ka taea e ia te tuku i te atanga kaiwhakamahi katoa ki te kiritaki, ka kiia ko te tono kotahi-wharangi te tino pai. Ko te mutunga, ka piki ake te mahinga katoa o te whatunga.
Mena ko tetahi o nga tino awangawanga o to taupānga ko te atanga kaiwhakamahi, me whakaaro koe ki te whakamahi i te EmberJS hei anga. Ko te EmberJS, penei i a AngularJS, he hononga raraunga e rua-ara, e whakarite ana kei te tukutahi tonu te tirohanga me te tauira.
Ka taea te akiaki i te whakaputanga DOM taha-tūmau me te kōwae Ember FastbootJS, ka pai ake nga UI matatini. Ko te EmberJS, he mea hanga i runga i nga hononga e rua-ara, ka whakatika i te UI ka huri nga raraunga.
Ko te mutunga, he ngawari ki te tautuhi i tetahi atanga kaiwhakamahi e mohio ana ki te wa e whakahou ai. Ko te EmberJS he anga-puna tuwhera me nga whakaaro kaha e akiaki ana i te mana rangatira. Ko te mutunga mai, he pai te kowhiringa mo te hanga i nga taupānga paetukutuku-wharangi-a-waahanga me te maha o nga mahi. Ko Nordstrom, Kickstarter, LinkedIn, Netflix, me te tini o etahi atu tohu nui e whakamahi ana i tenei anga.
Nga painga o te SPA
1. He pai ake te wheako kaiwhakamahi
He mea nui te wheako kaiwhakamahi pai ake mo te angitu o te tono. E ai ki te maha o nga tatauranga, ka whakarerea e nga manuhiri nga wharangi ipurangi he puhoi me te uaua ki te whakamahi. Kaore nga kaiwhakamahi e tatari mo te katoa o nga rauemi ki te whakahou mena ka hiahia noa ratou ki tetahi waahanga ma te whakamahi i nga SPA. Engari, ka taea e nga kaihoko te tiki i nga korero e hiahiatia ana kia tere ake, e pai ake ai o raatau wheako SPA.
2. Kua pai ake te tere
Me tere ake nga taupānga Tukutuku kia kaua e moumou te wa o nga kaiwhakamahi; ki te kore, ka rapu nga tangata i nga waahi pai ake. Na te mea karekau te katoa o te paetukutuku ki te whakahou me te whakarereke noa nga raraunga i roto i nga waahanga ihirangi i tonohia, ka tere ake nga wa whakautu a nga SPA. Ko te mutunga, ka tino pai ake te mahinga o te taupānga tukutuku.
3. He iti ake te whakamahi rauemi
He iti ake te whakamahi i nga tono wharangi kotahi na te mea kotahi noa te utaina o nga wharangi. Ka mahi ano ratou ki nga rohe he puhoi ake nga hononga ipurangi, ka uru atu ki tetahi. I tua atu, kaore i rite ki nga MPA pera i a Google Docs, kei te mahi tuimotu, te tiaki i o raraunga, no reira kaore koe e whai hononga ipurangi ki a raatau ki te tiro me te mahi ki runga.
4. Keteroki whai hua
Na te mea kotahi anake te tono ki te tūmau ka whakahou i etahi atu raraunga, ka taea e tetahi Wharangi Wharangi te keteroki tere i nga raraunga. Ma tenei tikanga, ka taea te mahi ahakoa kaore koe e hono ki te ipurangi. Mena kua ngaro te hononga o te kaiwhakamahi, ka taea te tukutahi i nga raraunga o te rohe me te tūmau ina whakahokia mai te hononga.
5. He ngawari te patuiro.
Ko te patuiro i tetahi tono ka whakarite kia kore e taea e tetahi mea te aukati i te mahi pai ma te rapu me te whakatika i nga koha me nga raru ka puhoi haere. Na te mea i hangaia me nga anga rongonui penei i te React, Angular, me te Vue.js, he ngawari noa nga tono wharangi kotahi ki te patuiro i a Google Chrome. Ko nga waahanga wharangi, nga raraunga, me nga tukanga whatunga ka taea te aro turuki me te tirotiro.
6. Hototahi puta noa i nga papaaho maha
Ma te whakamahi i te turanga waehere kotahi, ka taea e nga kaiwhakawhanake te hanga taupānga e mahi ana i runga i ia punaha whakahaere, taputapu, tirotiro tirotiro ranei. Ko te mutunga, ka pai ake te wheako o nga kaihoko ma te tuku kia uru atu ratou ki te SPA ki nga waahi katoa e whiriwhiri ana ratou. I tua atu, ka taea e nga kaiwhakawhanake te hanga i nga tono whai kiko me te ngawari. Hei tauira, i te wa e hoahoa ana i tetahi taputapu whakatika ihirangi, ka taea e ratou te whakauru i nga tatauranga-waahi.
Nga ngoikoretanga o te SPA
1. tuma ipurangi
Ko nga aitua ipurangi penei i te tuhi whakawhiti-pae (XSS) he whakaraerae ake ki nga SPA i nga MPA. Ka taea e te hunga whakaeke te whakamahi i te XSS ki te whakararu i tetahi taupānga tukutuku ma te werohia nga tuhinga taha-kiritaki ki roto. I tua atu, karekau te herenga urunga e tino whakamanahia i te taumata whakahaere. Ki te kore nga kaiwhakawhanake e whai tikanga, ka kitea pea nga raraunga tairongo me nga mahi.
2. History of your browser
Karekau te hitori tirotiro e tiakina e nga SPA. Mena ka haere koe i nga wa o mua mo etahi korero whai hua, ko nga mea katoa ka kitea e koe ko te hono a te SPA ki te paetukutuku katoa. I tua atu, kaore e taea e koe te hoki whakamuri i roto i te SPA. Mena ka whakamahi koe i te paatene whakamuri, ka tukuna koe ki tetahi wharangi tukutuku kua utaina i mua atu i te ahua o mua. Ma te whakamahi i te HTML5 History API, heoi, ka taea te whakakore i tenei hapa.
3. Nga wa uta tuatahi
Ahakoa he rongonui nga SPA mo te tere me te mahi, he roa te waa mo te waahi katoa ki te uta. Ka riri pea etahi o nga kaiwhakamahi, ka kore ratou e whakamahi ano i te taupānga.
4. Hua kore whai hua SEO
Ko te hoahoanga o nga SPA he wharangi kotahi me te URL kotahi. Ka whakawhäitihia te kaha o nga SPA ki te whiwhi mai i te arotautanga miihini rapu (SEO). Na te mea he nui te whakataetae kei reira, ka taea e nga rautaki SEO te awhina i a koe ki te whakanui ake i to reanga o to papaanga ki nga hua miihini rapu.
He uaua ki te arotau mo SEO na te mea kotahi noa te URL kaore he whakahou, he wahitau motuhake ranei. Kei te ngaro katoa te taurangi, nga tātaritanga kaha, nga hononga ahurei, metadata, me etahi atu ahuatanga. He uaua ki te wetewetehia e nga karetao rapu, he uaua te arotautanga.
Opaniraa
Mena kei te pirangi koe ki te hanga i tetahi tono urupare, tere ake, me te whai taonga mo te te hononga pāpori, pakihi SaaS, whakahou ora, me etahi atu, Ka taea e nga Tono Wharangi Kotahi (SPA) te awhina.
Ko te mutunga, arotakehia o whainga me o whainga kia kite mena he pai te SPA ki a koe, katahi ka kowhiri i tetahi angamahi JavaScript hei timata.
Ko te whainga ko te torotoro i te kaha katoa o nga SPA mena kei te pirangi tetahi umanga ki te hanga hua me te whainga kia pai ake te maaramatanga, kia kaha ake te whakauru o nga kaiwhakamahi, me te hua teitei ake mo te whakatutuki i nga mahi me te tirotiro i nga raraunga.
Waiho i te Reply