Ühe lehe rakendus (SPA) on veebirakendus, mis esitatakse kasutajale ühe HTML-lehe kaudu, et see reageeriks paremini ja kopeeriks paremini töölauarakendust või omarakendust.
SPA tuleb vahel defiüheleheline liides (SPI).
Üheleheline rakendus saab esmase laadimise ajal tuua kogu rakenduse HTML-i, JavaScripti ja CSS-i või laadida ressursse dünaamiliselt, et värskendada vastuseks kasutaja interaktsioonile või muudele sündmustele.
Teised veebirakendused esitavad kasutajale avalehe, mis on lingitud rakenduse osadele eraldi HTML-lehtedel, mis tähendab, et kasutaja peab iga kord uue päringu tegemisel ootama uue lehe laadimist.
Tehnoloogiad
SPA-d kasutavad HTML5 ja Ajaxi (asünkroonne JavaScript ja XML), et võimaldada kasutaja päringutele sujuvaid ja dünaamilisi vastuseid, võimaldades kasutaja toimingu sooritamisel sisu kohe värskendada. Kui leht on laaditud, toimub suhtlemine serveriga Ajaxi kõnede kaudu ja andmed tagastatakse, tuvastatuna JSON-vormingus (JavaScript Object Notation), et värskendada lehte ilma uuesti laadimist nõudmata.
SPA üksikasjalikult
Ühelehelised rakendused on tähelepanuväärsed nende võime poolest kasutajaliidese mis tahes osa ümber kujundada, ilma et oleks vaja HTML-i toomiseks serveri edasi-tagasi liikumist. See saavutatakse andmete eraldamisel andmete esitusest mudelikihiga, mis haldab andmeid, ja vaatekihiga, mis loeb mudeleid.
Hea kood tuleneb sama probleemi mitmekordsest lahendamisest või selle ümbertöötamisest. Tavaliselt areneb see protsess korduvate mustritena, kusjuures üks mehhanism teeb järjepidevalt sama asja.
Hooldatava koodi kirjutamiseks peate koodi kirjutama lihtsal viisil. See on pidev võitlus, tegelikult on probleemi lahendamiseks koodi kirjutamisega lihtne lisada keerukust (sõltuvusi/sõltuvusi); ja probleemi on lihtne lahendada viisil, mis ei vähenda keerukust.
Selle näiteks on nimeruumid.
Single Page Applications (SPA) Multi Page Applications (MPA) võrdlus
Mitmelehelised rakendused (MPA) sisaldavad mitut lehte staatiliste andmete ja linkidega teistele saitidele. HTML ja CSS on peamised tehnoloogiad, mida kasutatakse MPA veebisaitide arendamiseks. Nad saavad kasutada JavaScripti koormuse vähendamiseks ja kiiruse suurendamiseks. Organisatsioonid, mis pakuvad laia valikut teenuseid, näiteks veebipoed, peaksid kaaluma MPA kasutamist, kuna see muudab erinevate kasutajate andmebaasidega ühenduse loomise lihtsaks.
Ühelehelised rakendused erinevad mitmelehelistest rakendustest järgmistel viisidel.
- Arendusprotsess: MPAde loomisel ei vaja te erinevalt SPA-dest JavaScripti oskust. Siiski tähendab kaitsealade esi- ja tagaotsade ühendamine seda, et need alad nõuavad suhteliselt pikemat ehitusaega kui erikaitsealad.
- kiirus: MPA-d töötavad suhteliselt aeglasemalt, mis nõuab iga uue lehe nullist laadimist. Kuid SPA-d laaditakse pärast esmast allalaadimist palju kiiremini, kuna need salvestavad andmed hilisemaks kasutamiseks vahemällu.
- Otsingumootori optimeerimine: otsingumootorid saavad hõlpsasti MPA-ga veebisaite indekseerida. MPA-del on paremate SEO paremusjärjestuste loomiseks rohkem lehti, mida otsingumootorid roomavad. Iga lehe sisu on ka staatiline, muutes selle paremini juurdepääsetavaks. Seevastu SPA-del on leht ühe unikaalse URL-iga (Uniform Resource Locator). Nad kasutavad ka JavaScripti, mida enamik otsingumootoreid korralikult ei indekseeri. See muudab SPA-de SEO edetabeli keerukamaks.
- Turvalisus: MPA-s peate iga veebilehe eraldi kaitsma. Samas on SPA-d häkkerite rünnakutele rohkem altid. Kuid õige lähenemisviisi korral saavad arendusmeeskonnad rakenduste turvalisust parandada.
Kuna üha rohkem ettevõtteid migreerub SPA-sid kasutama, arenevad roomajad ja otsingumootorid, et neid paremini indekseerida. Arvestades selle kiirust, on küsimus vaid selles, millal saavad SPA-d veebirakenduste arendamise põhivalikuks. Siis hakkavad MPA eelised SPA ees hääbuma.
Millal kasutada ühelehelisi rakendusi?
Sellised rakendused on kõige asjakohasemad viie stsenaariumi puhul:
- Kasutajad, kes soovivad arendada dünaamilise platvormiga ja väiksema andmemahuga veebisaiti, saavad kasutada SPA-sid.
- Kasutajad, kes plaanivad oma veebisaidile mobiilirakendust ehitada, võivad kaaluda ka SPA kasutamist. Nad saavad saidi ja mobiilirakenduse jaoks kasutada taustarakendusliidest (Application Programming Interface).
- SPA arhitektuur sobib sotsiaalsete võrgustike nagu Facebook, SaaS platvormide ja suletud kogukondade ehitamiseks, kuna need nõuavad vähem SEO-d.
- Kasutajad, kes soovivad pakkuda oma tarbijatele sujuvat suhtlust, peaksid kasutama ka SPA-sid. Tarbijatel on juurdepääs ka reaalajas voogesituse andmete ja graafikute värskendustele.
- Kasutajad, kes soovivad pakkuda ühtset, natiivset ja dünaamilist kasutuskogemust kõigis seadmetes, operatsioonisüsteemides ja brauserites.
Heal meeskonnal peaks olema eelarve, tööriistad ja aeg kvaliteetse ühelehelise rakenduse loomiseks. See tagab usaldusväärse ja tõhusa SPA, mis ei koge liiklusega seotud seisakuid.
Ühe lehe rakenduse arhitektuur
Ühe lehe rakendused suhtlevad külastajatega, laadides praegust lehte ja töötades sellel, välistades vajaduse laadida serverist mitut veebilehte.
SPA-ga veebisaidid koosnevad ühest URL-i lingist. Sisu laaditakse alla ja klõpsamisel värskendatakse konkreetseid kasutajaliidese (UI) komponente. Kasutajakogemus paraneb, kuna kasutaja saab serverist uue sisu hankimisel praeguse lehega suhelda. Värskendamise korral värskendatakse praeguse lehe osi uue sisuga.
Esmane kliendipäring SPA-s laadib rakenduse ja kõik selle asjakohased varad, nagu HTML, CSS ja JavaScript. Esialgne laadimisfail võib olla keerukate rakenduste jaoks oluline ja selle tulemuseks on aeglasem laadimisaeg. Rakenduse programmeerimisliides (API) hangib uusi andmeid, kui kasutaja navigeerib SPA kaudu. server vastab ainult JSON-vormingus (JavaScript Object Notation) olevate andmetega. Nende andmete saamisel värskendab brauser kasutajale kuvatavat rakenduse vaadet ilma lehte uuesti laadimata.
Ühelehelise rakenduse arhitektuur sisaldab serveri- ja kliendipoolseid renderdustehnoloogiaid. Sait kuvatakse ja esitatakse kasutajale kliendipoolse renderduse (CSR), serveripoolse renderduse (SSR) või staatilise saidi generaatori (SSG) kaudu.
- Kliendipoolne renderdus (CSR)
Kliendipoolse renderdamise korral esitab brauser serverile päringu HTML-faili saamiseks ja võtab vastu lihtsa HTML-faili koos lisatud skriptide ja stiilidega. JavaScripti käivitamisel näeb kasutaja tühja lehte või laadija pilti. SPA hangib andmed, toodab visualiseeringuid ja surub andmed dokumendiobjekti mudelisse (DOM). Seejärel valmistatakse SPA kasutamiseks ette. CSR on sageli kolmest alternatiivist pikim ja võib aeg-ajalt brauseri üle koormata, kuna see kasutab sisu vaatamisel palju seadme ressursse. Lisaks on CSR suurepärane alternatiiv suure liiklusega veebisaitidele, kuna see esitab tarbijatele teavet ilma liigse serverisuhtluseta, mille tulemuseks on kiirem kasutuskogemus.
- Serveripoolne renderdus (SSR)
Serveripoolse renderdamise ajal nõuavad brauserid serverilt HTML-faili, mis tõmbab nõutud andmed, renderdab SPA ja loob liikvel olles rakenduse jaoks HTML-faili. Seejärel esitatakse kasutajale juurdepääsetav materjal. SPA-arhitektuuri on vaja sündmuste lisamiseks, virtuaalse DOM-i loomiseks ja edasiste toimingute tegemiseks. Seejärel valmistatakse SPA kasutamiseks ette. SSR muudab programmi kiireks, kuna ühendab SPA kiiruse kasutaja brauseri ülekoormamisega.
- Staatiline saidi generaator (SSG)
Staatilises saidikoostajas esitavad brauserid kohe serverile päringu HTML-faili saamiseks. Leht kuvatakse kasutajale. SPA hangib andmed, loob vaated ja täidab dokumendiobjekti mudeli (DOM). Seejärel on SPA kasutusvalmis. Nimest järeldades, sobivad SSG-d enamasti staatiliste lehtede jaoks. Nad pakuvad staatilisi lehti hea ja kiire valikuga. Dünaamilise sisuga veebisaitide puhul soovitatakse kasutajatel valida üks kahest muust teabeedastusvalikust.
Üheleheliste rakenduste eelised
Suured ettevõtted nagu Meta, YouTube ja Netflix on liikunud mitmelehelistelt rakendustelt ühelehelistele rakendustele. SPA-d pakuvad sujuvamat kasutuskogemust, suuremat jõudlust ja reageerimisvõimet. Allpool on toodud üheleheliste rakenduste kasutamise eelised.
- Vahemällu salvestamise funktsioon
Üheleheline rakendus teeb esmasel allalaadimisel serverile ühe päringu ja salvestab kõik saadud andmed. Tarbijad saavad saadud andmeid vajadusel kasutada võrguühenduseta töötamiseks, mis teeb selle kasutajatele mugavamaks, kuna võimaldab tarbida vähem andmeressursse. Samuti, kui kliendil on halb Interneti-ühendus, saab kohalikke andmeid serveriga sünkroonida, kui LAN-ühendus seda võimaldab.
- Kiire ja vastutulelik
SPA-de kasutamine võib parandada veebisaidi kiirust, kuna see värskendab kogu lehe värskendamise asemel ainult taotletud sisu. SPA-d laadivad uue lehe asemel väiksema JSON-faili. JSON-fail tagab kiirema laadimiskiiruse ja tõhususe. Selle tulemuseks on kohene juurdepääs lehe kõikidele funktsioonidele ja funktsioonidele ilma viivitusteta. See on tohutu pluss, kuna veebisaidi laadimisaeg võib oluliselt mõjutada tulusid ja müüki.
SPA-d võimaldavad sujuvat üleminekut, pakkudes lehel kogu teavet koheselt. Veebisaiti ei ole vaja värskendada, seega on selle protsessid tõhusamad kui tavalised võrgurakendused.
Samuti koos SPA-dega, selliste varadega nagu HTML, CSS ja skriptid Java neid tuuakse ainult üks kord rakenduse eluea jooksul. Edasi-tagasi vahetatakse ainult vajalikke andmeid.
SPA-ga lehed võimaldavad kasutajatel tänu vahemällu salvestamisele ja väiksemale andmemahule ka kiiremini navigeerida. Edasi-tagasi edastatakse ainult vajalikke andmeid ja alla laaditakse ainult uuendatud sisu puuduvad osad.
- Silumine Chrome'iga
Silumine tuvastab ja eemaldab vead, vead ja veebirakenduste turvaaukud, mis aeglustavad jõudlust. SPA-de silumine on Chrome'i arendajatööriistade abil lihtne. Arendajad saavad juhtida JS-koodi renderdamist brauserist, siluda SPA-sid ilma paljusid koodiridu läbi sõelumata.
SPA-d on üles ehitatud JavaScripti raamistikele, nagu AngularJS ja React arendajatööriistad, muutes nende silumise Chrome'i brauserite abil lihtsamaks.
Arendaja tööriistad võimaldavad arendajatel mõista, kuidas brauser serveritelt andmeid küsib, vahemällu salvestab ja leheelemente kuvab. Lisaks võimaldavad need tööriistad arendajatel jälgida ja analüüsida leheelemente, võrgutoiminguid ja seotud andmeid.
- Kiire areng
Arendusprotsessi käigus saab SPA esi- ja tagaotsa eraldada, võimaldades paralleelselt töötada kahel või enamal arendajal. Esi- või taustaprogrammi muutmine ei mõjuta teist otsa, soodustades seega kiiremat arengut.
Arendajad saavad serveripoolset koodi uuesti kasutada ja SPA-sid esiotsa kasutajaliidesest eraldada. SPA-de lahtisidustatud arhitektuur eraldab esiotsa kuvarid ja taustateenused. See võimaldab arendajatel muuta vaatenurki, ehitada ja katsetada, ilma et see mõjutaks sisu või muretseks taustatehnoloogia pärast. Seejärel saavad kliendid nende rakenduste kasutamise järjepideva kogemuse.
- Täiustatud kasutajakogemus
SPA-de abil saavad kasutajad kohe juurdepääsu vaadatud lehtedele kogu sisuga korraga. See on mugavam, kuna kasutajad saavad mugavalt ja sujuvalt kerida. Tundub, et kasutaksite oma töölaua- või mobiilirakendust.
SPA-d pakuvad positiivset kasutajakogemust, millel on selge algus, keskpaik ja lõpp. Samuti pääsevad kasutajad soovitud sisuni ilma mitmel lingil klõpsamata, nagu MPA-des. Kui kasutajad saavad teabele kohe juurdepääsu, kogete madalamaid põrkemäärasid, erinevalt MPA-dest, kus kasutajad on pettunud, kuna lehtede laadimine võtab palju aega. Navigeerimine on ka kiirem, kuna leheelemente kasutatakse uuesti.
- Teisendamine IOS-i ja Androidi rakendusteks
Arendajad, kes soovivad üleminekut iOS-i ja Androidi rakendustele, peaksid kasutama SPA-sid, kuna neid on suhteliselt lihtsam teisendada. Nad saavad kasutada sama koodi, et lülituda SPA-lt mobiilirakendustele. Kuna kogu kood antakse ühes eksemplaris, on SPA-sid lihtne läbi kerida, mistõttu on need ideaalsed mobiilirakenduste jaoks.
- Platvormidevaheline ühilduvus
Arendajad saavad kasutada ühte koodibaasi, et luua rakendusi, mis võivad töötada mis tahes seadmes, brauseris ja operatsioonisüsteemis. See suurendab tarbijakogemust, kuna nad saavad SPA-d kasutada kõikjal. Samuti võimaldab see arendajatel ja DevOpsi inseneridel sisu redigeerimise rakendusi arendades luua funktsioonirikkaid rakendusi, sealhulgas reaalajas analüüsi.
Negatiivsed küljed
Vaatamata kõigile üheleheliste rakenduste eelistele, ilmnevad SPA-raamistike kasutamisel mõned puudused. Õnneks käib töö nende probleemide lahendamiseks SPA-dega. Allpool on mõned miinused;
- Otsingumootori optimeerimine (SEO)
Levinud on arvamus, et ühelehelised rakendused ei sobi SEO jaoks hästi. Enamik otsingumootoreid, nagu Google või Yahoo, ei ole mõnda aega saanud Ajaxi ja serverite suhtluse põhjal SPA veebisaitidel roomata. Selle tulemusena jäi enamik neist SPA aladest indekseerimata. Praegu on Google'i robotitele õpetatud kasutama SPA veebisaitide indekseerimiseks tavalise HTML-i asemel JavaScripti, mis kahjustab edetabelit.
SEO sobitamine valmis SPA saidile on keeruline ja kulukas. Arendajad peavad looma eraldi veebisaidi, mille renderdab otsingumootori server, mis on ebaefektiivne ja sisaldab palju lisakoodi. Kasutada saab ka muid tehnikaid, nagu funktsioonide tuvastamine ja eelrenderdamine. SPA-asutustes piirab iga lehe üks URL SPA-de SEO-võimalusi.
- Tagasi ja edasi nuppude navigeerimine
Brauserid salvestavad teavet, et aidata veebilehti kiiresti laadida. Kui tarbijad vajutavad tagasi nuppu, eeldavad enamik, et leht on samasuguses olekus, nagu nad seda viimati vaatasid, ja et üleminek toimub kiiresti. Traditsioonilised veebiarhitektuurid võimaldavad seda, kasutades saidi ja sellega seotud ressursside vahemällu salvestatud koopiaid. Kuid SPA naiivses teostuses on tagasinupu vajutamisel sama mõju kui lingil klõpsamisel. Põhjustab serveri päringu, suurenenud viivitust ja nähtavaid andmemuudatusi.
Kasutajate ootustele vastamiseks ja kiirema kasutuskogemuse pakkumiseks peavad SPA arendajad jäljendama JavaScripti kasutavate natiivsete brauserite funktsioone.
- Kerige asukohta
Brauserid salvestavad teavet, näiteks külastatud lehtede viimase kerimisasendi. Siiski võivad kasutajad avastada, et kerimisasendid on SPA-des navigeerides brauseri tagasi- ja edasinuppude abil muutunud. Näiteks Facebookis kerivad kasutajad mõnikord oma viimaste kerimiskohtadeni tagasi, kuid mõnikord mitte. Selle tulemuseks on ebaoptimaalne kasutuskogemus, kuna nad peavad käsitsi jätkama kerimist tagasi eelmisele kerimisasendile.
Selle probleemi lahendamiseks peavad arendajad esitama koodi, mis salvestab, hangib ja küsib õiget kerimisasendit, kui kasutaja kerib edasi-tagasi.
- Veebilehe analüüs
Lisades lehele analüüsikoodi, saavad kasutajad jälgida lehe liiklust. SPA-d muudavad aga kõige populaarsemate lehtede või sisu kindlaksmääramise keeruliseks, kuna tegemist on ainult ühe leheküljega. Peate andma analüüsi jaoks lisakoodi, et jälgida pseudolehti nende vaatamise ajal.
- Ohutusprobleemid
SPA-sid ohustatakse sagedamini saidiülene skriptimine. Need võimaldavad tarbijatel kogu rakenduse alla laadida, pakkudes neile rohkem võimalusi haavatavuste leidmiseks pöördprojekteerimise abil. Selle probleemi lahendamiseks peavad arendajad tagama, et kogu veebirakenduse turvalisusega seotud kliendipoolne loogika, nagu autentimine ja sisendi valideerimine, on kontrollimiseks serveris kahekordistunud. Samuti peavad arendajad pakkuma piiratud rollipõhist juurdepääsu.
Kokkuvõtteks
Ühe lehe rakendused tähistavad järgmist sammu rakenduskogemuse arengus. Need on kiiremad, intuitiivsemad ja neid saab integreerida täiustatud funktsioonidega, nagu kohandamine. Seetõttu toetuvad paljude samaaegsete kasutajatega parimad ettevõtted, nagu Gmail, Netflix või Facebooki uudistevoog, ühe lehe arhitektuurile. Seda tehnoloogiat rakendades saavad ettevõtted oma veebipõhistest omadustest rohkem kasu saada ja digitaalse ettevõttena uusi edusamme teha.
Ercole Palmeri
