In inkele pagina-applikaasje (SPA) is in webapp dy't oan 'e brûker wurdt presintearre fia ien HTML-side om mear responsyf te wêzen en in buroblêdapplikaasje of native app nauwer te replikearjen.
In SPA komt soms defisingle-side ynterface (SPI).
In applikaasje fan ien side kin alle HTML, JavaScript en CSS fan 'e applikaasje ophelje tidens de earste laden, of it kin boarnen dynamysk laden foar bywurkjen yn reaksje op brûkersynteraksje of oare eveneminten.
Oare webapplikaasjes presintearje de brûker in thússide dy't keppele is oan dielen fan 'e applikaasje op aparte HTML-siden, wat betsjut dat de brûker moat wachtsje op in nije side om te laden elke kear as se in nij fersyk meitsje.
Technologies
SPA's brûke HTML5 en Ajax (asynchronous JavaScript en XML) om floeiende en dynamyske antwurden op brûkersoanfragen yn te skeakeljen, wêrtroch ynhâld fuortendaliks bywurke wurde kin as in brûker in aksje nimt. Sadree't de side is laden, ynteraksjes mei de tsjinner plakfine fia Ajax-oproppen en de gegevens wurde weromjûn, ûntdutsen yn JSON (JavaScript Object Notation) formaat, om de side te ferfarskjen sûnder opnij te laden.
SPA yn detail
Apps op ien side binne opmerklik foar har fermogen om elk diel fan 'e brûkersynterface opnij te ûntwerpen sûnder dat in tsjinner rûnreis nedich is om de HTML op te heljen. Dit wurdt dien troch it skieden fan gegevens fan gegevenspresintaasje mei in modellaach dy't de gegevens beheart en in werjeftelaach dy't lêst fan 'e modellen.
Goede koade komt út it oplossen fan itselde probleem meardere kearen, of refactoring it. Meastal evoluearret dit proses yn weromkommende patroanen, mei ien meganisme dat itselde ding konsekwint docht.
Om ûnderhâldbere koade te skriuwen, moatte jo koade op in ienfâldige manier skriuwe. Dit is in konstante striid, yn feite is it maklik om kompleksiteit (yngongen/ôfhinklikens) ta te foegjen troch koade te skriuwen om in probleem op te lossen; en it is maklik om in probleem op te lossen op in manier dy't de kompleksiteit net ferminderje.
Nammeromten binne dêr in foarbyld fan.
Single Page Applications (SPA) Multi Page Applications (MPA) fergelike
Multi-side-applikaasjes (MPA's) befetsje meardere siden mei statyske gegevens en keppelings nei oare siden. HTML en CSS binne de wichtichste technologyen dy't brûkt wurde om MPA-websides te ûntwikkeljen. Se kinne JavaScript brûke om lading te ferminderjen en snelheid te ferheegjen. Organisaasjes dy't in breed oanbod fan tsjinsten oanbiede, lykas online winkels, moatte beskôgje it brûken fan MPA, om't se it maklik meitsje om te ferbinen mei ferskate brûkersdatabases.
Applikaasjes op ien side ferskille op 'e folgjende manieren fan applikaasjes mei meardere siden:
- Untwikkelingsproses: By it meitsjen fan MPA's hawwe jo gjin JavaScript-feardigens nedich, yn tsjinstelling ta SPA's. De keppeling fan front-ends en back-ends yn MPA's betsjut lykwols dat dizze siden relatyf langere boutiden fereaskje as SPA's.
- faasje: MPA's rinne relatyf stadiger, wêrtroch't elke nije side fanôf it begjin wurdt laden. SPA's laden lykwols folle rapper nei de earste download, om't se gegevens yn cache foar letter gebrûk.
- sykmasineoptimalisearring: Sykmasines kinne websiden maklik yndeksearje mei MPA. MPA's hawwe mear siden krûpt troch sykmasines om bettere SEO-ranglist te generearjen. De ynhâld fan elke side is ek statysk, wat it tagonkliker makket. Yn tsjinstelling hawwe SPA's in side mei ien unike URL (Uniform Resource Locator). Se brûke ek JavaScript, dat net goed yndeksearre wurdt troch de measte sykmasines. Dit makket SEO-ranglist foar SPA's mear útdaagjend.
- feiligens: Yn MPA moatte jo elke online side yndividueel befeiligje. SPA's binne lykwols mear gefoelich foar hackeroanfallen. Mar mei de juste oanpak kinne ûntwikkelingsteams applikaasjefeiligens ferbetterje.
As mear bedriuwen migrearje om SPA's te brûken, sille crawlers en sykmasines evoluearje om se better te yndeksearjen. Sjoen syn snelheid is it allinich in fraach wannear't SPA's de go-to-opsje wurde foar ûntwikkeling fan webapplikaasjes. Dan sille de foardielen fan MPA boppe SPA begjinne te ferdwinen.
Wannear moatte jo applikaasjes op ien side brûke?
D'r binne fiif senario's wêr't sokke applikaasjes it meast relevant binne:
- Brûkers dy't in webside ûntwikkelje wolle mei in dynamysk platfoarm en legere gegevensvoluminten kinne SPA's brûke.
- Brûkers dy't plannen om in mobile applikaasje te bouwen foar har webside kinne ek beskôgje om SPA te brûken. Se kinne de backend API (Application Programming Interface) brûke foar de side en de mobile applikaasje.
- SPA-arsjitektuer is geskikt foar it bouwen fan sosjale netwurken lykas Facebook, SaaS-platfoarms en sletten mienskippen, om't se minder SEO nedich binne.
- Brûkers dy't har konsuminten naadleaze ynteraksje wolle oanbiede moatte ek SPA's brûke. Konsuminten kinne ek tagong krije ta live updates foar live streaminggegevens en grafiken.
- Brûkers dy't in konsekwinte, native en dynamyske brûkersûnderfining wolle leverje oer apparaten, bestjoeringssystemen en browsers.
In goed team moat it budzjet, ark en tiid hawwe om in applikaasje fan hege kwaliteit op ien side te meitsjen. Dit soarget foar in betroubere en effisjinte SPA dy't gjin ferkearsrelatearre downtime ûnderfynt.
Single page applikaasje arsjitektuer
Ien-side-apps ynteraksje mei besikers troch te laden en te wurkjen op 'e aktuele side, wêrtroch't de needsaak om meardere websiden fan' e tsjinner te laden.
Websites mei SPA besteane út ien URL-keppeling. De ynhâld wurdt ynladen en spesifike brûkersynterface (UI) komponinten wurde bywurke as jo klikke. De brûkersûnderfining wurdt ferbettere as de brûker kin ynteraksje mei de aktuele side as nije ynhâld wurdt ophelle fan de tsjinner. As in ferfarsking plakfynt, wurde dielen fan 'e aktuele side bywurke mei de nije ynhâld.
It earste klantfersyk yn SPA laadt de applikaasje en al har relevante aktiva, lykas HTML, CSS en JavaScript. It earste laden bestân kin wichtich wêze foar komplekse applikaasjes en resultearje yn in tragere laden tiid. In applikaasje-programmearring-ynterface (API) hellet nije gegevens op as de brûker troch in SPA navigearret. de tsjinner reagearret allinnich mei gegevens yn JSON (JavaScript Object Notation) opmaak. By ûntfangst fan dizze gegevens ferfarsket de browser de werjefte fan 'e applikaasje dy't de brûker sjocht sûnder in side opnij te laden.
Applikaasjearsjitektuer fan ien side omfettet renderingtechnologyen foar serverside en client-side. De side wurdt werjûn en presintearre oan de brûker fia Client Side Rendering (CSR), Server Side Rendering (SSR), of Static Site Generator (SSG).
- Client Side Rendering (CSR)
Mei client-side rendering makket de browser in fersyk oan de tsjinner foar in HTML-bestân en ûntfangt in basis HTML-bestân mei taheakke skripts en stilen. By it útfieren fan JavaScript sjocht de brûker in lege side of loaderôfbylding. De SPA hellet de gegevens op, produseart fisualisaasjes en stjoert de gegevens yn it Document Object Model (DOM). De SPA wurdt dan klearmakke foar gebrûk. CSR is faaks de langste fan 'e trije alternativen en kin de blêder sa no en dan oerweldigje troch it swiere gebrûk fan apparaatboarnen by it besjen fan ynhâld. Derneist is CSR in geweldich alternatyf foar websiden mei hege ferkear, om't it ynformaasje oan konsuminten presintearret sûnder oermjittige serverkommunikaasje, wat resulteart yn in flugger brûkersûnderfining.
- Server Side Rendering (SSR)
Tidens it werjaan fan 'e serverside freegje browsers in HTML-bestân fan' e tsjinner, dy't de frege gegevens ophelje, de SPA werjaan en it HTML-bestân meitsje foar de applikaasje ûnderweis. Tagonklik materiaal wurdt dan oanbean oan de brûker. De SPA-arsjitektuer is nedich om eveneminten te heakjen, in firtuele DOM te produsearjen en fierdere operaasjes út te fieren. De SPA wurdt dan klearmakke foar gebrûk. SSR makket it programma rap, om't it de snelheid fan in SPA kombineart mei de browser fan 'e brûker net te oerladen.
- Static Site Generator (SSG)
Binnen de statyske sidebouwer meitsje browsers fuortendaliks in fersyk oan de tsjinner foar in HTML-bestân. De side wurdt werjûn oan de brûker. De SPA hellet de gegevens op, genereart werjeften en befolket it dokumintobjektmodel (DOM). Dan is de SPA klear foar gebrûk. Ynlieding fan 'e namme binne SSG's meast geskikt foar statyske siden. Se leverje statyske siden mei goede en rappe opsje. Foar websiden mei dynamyske ynhâld, brûkers wurde advisearre om te kiezen ien fan de oare twa ynformaasje rendering opsjes.
Foardielen fan applikaasjes op ien side
Grutte bedriuwen lykas Meta, YouTube en Netflix binne ferpleatst fan applikaasjes mei meardere siden nei applikaasjes mei ien side. SPA's biede in soepelere brûkersûnderfining, hegere prestaasjes en responsiviteit. Hjirûnder binne de foardielen fan it brûken fan applikaasjes op ien side.
- Caching funksje
In applikaasje op ien side docht in inkeld fersyk oan de tsjinner by de earste download en bewarret alle gegevens dy't it ûntfangt. Konsuminten kinne de ûntfongen gegevens brûke om offline te wurkjen as it nedich is, wat it handiger makket foar de brûkers, om't it har mooglik makket om minder gegevensboarnen te konsumearjen. Ek as in kliïnt in minne ynternetferbining hat, kinne lokale gegevens wurde syngronisearre mei de tsjinner as de LAN-ferbining it talit.
- Fluch en responsyf
It brûken fan SPA's kin de snelheid fan in webside ferbetterje, om't it allinich de frege ynhâld ferfarsket ynstee fan de heule side te ferfarskjen. SPA's laden in lyts JSON-bestân yn stee fan in nije side. It JSON-bestân soarget foar flugger laden snelheid en effisjinsje. It resulteart yn direkte tagong ta alle funksjes en funksjes fan in side sûnder fertraging. Dit is in enoarm plus, om't de laadtiid fan in webside de ynkomsten en ferkeap signifikant kin beynfloedzje.
SPA's soargje foar soepele oergongen troch alle ynformaasje op 'e side direkt te leverjen. De webside hoecht net bywurke te wurden, dus syn prosessen binne effisjinter dan typyske online apps.
Ek, mei SPA's, aktiva lykas HTML, CSS, en skripts Java se wurde mar ien kear yn it libben fan in applikaasje ophelle. Allinnich de nedige gegevens wurde hinne en wer útwiksele.
Siden mei SPA tastean brûkers ek flugger te navigearjen troch caching en fermindere gegevensvoluminten. Allinich de nedige gegevens wurde hinne en wer oerstjoerd en allinich de ûntbrekkende dielen fan 'e bywurke ynhâld wurde ynladen.
- Debuggen mei Chrome
Debuggen detektearret en ferwideret bugs, flaters en kwetsberens foar webapplikaasjefeiligens dy't prestaasjes fertrage. SPA's debuggen wurdt maklik makke mei Chrome-ûntwikkeldersark. Untwikkelders kinne de werjefte fan JS-koade kontrolearje fan 'e browser, SPA's debugje sûnder in protte rigels koade te siften.
SPA's binne boud boppe op JavaSkript-ramten lykas AngularJS en React-ûntwikkeldersark, wêrtroch't se makliker binne te debuggen mei Chrome-browsers.
Untwikkeldersynstruminten kinne ûntwikkelders begripe hoe't de browser gegevens sil freegje fan servers, it cache, en hoe't it side-eleminten sil werjaan. Derneist kinne dizze ark ûntwikkelders side-eleminten, netwurkoperaasjes en byhearrende gegevens kontrolearje en analysearje.
- Rapid ûntwikkeling
Tidens it ûntwikkelingsproses kinne de front-end en back-end fan in SPA skieden wurde, wêrtroch twa of mear ûntwikkelders parallel kinne wurkje. It feroarjen fan it frontend of backend hat gjin ynfloed op it oare ein, sadat rapper ûntwikkeling befoarderet.
Untwikkelders kinne tsjinner-side-koade opnij brûke en SPA's skiede fan 'e front-end UI. De ûntkoppele arsjitektuer yn SPA's skiedt front-end-displays en back-end-tsjinsten. Hjirmei kinne ûntwikkelders perspektiven feroarje, bouwe en eksperimintearje sûnder ynhâld te beynfloedzjen of har soargen te meitsjen oer back-end technology. Klanten kinne dan in konsekwint ûnderfining hawwe mei dizze applikaasjes.
- Ferbettere brûkersûnderfining
Mei SPA's krije brûkers direkt tagong ta besjoen siden mei alle ynhâld tagelyk. Dit is handiger, om't brûkers noflik en naadloos kinne rôlje. It fielt as it brûken fan in native buroblêd of mobile app.
SPA's jouwe in positive UX mei in dúdlik begjin, midden en ein. Ek kinne brûkers de winske ynhâld berikke sûnder op meardere keppelings te klikken, lykas yn MPA's. Jo ûnderfine legere bounce tariven as brûkers direkte tagong krije ta ynformaasje, yn tsjinstelling ta MPA's wêr't brûkers frustrearre wurde om't siden in signifikante tiid nimme om te laden. Navigaasje is ek rapper om't side-eleminten opnij brûkt wurde.
- Konverzje nei iOS- en Android-applikaasjes
Untwikkelders dy't sykje nei oergong nei iOS- en Android-applikaasjes moatte SPA's brûke, om't se relatyf makliker binne te konvertearjen. Se kinne deselde koade brûke om te wikseljen fan SPA nei mobile applikaasjes. Om't de heule koade yn ien eksimplaar wurdt levere, binne SPA's maklik te navigearjen, wêrtroch't se ideaal binne foar mobile applikaasjes.
- Cross-platform kompatibiliteit
Untwikkelders kinne in inkele koadebasis brûke om applikaasjes te bouwen dy't kinne rinne op elk apparaat, browser en bestjoeringssysteem. Dit fersterket de konsumintûnderfining, om't se de SPA oeral kinne brûke. It stelt ek ûntwikkelders en DevOps-yngenieurs yn steat om funksje-rike applikaasjes te bouwen, ynklusyf real-time analytics, wylst it ûntwikkeljen fan ynhâld-bewurkingsapplikaasjes.
Downsides
Nettsjinsteande alle foardielen fan applikaasjes op ien side, ûntsteane guon neidielen by it brûken fan SPA-ramten. Gelokkich wurdt der wurke om dizze problemen mei SPA's te oerwinnen. Hjirûnder binne wat neidielen;
- Search Engine Optimization (SEO)
It wurdt wiid leaud dat applikaasjes op ien side net in goede fit binne foar SEO. De measte sykmasines, lykas Google of Yahoo, binne in skoft net yn steat west om SPA-websides te crawljen basearre op Ajax-ynteraksjes mei servers. As gefolch bleaunen de measte fan dizze SPA-siden net-yndeksearre. Op it stuit binne Google-bots leard hoe't jo JavaSkript brûke ynstee fan gewoane HTML om SPA-websides te yndeksearjen, wat de ranglist docht.
Besykje SEO te passen yn in klearmakke SPA-side is útdaagjend en djoer. Untwikkelders moatte in aparte webside bouwe, werjûn troch de sykmasjine-tsjinner, dy't net effisjint is en in protte ekstra koade omfettet. Oare techniken lykas funksjedeteksje en pre-rendering kinne ek brûkt wurde. Yn SPA-foarsjenningen beheint ien URL foar elke side de SEO-mooglikheden foar SPA's.
- Efter- en foarútknopnavigaasje
Browsers bewarje ynformaasje om websiden fluch te laden. As konsuminten op 'e efterknop slaan, ferwachtsje de measte dat de side yn in steat is lykas de lêste kear dat se it seagen, en dat de oergong fluch sil barre. Tradysjonele webarsjitektueren tastean dit ta mei help fan cached kopyen fan de side en besibbe boarnen. Yn in naïve ymplemintaasje fan in SPA hat it drukken op de knop werom lykwols itselde effekt as it klikken op in keppeling. Feroarsaakje in tsjinner fersyk, ferhege efterstân, en sichtbere gegevens feroarings.
Om oan brûkersferwachtingen te foldwaan en in rappere ûnderfining te leverjen, moatte SPA-ûntwikkelders de funksjonaliteit fan native browsers mimikearje mei JavaScript.
- Scroll lokaasje
Browsers bewarje ynformaasje lykas de lêste scrollposysje fan besochte siden. Brûkers kinne lykwols fine dat rôlposysjes binne feroare by it navigearjen fan SPA's mei de werom- en foarútknoppen fan 'e browser. Bygelyks, op Facebook rôlje brûkers soms werom nei har lêste rolposysjes, mar soms net. Dit resulteart yn in suboptimale brûkersûnderfining, om't se mei de hân werom scrollen moatte weromsette nei de foarige scrollposysje.
Om dit probleem oan te pakken, moatte ûntwikkelders koade leverje dy't de juste rôlposysje opslaat, ophelje en freget as de brûker hinne en wer rôlet.
- Website analyse
Troch analytyske koade oan in side ta te foegjen, kinne brûkers ferkear nei de side folgje. SPA's meitsje it lykwols lestich om te bepalen hokker siden of ynhâld it populêrste is, om't it mar ien side is. Jo moatte ekstra koade leverje foar de analytiken om de pseudo-siden te folgjen sa't se wurde besjoen.
- Feiligensproblemen
SPA's binne mear gefoelich foar kompromitteare fia cross site skripting. Se tastean konsuminten de hiele applikaasje te downloaden, en bleatstelle se oan mear kânsen om kwetsberens te finen fia reverse engineering. Om dit probleem oan te pakken, moatte ûntwikkelders derfoar soargje dat alle logika oan 'e client-side relatearre oan feiligens fan webapplikaasjes, lykas ferifikaasje en ynfiervalidaasje, wurdt ferdûbele op' e tsjinner foar ferifikaasje. Ek moatte ûntwikkelders beheinde rolbasearre tagong leverje.
Konklúzje
Single Page Apps markearje de folgjende stap yn 'e evolúsje fan app-ûnderfinings. Se binne rapper, mear yntuïtyf en kinne wurde yntegrearre mei avansearre funksjes lykas maatwurk. Dêrom fertrouwe de bêste bedriuwen mei in protte tagelyk brûkers, lykas Gmail, Netflix of Facebook's nijsfeed, op ien side-arsjitektuer. Troch dizze technology te ymplementearjen, kinne bedriuwen mear wearde krije út har online eigenskippen en nije yngongen meitsje as digitaal bedriuw.
Ercole Palmeri
