Ko te tono wharangi kotahi (SPA) he taupānga tukutuku ka tukuna ki te kaiwhakamahi ma te wharangi HTML kotahi kia pai ake ai te aro me te taapiri i tetahi tono papamahi, taupānga taketake ranei.
Ka tae mai he SPA i etahi wa defiatanga wharangi kotahi (SPI).
Ka taea e te tono wharangi kotahi te tiki HTML, JavaScript, me CSS katoa o te tono i te wa e utaina ana, ka taea ranei te uta i nga rauemi hei whakahou hei whakautu ki te taunekeneke a te kaiwhakamahi me etahi atu huihuinga.
Ko etahi atu tono tukutuku, ka whakaatu ki te kaiwhakamahi he wharangi kaainga e hono ana ki nga waahanga o te tono i runga i nga wharangi HTML motuhake, ko te tikanga me tatari te kaiwhakamahi kia utaina he wharangi hou ia wa ka tono hou ia.
Hangarau
Ka whakamahi nga SPA i te HTML5 me te Ajax (JavaScript me te XML) kia taea ai nga urupare wai me te hihiri ki nga tono a nga kaiwhakamahi, ka taea te whakahou i nga ihirangi ina wa ka mahi te kaiwhakamahi. Ina utaina te wharangi, ka puta nga taunekeneke me te tūmau ma nga waea Ajax ka whakahokia mai nga raraunga, ka kitea i roto i te JSON (JavaScript Object Notation), ki te whakahou i te wharangi me te kore e hiahia ki te whakahou.
SPA nga korero taipitopito
Ko nga taupānga wharangi kotahi he mea rongonui mo to raatau kaha ki te hoahoa ano i tetahi waahanga o te atanga kaiwhakamahi me te kore e tono i te haerenga a te tūmau ki te tiki HTML. Ka tutuki tenei ma te wehewehe i nga raraunga mai i te whakaaturanga raraunga me te paparanga tauira e whakahaere ana i nga raraunga me te paparanga tirohanga e panui ana i nga tauira.
Ko te waehere pai ka puta mai i te whakaoti rapanga kotahi i nga wa maha, i te whakahou ranei. I te nuinga o te wa, ka tipu tenei tukanga i roto i nga tauira auau, me te mahi kotahi te mahi i nga wa katoa.
Hei tuhi i te waehere ka taea te pupuri, me tuhi waehere ma te ngawari. He pakanga tonu tenei, inaa he ngawari ki te taapiri i te uaua (nga whakaurunga/whakawhirinaki) ma te tuhi waehere hei whakaoti rapanga; a he ngawari ki te whakaoti rapanga i runga i te huarahi e kore e whakaiti i te uaua.
Ko nga waahi ingoa tetahi tauira o tenei.
Taupānga Wharangi Takitahi (SPA) Taupānga Wharangi Maha (MPA) kua whakaritea
Kei roto i nga tono maha-wharangi (MPA) nga wharangi maha me nga raraunga pateko me nga hononga ki etahi atu pae. Ko HTML me CSS nga hangarau matua e whakamahia ana hei whakawhanake i nga paetukutuku MPA. Ka taea e ratou te whakamahi i te JavaScript hei whakaiti i te kawenga me te whakanui i te tere. Ko nga whakahaere e tuku ana i te whānuitanga o nga ratonga, penei i nga toa ipurangi, me whai whakaaro ki te whakamahi i te MPA na te mea ka ngawari te hono atu ki nga papaa raraunga kaiwhakamahi rereke.
He rereke nga tono wharangi kotahi mai i nga tono wharangi-maha ma nga huarahi e whai ake nei:
- Te tukanga whanaketanga: I te wa e hanga ana i nga MPA, kaore koe e hiahia ki te mohio ki te JavaScript, kaore i rite ki nga SPA. Heoi, ko te hono o nga pito o mua me nga pito o muri i roto i nga MPA ko te tikanga he roa ake te waa hanga o enei waahi ki nga SPA.
- tere: He puhoi ake te rere o nga MPA, me utaina ia wharangi hou mai i te wahanga. Heoi, he tere ake te uta o nga SPA i muri i te tango tuatahi i a raatau e keteroki ana i nga raraunga hei whakamahi i muri mai.
- Rapu Engine Arotautanga: Ka taea e nga miihini rapu ngawari te tohu i nga paetukutuku me te MPA. Ko nga MPA he maha atu nga wharangi e ngoki ana e nga miihini rapu ki te whakaputa i nga tohu SEO pai ake. Ko nga ihirangi o ia wharangi he pateko hoki, na te mea ka taea te uru atu. Engari, ko nga SPA he wharangi me te URL ahurei kotahi (Uniform Resource Locator). Ka whakamahi hoki ratou i te JavaScript, kaore i te tika te taurangi e te nuinga o nga miihini rapu. Na tenei ka nui ake te wero a te SEO mo nga SPA.
- haumarutanga: I roto i te MPA, me tiaki takitahi ia wharangi ipurangi. Heoi, he kaha ake nga SPA ki nga whakaeke hacker. Engari ma te huarahi tika, ka taea e nga roopu whanaketanga te whakapai ake i te haumarutanga tono.
I te nui ake o nga pakihi e heke ana ki te whakamahi i nga SPA, ka tipu nga kaihoe me nga miihini rapu kia pai ake ai te whakariterite. I runga i tona tere, he patai noa mo te wa ka noho nga SPA hei huarahi mo te whanaketanga tono paetukutuku. Na ka timata nga painga o te MPA ki te SPA ki te memeha.
Ahea te whakamahi i nga tono wharangi kotahi?
E rima nga ahuatanga e tino tika ana enei tono:
- Ko nga kaiwhakamahi e hiahia ana ki te whakawhanake i tetahi paetukutuku me te papaaho hihiri me te iti o nga pukapuka raraunga ka taea te whakamahi i nga SPA.
- Ko nga kaiwhakamahi e whakamahere ana ki te hanga i tetahi tono pūkoro mo o raatau paetukutuku ka taea hoki te whakaaro ki te whakamahi i te SPA. Ka taea e ratou te whakamahi i te API o muri (Atanga Papatono Tono) mo te pae me te tono pūkoro.
- He pai te hoahoanga SPA mo te hanga i nga whatunga hapori penei i a Facebook, SaaS papaa me nga hapori kati na te mea he iti ake te SEO.
- Ko nga kaiwhakamahi e hiahia ana ki te tuku i a raatau kaihoko ki te taunekeneke ngawari me whakamahi nga SPA. Ka taea hoki e nga kaihoko te uru atu ki nga whakahoutanga ora mo te rerenga raraunga ora me nga kauwhata.
- Ko nga kaiwhakamahi e hiahia ana ki te whakaputa i te wheako kaiwhakamahi rite, taketake, me te hihiri puta noa i nga taputapu, nga punaha whakahaere, me nga kaitirotiro.
Ko te roopu pai me whai putea, taputapu me te waa ki te hanga i tetahi tono whaarangi kounga teitei. Ma tenei ka whakarite he SPA pono me te whai hua kaore e pa ki te wa e pa ana ki nga waka.
Te hoahoanga tono wharangi kotahi
Ko nga taupānga wharangi kotahi te taunekeneke me nga manuhiri ma te uta me te mahi i runga i te wharangi o naianei, me te whakakore i te hiahia ki te uta i nga wharangi tukutuku maha mai i te tūmau.
Ko nga paetukutuku whai SPA he hononga URL kotahi. Ka tangohia nga ihirangi ka whakahouhia nga waahanga atanga kaiwhakamahi motuhake (UI) ina paatohia. Ka pai ake te wheako o te kaiwhakamahi i te mea ka taea e te kaiwhakamahi te taunekeneke me te wharangi o naianei i te wa e tikina mai ana he ihirangi hou mai i te tūmau. Ina puta he whakamaarama, ka whakahouhia nga waahanga o te wharangi o naianei me nga ihirangi hou.
Ko te tono a te kiritaki tuatahi i roto i te SPA ka utaina te tono me ona rawa whai take katoa, penei i te HTML, CSS me JavaScript. He mea nui pea te konae uta tuatahi mo nga tono uaua, a ka puhoi ake te waa uta. He atanga papatono tono (API) ka tiki raraunga hou i te wa e whakatere ana te kaiwhakamahi i roto i te SPA. ka whakautu te tūmau me te raraunga i te hōputu JSON (JavaScript Object Notation). I te whiwhinga o enei raraunga, ka whakahouhia e te kaitirotiro te tirohanga o te tono ka kitea e te kaiwhakamahi me te kore e utaina he wharangi.
Ko te hoahoanga tono wharangi kotahi kei roto ko nga hangarau whakaputa taha-tumau me te taha-kiritaki. Ka whakaatuhia te pae ka whakaatuhia ki te kaiwhakamahi na roto i te Rendering Side Client (CSR), te Rendering Side Server (SSR), te Kaihanga Pae Static ranei (SSG).
- Whakaaturanga taha Kiritaki (TKT)
Ma te whakaputanga taha-kiritaki, ka tono tono te kaitirotiro ki te tūmau mo tetahi konae HTML ka whiwhi i tetahi konae HTML taketake me nga tuhinga me nga momo taapiri. I a ia e mahi ana i te JavaScript, ka kite te kaiwhakamahi i tetahi wharangi paatea, he whakaahua uta ranei. Ka tikina e te SPA nga raraunga, ka whakaputa tirohanga, ka panaia nga raraunga ki roto i te Tauira Ahanoa Tuhinga (DOM). Ka rite te SPA mo te whakamahi. Ko te TKT te mea roa rawa atu o nga momo rereke e toru, a, i etahi wa ka raru te kaitirotiro na te kaha o te whakamahi rauemi taputapu i te wa e tiro ana i nga ihirangi. I tua atu, ko te TKT he huarahi pai mo nga paetukutuku hokohoko nui na te mea e whakaatu ana i nga korero ki nga kaihoko me te kore korero nui a te tūmau, ka tere ake te wheako kaiwhakamahi.
- Whakaaturanga taha Tūmau (SSR)
I te wa e whakaputa ana i te taha tūmau, ka tono nga kaitirotiro i tetahi konae HTML mai i te tūmau, e tiki ana i nga raraunga i tonoa, ka whakaputa i te SPA, ka waihanga i te konae HTML mo te tono i te wa e haere ana. Ko nga rauemi e waatea ana ka tukuna ki te kaiwhakamahi. Ko te hoahoanga SPA e hiahiatia ana hei taapiri i nga huihuinga, te whakaputa DOM mariko me te mahi i etahi atu mahi. Ka rite te SPA mo te whakamahi. Ka tere te SSR i te hotaka na te mea e whakakotahi ana i te tere o te SPA me te kore e taumaha te kaitirotiro a te kaiwhakamahi.
- Kaihanga Pae Pateko (SSG)
I roto i te kaihanga pae pateko, ka tono tonu nga kaitirotiro ki te tūmau mo tetahi konae HTML. Ka whakaatuhia te whaarangi ki te kaiwhakamahi. Ka tikina e te SPA nga raraunga, ka whakaputa tirohanga, ka whakakii i te tauira ahanoa tuhinga (DOM). Na, kua reri te SPA mo te whakamahi. Mai i te ingoa, he pai te nuinga o nga SSG mo nga wharangi pateko. Ka whakaratohia e ratou nga wharangi pateko me te whiringa pai me te tere. Mo nga paetukutuku whai kiko hihiri, ka tohutohuhia nga kaiwhakamahi ki te whiriwhiri i tetahi o etahi atu whiringa korero e rua.
Nga painga o nga tono wharangi kotahi
Ko nga kamupene nui penei i te Meta, YouTube me Netflix kua neke mai i nga tono maha-wharangi ki nga tono wharangi kotahi. Ka tukuna e nga SPA he wheako kaiwhakamahi ngawari ake, teitei ake te mahi me te whakautu. Kei raro nei nga painga o te whakamahi i nga tono wharangi kotahi.
- āhuatanga Keteroki
Ko te tono wharangi kotahi ka tono kotahi ki te tūmau i te tango tuatahi me te penapena i nga raraunga ka riro mai. Ka taea e nga kaihoko te whakamahi i nga raraunga kua riro mai ki te mahi tuimotu mena e hiahiatia ana e pai ake ai mo nga kaiwhakamahi na te mea ka taea e ratou te kai iti rawa nga rauemi raraunga. Ano, ka kino te hononga Ipurangi a te kiritaki, ka taea te tukutahi i nga raraunga o te rohe me te tūmau mena ka taea e te hononga LAN.
- Tere me te whakautu
Ma te whakamahi i nga SPA ka taea te whakapai ake i te tere o te paetukutuku na te mea ka whakahou noa i nga ihirangi i tonoa, kaua ki te whakahou i te wharangi katoa. Ka utaina e nga SPA he konae JSON iti, kaua he wharangi hou. Ko te konae JSON ka whakarite kia tere ake te uta me te whai hua. Ko te hua ka uru tonu ki nga ahuatanga me nga mahi katoa o te whaarangi kaore he whakaroa. He taapiri nui tenei, na te mea ko te waa uta o te paetukutuku ka tino pa ki nga moni whiwhi me nga hoko.
Ka whakaaetia e nga SPA nga whakawhitinga maeneene ma te whakarato i nga korero katoa i runga i te wharangi tonu. Karekau te paetukutuku e tika kia whakahouhia, no reira he pai ake ona mahinga i nga mahi a-ipurangi.
Ano, me nga SPA, nga rawa penei i te HTML, CSS, me nga tuhinga Java kotahi anake te tiki i roto i te roanga o te tono. Ko nga raraunga e tika ana ka whakawhitihia ki muri.
Ko nga wharangi whai SPA ka taea e nga kaiwhakamahi te whakatere tere na te keteroki me te whakaheke i nga pukapuka raraunga. Ko nga raraunga e tika ana ka tukuna whakamuri, a ko nga waahanga ngaro o nga mea kua whakahoutia ka tangohia.
- Te patuiro me Chrome
Ko te patuiro ka kitea, ka tango i nga pepeha, nga hapa, me nga whakaraeraetanga haumarutanga tono tukutuku e whakaroa ana i te mahi. He ngawari te patuiro i nga SPA me nga taputapu kaiwhakawhanake Chrome. Ka taea e nga Kaihanga te whakahaere i te whakaputanga o te waehere JS mai i te kaitirotiro, te patuiro i nga SPA me te kore e tarai i nga rarangi waehere maha.
Ka hangaia nga SPA ki runga ake o nga anga JavaScript penei i nga AngularJS me nga taputapu kaiwhakawhanake React, na te mea ka ngawari ake te patuiro ma te whakamahi i nga kaitirotiro Chrome.
Ko nga taputapu kaiwhakawhanake ka taea e nga kaiwhakawhanake te maarama me pehea te tono a te kaitirotiro raraunga mai i nga kaitoro, keteroki, me te whakaatu i nga huānga wharangi. I tua atu, ma enei taputapu ka taea e nga kaiwhakawhanake te aro turuki me te tātari i nga huānga o te whaarangi, nga mahi whatunga, me nga raraunga e pa ana.
- Te whanaketanga tere
I roto i te tukanga whanaketanga, ka taea te wehe i te pito-mua me te pito-muri o te SPA, kia rua, neke atu ranei nga kaiwhakawhanake ki te mahi whakarara. Ko te whakarereke i te pito o mua, o muri ranei kaore e pa ki tetahi atu pito, na reira ka tere ake te whanaketanga.
Ka taea e nga Kaihanga te whakamahi ano i te waehere taha-tumau me te wehe i nga SPA mai i te UI o mua. Ko te hoahoanga wehe i roto i nga SPA ka wehe i nga whakaaturanga o mua me nga ratonga tuara. Ma tenei ka taea e nga kaiwhakawhanake te whakarereke i nga tirohanga, te hanga me te whakamatautau me te kore e pa ki nga ihirangi me te awangawanga ranei mo te hangarau o muri. Ka taea e nga kaihoko te whai wheako rite tonu ki te whakamahi i enei tono.
- Te wheako kaiwhakamahi pai ake
Ma nga SPA, ka uru nga kaiwhakamahi ki nga wharangi tirohia tonu me nga ihirangi katoa i te wa kotahi. He pai ake tenei na te mea ka taea e nga kaiwhakamahi te panuku marie me te ngawari. He rite ki te whakamahi i te papamahi taketake, i te taupānga pūkoro ranei.
Ka whakaratohia e nga SPA he UX pai me te timatanga, waenganui, me te mutunga. Ano, ka taea e nga kaiwhakamahi te toro atu ki nga ihirangi e hiahiatia ana me te kore e paato i nga hononga maha, penei i nga MPA. He iti ake nga reiti tāwhana ina whiwhi nga kaiwhakamahi ki nga korero, kaore i rite ki nga MPA e pouri ana nga kaiwhakamahi i te mea he nui te wa ka utaina nga whaarangi. He tere ake te whakatere na te mea kua whakamahia ano nga huānga wharangi.
- Te hurihanga ki nga tono IOS me Android
Ko nga kaiwhakawhanake e titiro ana ki te whakawhiti ki nga tono iOS me Android me whakamahi nga SPA na te mea he ngawari ake te huri. Ka taea e raatau te whakamahi i te waehere kotahi hei huri mai i te SPA ki nga tono waea. Na te mea ka whakaratohia te waehere katoa i roto i te waa kotahi, he ngawari nga SPA ki te whakatere, he pai mo nga tono waea.
- Hototahi-whakawhitiwhiti
Ka taea e nga Kaihanga te whakamahi i te turanga waehere kotahi hei hanga tono ka taea te whakahaere i runga i tetahi taputapu, tirotiro, me te punaha whakahaere. Ka whakarei ake tenei i te wheako o nga kaihoko ka taea e ratou te whakamahi i te SPA ki hea. Ka taea hoki e nga kaiwhakawhanake me nga miihini DevOps te hanga i nga tono whai kiko, tae atu ki nga tātaritanga o te waa, i te wa e whakawhanake ana i nga tono whakatika ihirangi.
Nga whakaheke
Ahakoa nga painga katoa o nga tono wharangi kotahi, ka puta etahi ngoikoretanga ina whakamahi anga SPA. Waimarie, kei te haere tonu nga mahi ki te whakatika i enei take me nga SPA. Kei raro nei etahi ngoikoretanga;
- Rapu Engine Optimization (SEO)
E whakaponohia ana ko nga tono wharangi kotahi kaore i te pai mo te SEO. Ko te nuinga o nga miihini rapu, penei i a Google, Yahoo ranei, kaore i kaha ki te tarai i nga paetukutuku SPA i runga i nga taunekeneke Ajax me nga kaitoro mo tetahi wa. Ko te mutunga mai, ko te nuinga o enei waahi SPA i noho kore taurangi. I tenei wa, kua whakaakona nga karetao a Google ki te whakamahi i te JavaScript hei utu mo te HTML auau hei tohu i nga paetukutuku SPA, e kino ana ki nga rarangi.
Ko te ngana ki te whakauru i te SEO ki roto i te waahi SPA kua oti te hanga he wero me te utu nui. Me hanga e nga Kaihanga he paetukutuku motuhake, ka tukuna e te kaitoro miihini rapu, kaore i te whai hua me te maha o nga waehere taapiri. Ka taea hoki te whakamahi i etahi atu tikanga penei i te kitenga ahua me te whakaputa i mua. I roto i nga whakaurunga SPA, he URL kotahi mo ia wharangi ka whakawhäiti i te kaha o te SEO mo nga SPA.
- Whakaterenga patene whakamuri me mua
Ka tiakina e nga kaitirotiro nga korero hei awhina i nga wharangi paetukutuku ki te uta tere. Ka pa ana nga kaihoko ki te patene o muri, ko te nuinga ka tumanako kia rite te ahua o te wharangi ki te wa whakamutunga i tirohia e ratou, a ka tere te whakawhiti. Ko nga hoahoanga paetukutuku tuku iho ka taea tenei ma te whakamahi i nga kape keteroki o te waahi me nga rauemi e pa ana. Heoi, i roto i te whakatinanatanga poauau o te SPA, ko te pehi i te paatene tuara he rite te paanga ki te paato i te hono. Ka puta he tono a te tūmau, kua piki ake te takamuri, me nga huringa raraunga kitea.
Hei whakatutuki i nga tumanako a nga kaiwhakamahi me te whakarato i te wheako tere ake, me whakatauira e nga kaiwhakawhanake SPA te mahi a nga kaitirotiro taketake ma te whakamahi i te JavaScript.
- Panuku tauwāhi
Ka penapena nga kaitirotiro korero penei i te tuunga panuku whakamutunga o nga wharangi kua torohia. Heoi, ka kite pea nga kaiwhakamahi kua rereke nga tuunga panuku i te wa e whakatere ana i nga SPA ma te whakamahi i nga paatene o muri me mua o te kaitirotiro. Hei tauira, i runga i Facebook, i etahi wa ka hoki ano nga kaiwhakamahi ki o raatau tuunga panuku whakamutunga, engari i etahi wa kaore. Ko tenei ka puta he wheako kaiwhakamahi iti rawa i te mea me hoki ano a ringa ki te panuku ki te tuunga panuku o mua.
Hei whakatika i tenei take, me whakarato e nga kaiwhakawhanake he waehere hei whakaora, hei whakahoki, hei akiaki mo te tuunga panuku tika i te wa e panuku ana te kaiwhakamahi ki muri me muri.
- Te tātari paetukutuku
Ma te taapiri i te waehere tātaritanga ki tetahi wharangi, ka taea e nga kaiwhakamahi te whai i nga waka ki te wharangi. Heoi, he uaua nga SPA ki te whakatau ko wai nga wharangi me nga ihirangi e tino paingia ana, na te mea he wharangi kotahi anake. Me whakarato e koe he waehere taapiri mo nga tātaritanga ki te whai i nga wharangi pseudo i te wa e tirohia ana.
- Nga take haumaru
Ko nga SPA he kaha ake te whakararu ma tuhi pae whakawhiti. Ka tukuna e ratou nga kaihoko ki te tango i te tono katoa, ka whai waahi ki te rapu whakaraeraetanga ma te miihini whakamuri. Hei whakatika i tenei take, me whakarite e nga kaiwhakawhanake ko nga arorau katoa o te taha-kiritaki e pa ana ki te haumarutanga tono paetukutuku, penei i te motuhēhēnga me te whakamana whakaurunga, ka ruarua ki runga i te tūmau mo te manatoko. Ano, me whakarato nga kaiwhakawhanake i te urunga-a-turanga iti.
Whakaoti
Ko nga Taumahi Wharangi Takitahi e tohu ana i te waahanga e whai ake nei i roto i te whanaketanga o nga wheako taupānga. He tere ake, he maamaa ake, ka taea te whakauru ki nga ahuatanga matatau penei i te whakaritenga. Koia te take ka whakawhirinaki nga kamupene pai me te maha o nga kaiwhakamahi, penei i a Gmail, Netflix, ko nga purongo korero a Facebook ranei, ki runga i te hoahoanga wharangi kotahi. Ma te whakatinana i tenei hangarau, ka nui ake te uara o nga pakihi mai i o raatau taonga ipurangi me te whai waahi hou hei pakihi mamati.
Ercole Palmeri
