Mae cymhwysiad un dudalen (SPA) yn gymhwysiad gwe a gyflwynir i'r defnyddiwr trwy un dudalen HTML i fod yn fwy ymatebol ac i efelychu cymhwysiad bwrdd gwaith neu ap brodorol yn agosach.
Daw SPA weithiau defirhyngwyneb un dudalen (SPI).
Gall rhaglen un dudalen nôl holl HTML, JavaScript a CSS y rhaglen yn ystod y llwyth cychwynnol, neu gall lwytho adnoddau'n ddeinamig i'w diweddaru mewn ymateb i ryngweithio defnyddwyr neu ddigwyddiadau eraill.
Mae cymwysiadau gwe eraill, yn cyflwyno tudalen gartref i'r defnyddiwr sy'n gysylltiedig â rhannau o'r rhaglen ar dudalennau HTML ar wahân, sy'n golygu bod yn rhaid i'r defnyddiwr aros am dudalen newydd i'w llwytho bob tro y bydd yn gwneud cais newydd.
Technolegau
Mae SPAs yn defnyddio HTML5 ac Ajax (Jazjax asyncronaidd ac XML) i alluogi ymatebion hylifol a deinamig i geisiadau defnyddwyr, gan ganiatáu i gynnwys gael ei ddiweddaru ar unwaith pan fydd defnyddiwr yn gweithredu. Ar ôl i'r dudalen lwytho, mae rhyngweithiadau â'r gweinydd yn digwydd trwy alwadau Ajax a dychwelir y data, a ganfyddir yn fformat JSON (JavaScript Object Notation), i adnewyddu'r dudalen heb fod angen ei ail-lwytho.
SPA yn fanwl
Mae apiau tudalen sengl yn nodedig am eu gallu i ailgynllunio unrhyw ran o'r rhyngwyneb defnyddiwr heb fod angen taith gron y gweinydd i nôl yr HTML. Cyflawnir hyn trwy wahanu data oddi wrth gyflwyniad data gyda haen model sy'n rheoli'r data a haen gweld sy'n darllen o'r modelau.
Daw cod da o ddatrys yr un broblem sawl gwaith, neu ei hailffactorio. Fel arfer, mae'r broses hon yn esblygu mewn patrymau cylchol, gydag un mecanwaith yn gwneud yr un peth yn gyson.
I ysgrifennu cod y gellir ei gynnal, mae angen i chi ysgrifennu cod mewn ffordd syml. Mae hon yn frwydr gyson, mewn gwirionedd mae'n hawdd ychwanegu cymhlethdod (mynediad/dibyniaeth) trwy ysgrifennu cod i ddatrys problem; ac mae'n hawdd datrys problem mewn ffordd nad yw'n lleihau cymhlethdod.
Mae gofodau enwau yn enghraifft o hyn.
Cymharu Ceisiadau Tudalen Sengl (SPA) Ceisiadau Aml Dudalen (MPA).
Mae cymwysiadau aml-dudalen (MPAs) yn cynnwys tudalennau lluosog gyda data sefydlog a dolenni i wefannau eraill. HTML a CSS yw'r prif dechnolegau a ddefnyddir i ddatblygu gwefannau MPA. Gallant ddefnyddio JavaScript i leihau llwyth a chynyddu cyflymder. Dylai sefydliadau sy'n cynnig ystod eang o wasanaethau, megis siopau ar-lein, ystyried defnyddio MPA gan eu bod yn ei gwneud hi'n hawdd cysylltu â gwahanol gronfeydd data defnyddwyr.
Mae cymwysiadau un dudalen yn wahanol i gymwysiadau aml-dudalen yn y ffyrdd canlynol:
- Proses ddatblygu: Wrth greu MPAs, nid oes angen hyfedredd JavaScript arnoch, yn wahanol i SPAs. Fodd bynnag, mae cyplu pennau blaen ac ôl-wynebau mewn Ardaloedd Morol Gwarchodedig yn golygu bod angen amseroedd adeiladu cymharol hwy ar y safleoedd hyn nag AGA.
- cyflymder: Mae MPAs yn rhedeg yn gymharol arafach, gan ei gwneud yn ofynnol i bob tudalen newydd gael ei llwytho o'r dechrau. Fodd bynnag, mae SPAs yn llwytho'n llawer cyflymach ar ôl y lawrlwythiad cychwynnol gan eu bod yn storio data i'w ddefnyddio'n ddiweddarach.
- Optimeiddio Peiriannau Chwilio: Gall peiriannau chwilio fynegeio gwefannau gydag MPA yn hawdd. Mae gan MPAs fwy o dudalennau wedi'u cropian gan beiriannau chwilio i gynhyrchu safleoedd SEO gwell. Mae cynnwys pob tudalen hefyd yn sefydlog, gan ei gwneud yn fwy hygyrch. Mewn cyferbyniad, mae gan SPAs dudalen gydag un URL unigryw (Uniform Resource Locator). Maent hefyd yn defnyddio JavaScript, nad yw wedi'i fynegeio'n gywir gan y rhan fwyaf o beiriannau chwilio. Mae hyn yn gwneud safleoedd SEO ar gyfer SPAs yn fwy heriol.
- Diogelwch: Yn MPA, mae angen i chi sicrhau pob tudalen ar-lein yn unigol. Fodd bynnag, mae SPAs yn fwy tueddol o gael ymosodiadau haciwr. Ond gyda'r dull cywir, gall timau datblygu wella diogelwch cymwysiadau.
Wrth i fwy o fusnesau fudo i ddefnyddio SPAs, bydd ymlusgwyr a pheiriannau chwilio yn esblygu i'w mynegeio'n well. O ystyried ei gyflymder, dim ond cwestiwn yw pryd y bydd SPAs yn dod yn opsiwn mynd-i-fynd ar gyfer datblygu cymwysiadau gwe. Yna bydd manteision MPA dros SPA yn dechrau pylu.
Pryd i ddefnyddio rhaglenni un dudalen?
Mae pum senario lle mae ceisiadau o'r fath yn fwyaf perthnasol:
- Gall defnyddwyr sydd am ddatblygu gwefan gyda llwyfan deinamig a chyfeintiau data is ddefnyddio SPAs.
- Gall defnyddwyr sy'n bwriadu adeiladu rhaglen symudol ar gyfer eu gwefan hefyd ystyried defnyddio SPA. Gallant ddefnyddio'r backend API (Rhyngwyneb Rhaglennu Cymhwysiad) ar gyfer y wefan a'r rhaglen symudol.
- Mae pensaernïaeth SPA yn addas ar gyfer adeiladu rhwydweithiau cymdeithasol fel Facebook, llwyfannau SaaS a chymunedau caeedig gan fod angen llai o SEO arnynt.
- Dylai defnyddwyr sydd am gynnig rhyngweithio di-dor i'w defnyddwyr hefyd ddefnyddio SPAs. Gall defnyddwyr hefyd gael mynediad at ddiweddariadau byw ar gyfer data ffrydio byw a graffiau.
- Defnyddwyr sydd eisiau darparu profiad defnyddiwr cyson, brodorol a deinamig ar draws dyfeisiau, systemau gweithredu a phorwyr.
Dylai fod gan dîm da y gyllideb, yr offer a'r amser i greu rhaglen un dudalen o ansawdd uchel. Bydd hyn yn sicrhau SPA dibynadwy ac effeithlon nad yw'n profi amser segur sy'n gysylltiedig â thraffig.
Pensaernïaeth cais tudalen sengl
Mae apps tudalen sengl yn rhyngweithio ag ymwelwyr trwy lwytho a gweithio ar y dudalen gyfredol, gan ddileu'r angen i lwytho tudalennau gwe lluosog o'r gweinydd.
Mae gwefannau gyda SPA yn cynnwys un cyswllt URL. Mae'r cynnwys yn cael ei lawrlwytho ac mae cydrannau rhyngwyneb defnyddiwr penodol (UI) yn cael eu diweddaru pan gânt eu clicio. Mae profiad y defnyddiwr yn cael ei wella oherwydd gall y defnyddiwr ryngweithio â'r dudalen gyfredol wrth i gynnwys newydd gael ei nôl o'r gweinydd. Pan fydd adnewyddiad yn digwydd, mae rhannau o'r dudalen gyfredol yn cael eu diweddaru gyda'r cynnwys newydd.
Mae'r cais cleient cychwynnol yn SPA yn llwytho'r rhaglen a'i holl asedau perthnasol, megis HTML, CSS a JavaScript. Gallai'r ffeil llwyth cychwynnol fod yn arwyddocaol ar gyfer cymwysiadau cymhleth ac arwain at amser llwytho arafach. Mae rhyngwyneb rhaglennu cymhwysiad (API) yn nôl data newydd wrth i'r defnyddiwr lywio trwy SPA. mae'r gweinydd ond yn ymateb gyda data mewn fformat JSON (JavaScript Object Notation). Ar ôl derbyn y data hwn, mae'r porwr yn adnewyddu golwg y rhaglen y mae'r defnyddiwr yn ei gweld heb ail-lwytho tudalen.
Mae pensaernïaeth cymhwysiad un dudalen yn cynnwys technolegau rendro ochr y gweinydd ac ochr y cleient. Mae'r wefan yn cael ei harddangos a'i chyflwyno i'r defnyddiwr trwy Rendro Ochr Cleient (CSR), Rendro Ochr Gweinydd (SSR), neu Generadur Safle Statig (SSG).
- Rendro Ochr Cleient (CSR)
Gyda rendrad ar ochr y cleient, mae'r porwr yn gwneud cais i'r gweinydd am ffeil HTML ac yn derbyn ffeil HTML sylfaenol gyda sgriptiau ac arddulliau ynghlwm. Wrth weithredu JavaScript, mae'r defnyddiwr yn gweld tudalen wag neu ddelwedd llwythwr. Mae'r SPA yn nôl y data, yn cynhyrchu delweddiadau, ac yn gwthio'r data i'r Model Gwrthrych Dogfennau (DOM). Yna caiff yr SPA ei baratoi i'w ddefnyddio. CSR yn aml yw'r hiraf o'r tri dewis amgen a gall weithiau orlethu'r porwr oherwydd ei ddefnydd trwm o adnoddau dyfais wrth wylio cynnwys. Yn ogystal, mae CSR yn ddewis arall gwych ar gyfer gwefannau traffig uchel gan ei fod yn cyflwyno gwybodaeth i ddefnyddwyr heb gyfathrebu gweinydd gormodol, gan arwain at brofiad defnyddiwr cyflymach.
- Rendro Ochr Gweinydd (SSR)
Yn ystod rendro ochr y gweinydd, mae porwyr yn gofyn am ffeil HTML gan y gweinydd, sy'n nôl y data y gofynnwyd amdano, yn gwneud yr SPA, ac yn creu'r ffeil HTML ar gyfer y rhaglen wrth fynd. Yna cyflwynir deunydd hygyrch i'r defnyddiwr. Mae angen pensaernïaeth yr SPA i atodi digwyddiadau, cynhyrchu DOM rhithwir a chyflawni gweithrediadau pellach. Yna caiff yr SPA ei baratoi i'w ddefnyddio. Mae SSR yn gwneud y rhaglen yn gyflym gan ei fod yn cyfuno cyflymder SPA â pheidio â gorlwytho porwr y defnyddiwr.
- Cynhyrchydd Safle Statig (SSG)
O fewn adeiladwr y wefan statig, mae porwyr yn gwneud cais ar unwaith i'r gweinydd am ffeil HTML. Mae'r dudalen yn cael ei harddangos i'r defnyddiwr. Mae'r SPA yn nôl y data, yn cynhyrchu golygfeydd, ac yn llenwi'r model gwrthrych dogfen (DOM). Yna, mae'r SPA yn barod i'w ddefnyddio. Gan gyfeirio at yr enw, mae SSGs yn fwyaf addas ar gyfer tudalennau sefydlog. Maent yn darparu tudalennau statig gydag opsiwn da a chyflym. Ar gyfer gwefannau gyda chynnwys deinamig, cynghorir defnyddwyr i ddewis un o'r ddau opsiwn rendro gwybodaeth arall.
Manteision cymwysiadau un dudalen
Mae cwmnïau mawr fel Meta, YouTube a Netflix wedi symud o gymwysiadau aml-dudalen i gymwysiadau un dudalen. Mae SPAs yn cynnig profiad defnyddiwr llyfnach, perfformiad uwch ac ymatebolrwydd. Isod mae manteision defnyddio cymwysiadau un dudalen.
- Nodwedd caching
Mae rhaglen un dudalen yn gwneud cais sengl i'r gweinydd wrth ei lawrlwytho i ddechrau ac yn arbed unrhyw ddata y mae'n ei dderbyn. Gall defnyddwyr ddefnyddio'r data a dderbynnir i weithio all-lein os oes angen sy'n ei gwneud yn fwy cyfleus i'r defnyddwyr gan ei fod yn caniatáu iddynt ddefnyddio llai o adnoddau data. Hefyd, pan fydd gan gleient gysylltiad Rhyngrwyd gwael, gellir cydamseru data lleol â'r gweinydd os yw'r cysylltiad LAN yn caniatáu hynny.
- Cyflym ac ymatebol
Gall defnyddio SPAs wella cyflymder gwefan gan ei fod yn adnewyddu'r cynnwys y gofynnwyd amdano yn unig yn hytrach nag adnewyddu'r dudalen gyfan. Mae SPAs yn llwytho ffeil JSON fach yn hytrach na thudalen newydd. Mae ffeil JSON yn sicrhau cyflymder llwytho cyflymach ac effeithlonrwydd. Mae'n arwain at fynediad ar unwaith i holl nodweddion a swyddogaethau tudalen heb unrhyw oedi. Mae hyn yn fantais enfawr, oherwydd gall amser llwytho gwefan effeithio'n sylweddol ar refeniw a gwerthiant.
Mae SPAs yn caniatáu ar gyfer trawsnewidiadau llyfn trwy ddarparu'r holl wybodaeth ar y dudalen ar unwaith. Nid oes angen diweddaru'r wefan, felly mae ei phrosesau'n fwy effeithlon nag apiau ar-lein arferol.
Hefyd, gyda SPAs, asedau fel HTML, CSS, a sgriptiau Java dim ond unwaith yn ystod oes y cais y cânt eu nôl. Dim ond y data angenrheidiol sy'n cael ei gyfnewid yn ôl ac ymlaen.
Mae tudalennau gyda SPA hefyd yn galluogi defnyddwyr i lywio'n gyflymach diolch i caching a llai o ddata. Dim ond y data angenrheidiol sy'n cael ei drosglwyddo yn ôl ac ymlaen a dim ond y rhannau coll o'r cynnwys wedi'i ddiweddaru sy'n cael ei lawrlwytho.
- Dadfygio gyda Chrome
Mae dadfygio yn canfod ac yn dileu bygiau, gwallau, a gwendidau diogelwch cymwysiadau gwe sy'n arafu perfformiad. Mae dadfygio SPAs yn cael ei wneud yn hawdd gydag offer datblygwr Chrome. Gall datblygwyr reoli rendro cod JS o'r porwr, dadfygio SPAs heb hidlo trwy lawer o linellau cod.
Mae SPAs wedi'u hadeiladu ar ben fframweithiau JavaScript fel offer datblygwr AngularJS ac React, gan eu gwneud yn haws i'w dadfygio gan ddefnyddio porwyr Chrome.
Mae offer datblygwyr yn galluogi datblygwyr i ddeall sut y bydd y porwr yn gofyn am ddata gan weinyddion, yn ei storio, a sut y bydd yn arddangos elfennau tudalen. Yn ogystal, mae'r offer hyn yn caniatáu i ddatblygwyr fonitro a dadansoddi elfennau tudalen, gweithrediadau rhwydwaith, a data cysylltiedig.
- Datblygiad cyflym
Yn ystod y broses ddatblygu, gellir gwahanu pen blaen a phen ôl AGA, gan ganiatáu i ddau neu fwy o ddatblygwyr weithio ochr yn ochr. Nid yw newid y blaen neu'r pen ôl yn effeithio ar y pen arall, gan hyrwyddo datblygiad cyflymach.
Gall datblygwyr ailddefnyddio cod ochr y gweinydd a gwahanu SPAs o'r UI pen blaen. Mae'r bensaernïaeth ddatgysylltu mewn SPAs yn gwahanu arddangosfeydd pen blaen a gwasanaethau pen ôl. Mae hyn yn caniatáu i ddatblygwyr newid safbwyntiau, adeiladu ac arbrofi heb effeithio ar gynnwys na phoeni am dechnoleg pen ôl. Yna gall cwsmeriaid gael profiad cyson o ddefnyddio'r cymwysiadau hyn.
- Gwell profiad defnyddiwr
Gydag SPAs, mae defnyddwyr yn cael mynediad ar unwaith i dudalennau a welir gyda'r holl gynnwys ar unwaith. Mae hyn yn fwy cyfleus oherwydd gall defnyddwyr sgrolio'n gyfforddus ac yn ddi-dor. Mae'n teimlo fel defnyddio bwrdd gwaith brodorol neu ap symudol.
Mae SPAs yn darparu UX positif gyda dechrau, canol a diwedd penodol. Hefyd, gall defnyddwyr gyrraedd y cynnwys a ddymunir heb glicio ar ddolenni lluosog, fel mewn MPAs. Rydych chi'n profi cyfraddau bownsio is pan fydd defnyddwyr yn cael mynediad ar unwaith at wybodaeth, yn wahanol i MPAs lle mae defnyddwyr yn mynd yn rhwystredig gan fod tudalennau'n cymryd cryn dipyn o amser i'w llwytho. Mae llywio hefyd yn gyflymach oherwydd bod elfennau tudalen yn cael eu hailddefnyddio.
- Trosi i gymwysiadau IOS ac Android
Dylai datblygwyr sydd am drosglwyddo i gymwysiadau iOS ac Android ddefnyddio SPAs gan eu bod yn gymharol haws i'w trosi. Gallant ddefnyddio'r un cod i newid o SPA i gymwysiadau symudol. Oherwydd bod y cod cyfan yn cael ei ddarparu mewn un achos, mae SPAs yn hawdd i'w llywio, gan eu gwneud yn ddelfrydol ar gyfer cymwysiadau symudol.
- Cydweddoldeb traws-lwyfan
Gall datblygwyr ddefnyddio un sylfaen cod i adeiladu cymwysiadau a all redeg ar unrhyw ddyfais, porwr a system weithredu. Mae hyn yn gwella profiad y defnyddiwr gan y gallant ddefnyddio'r SPA yn unrhyw le. Mae hefyd yn galluogi datblygwyr a pheirianwyr DevOps i adeiladu cymwysiadau llawn nodweddion, gan gynnwys dadansoddeg amser real, wrth ddatblygu cymwysiadau golygu cynnwys.
Anfanteision
Er gwaethaf holl fanteision cymwysiadau un dudalen, mae rhai anfanteision yn codi wrth ddefnyddio fframweithiau SPA. Yn ffodus, mae gwaith yn mynd rhagddo i oresgyn y problemau hyn gydag AGA. Isod mae rhai anfanteision;
- Optimeiddio Peiriannau Chwilio (SEO)
Credir yn eang nad yw cymwysiadau tudalen sengl yn ffit da ar gyfer SEO. Nid yw'r rhan fwyaf o beiriannau chwilio, fel Google neu Yahoo, wedi gallu cropian gwefannau SPA yn seiliedig ar ryngweithiadau Ajax â gweinyddwyr ers tro. O ganlyniad, roedd y rhan fwyaf o'r safleoedd AGA hyn yn parhau heb eu mynegeio. Ar hyn o bryd, mae bots Google wedi cael eu haddysgu sut i ddefnyddio JavaScript yn lle HTML rheolaidd i fynegeio gwefannau SPA, sy'n brifo safleoedd.
Mae ceisio ffitio SEO i mewn i wefan SPA parod yn heriol ac yn ddrud. Mae'n rhaid i ddatblygwyr adeiladu gwefan ar wahân, wedi'i rendro gan weinydd y peiriant chwilio, sy'n aneffeithlon ac yn cynnwys llawer o god ychwanegol. Gellir defnyddio technegau eraill fel canfod nodweddion a rhag-rendro hefyd. Mewn cyfleusterau SPA, mae URL unigol ar gyfer pob tudalen yn cyfyngu ar alluoedd SEO ar gyfer SPAs.
- Llywio botwm yn ôl ac ymlaen
Mae porwyr yn cadw gwybodaeth i helpu tudalennau gwe i lwytho'n gyflym. Pan fydd defnyddwyr yn taro'r botwm cefn, mae'r rhan fwyaf yn disgwyl i'r dudalen fod mewn cyflwr tebyg i'r tro diwethaf iddynt ei gweld, ac y bydd y trawsnewid yn digwydd yn gyflym. Mae saernïaeth we traddodiadol yn caniatáu hyn trwy ddefnyddio copïau wedi'u storio o'r wefan ac adnoddau cysylltiedig. Fodd bynnag, mewn gweithrediad naïf o SPA, mae pwyso'r botwm yn ôl yn cael yr un effaith â chlicio ar ddolen. Yn achosi cais gweinydd, oedi cynyddol, a newidiadau data gweladwy.
Er mwyn bodloni disgwyliadau defnyddwyr a darparu profiad cyflymach, mae angen i ddatblygwyr SPA ddynwared ymarferoldeb porwyr brodorol gan ddefnyddio JavaScript.
- Lleoliad sgrolio
Mae porwyr yn storio gwybodaeth fel lleoliad sgrolio olaf y tudalennau yr ymwelwyd â nhw. Fodd bynnag, efallai y bydd defnyddwyr yn gweld bod safleoedd sgrolio wedi newid wrth lywio SPAs gan ddefnyddio botymau yn ôl ac ymlaen y porwr. Er enghraifft, ar Facebook, weithiau mae defnyddwyr yn sgrolio yn ôl i'w safleoedd sgrolio diwethaf, ond weithiau nid ydynt. Mae hyn yn arwain at brofiad defnyddiwr is-optimaidd gan fod yn rhaid iddynt ailddechrau sgrolio â llaw yn ôl i'r safle sgrolio blaenorol.
Er mwyn mynd i'r afael â'r mater hwn, mae angen i ddatblygwyr ddarparu cod sy'n arbed, yn adfer, ac yn annog y safle sgrolio cywir wrth i'r defnyddiwr sgrolio yn ôl ac ymlaen.
- Dadansoddiad gwefan
Trwy ychwanegu cod dadansoddeg at dudalen, gall defnyddwyr olrhain traffig i'r dudalen. Fodd bynnag, mae SPAs yn ei gwneud hi'n anodd pennu pa dudalennau neu gynnwys sydd fwyaf poblogaidd gan mai dim ond un dudalen ydyw. Mae angen i chi ddarparu cod ychwanegol ar gyfer y dadansoddiadau i olrhain y tudalennau ffug wrth iddynt gael eu gweld.
- Materion diogelwch
Mae SPAs yn fwy tebygol o gael eu peryglu drwy sgriptio traws-safle. Maent yn caniatáu i ddefnyddwyr lawrlwytho'r rhaglen gyfan, gan roi mwy o gyfleoedd iddynt ddod o hyd i wendidau trwy beirianneg wrthdroi. Er mwyn mynd i'r afael â'r mater hwn, rhaid i ddatblygwyr sicrhau bod yr holl resymeg ochr y cleient sy'n ymwneud â diogelwch rhaglenni gwe, megis dilysu a dilysu mewnbwn, yn cael ei dyblu ar y gweinydd i'w dilysu. Hefyd, rhaid i ddatblygwyr ddarparu mynediad cyfyngedig yn seiliedig ar rôl.
Casgliad
Mae Apiau Tudalen Sengl yn nodi'r cam nesaf yn esblygiad profiadau ap. Maent yn gyflymach, yn fwy sythweledol a gellir eu hintegreiddio â nodweddion uwch megis addasu. Dyna pam mae'r cwmnïau gorau sydd â llawer o ddefnyddwyr cydamserol, fel Gmail, Netflix neu borthiant newyddion Facebook, yn dibynnu ar bensaernïaeth un dudalen. Drwy roi’r dechnoleg hon ar waith, gall busnesau gael mwy o werth o’u heiddo ar-lein a gwneud cynnydd newydd fel busnes digidol.
Ercole Palmeri
