Vieno puslapio programa (SPA) yra žiniatinklio programa, kuri vartotojui pateikiama per vieną HTML puslapį, kad būtų geriau reaguojama ir kad būtų galima tiksliau atkartoti darbalaukio programą arba savąją programą.
SPA kartais ateina defivieno puslapio sąsaja (SPI).
Vieno puslapio programa gali gauti visą programos HTML, „JavaScript“ ir CSS pradinio įkėlimo metu arba gali dinamiškai įkelti išteklius naujinimui, reaguodama į vartotojo sąveiką ar kitus įvykius.
Kitos žiniatinklio programos pateikia vartotojui pagrindinį puslapį, susietą su programos dalimis atskiruose HTML puslapiuose, o tai reiškia, kad kiekvieną kartą pateikęs naują užklausą vartotojas turi laukti, kol bus įkeltas naujas puslapis.
Technologijos
SPA naudoja HTML5 ir Ajax (asinchroninį JavaScript ir XML), kad būtų galima sklandžiai ir dinamiškai reaguoti į vartotojų užklausas, todėl turinį galima nedelsiant atnaujinti, kai vartotojas atlieka veiksmą. Kai puslapis įkeliamas, sąveika su serveriu vyksta naudojant „Ajax“ iškvietimus ir grąžinami duomenys, aptikti JSON („JavaScript Object Notation“) formatu, kad puslapis būtų atnaujintas nereikalaujant iš naujo įkelti.
SPA detaliau
Vieno puslapio programos išsiskiria savo galimybe perkurti bet kurią vartotojo sąsajos dalį, nereikalaujant serverio, kad būtų gautas HTML. Tai pasiekiama atskiriant duomenis nuo duomenų pateikimo modelio sluoksniu, kuris valdo duomenis, ir rodinio sluoksniu, kuris nuskaito modelius.
Geras kodas gaunamas išsprendus tą pačią problemą kelis kartus arba ją pakeitus. Paprastai šis procesas vystosi pasikartojančiais modeliais, kai vienas mechanizmas nuolat daro tą patį.
Norėdami parašyti prižiūrimą kodą, turite jį parašyti paprastu būdu. Tai yra nuolatinė kova, iš tikrųjų nesunku pridėti sudėtingumo (įtraukimų / priklausomybių) rašant kodą problemai išspręsti; ir nesunku išspręsti problemą taip, kad nesumažėtų jos sudėtingumo.
Vardų erdvės yra to pavyzdys.
Palyginti vieno puslapio aplikacijos (SPA) kelių puslapių programos (MPA).
Kelių puslapių programose (MPA) yra keli puslapiai su statiniais duomenimis ir nuorodomis į kitas svetaines. HTML ir CSS yra pagrindinės technologijos, naudojamos kuriant MPA svetaines. Jie gali naudoti „JavaScript“, kad sumažintų apkrovą ir padidintų greitį. Organizacijos, siūlančios platų paslaugų spektrą, pavyzdžiui, internetinės parduotuvės, turėtų apsvarstyti galimybę naudoti MPA, nes tai leidžia lengvai prisijungti prie skirtingų vartotojų duomenų bazių.
Vieno puslapio programos skiriasi nuo kelių puslapių programų šiais būdais:
- Kūrimo procesas: Kurdami MPA, jums nereikia turėti JavaScript įgūdžių, skirtingai nei SPA. Tačiau MPA priekinių ir galinių dalių sujungimas reiškia, kad šiose vietose reikia santykinai ilgesnio statybos laiko nei SAT.
- greitis: MPA veikia palyginti lėčiau, todėl kiekvieną naują puslapį reikia įkelti nuo nulio. Tačiau SPA įkeliami daug greičiau po pirminio atsisiuntimo, nes saugo duomenis talpykloje vėlesniam naudojimui.
- paieškos sistemos optimizavimas: paieškos sistemos gali lengvai indeksuoti svetaines su MPA. MPA turi daugiau puslapių, kuriuos tikrina paieškos sistemos, kad būtų sukurtas geresnis SEO reitingas. Kiekvieno puslapio turinys taip pat yra statinis, todėl jis lengviau pasiekiamas. Priešingai, SPA turi puslapį su vienu unikaliu URL (Uniform Resource Locator). Jie taip pat naudoja JavaScript, kurio dauguma paieškos sistemų tinkamai neindeksuoja. Dėl to SPA reitingai SEO yra sudėtingesni.
- Saugumas: MPA turite apsaugoti kiekvieną internetinį puslapį atskirai. Tačiau SPA yra labiau linkę į įsilaužėlių atakas. Tačiau taikydami tinkamą požiūrį kūrimo komandos gali pagerinti programų saugumą.
Kadangi vis daugiau įmonių pereina prie SPA, tikrinimo programos ir paieškos sistemos tobulės, kad jas geriau indeksuotų. Atsižvelgiant į jos greitį, tik klausimas, kada SPA taps pagrindine interneto programų kūrimo parinktimi. Tada MPA pranašumai prieš SPA pradės blėsti.
Kada naudoti vieno puslapio programas?
Yra penki scenarijai, kai tokios programos yra tinkamiausios:
- Vartotojai, norintys sukurti svetainę su dinamine platforma ir mažesniais duomenų kiekiais, gali naudotis SPA.
- Vartotojai, planuojantys savo svetainei sukurti mobiliąją aplikaciją, taip pat gali apsvarstyti galimybę pasinaudoti SPA. Svetainėje ir mobiliojoje programoje jie gali naudoti užpakalinę API (programų programavimo sąsają).
- SPA architektūra tinka kurti socialinius tinklus, tokius kaip Facebook, SaaS platformos ir uždaros bendruomenės, nes jiems reikia mažiau SEO.
- Vartotojai, norintys pasiūlyti savo vartotojams sklandžią sąveiką, taip pat turėtų naudoti SPA. Vartotojai taip pat gali pasiekti tiesioginius tiesioginio srauto duomenų ir grafikų atnaujinimus.
- Naudotojai, norintys užtikrinti nuoseklią, savąją ir dinamišką naudotojo patirtį visuose įrenginiuose, operacinėse sistemose ir naršyklėse.
Gera komanda turėtų turėti biudžeto, įrankių ir laiko sukurti aukštos kokybės vieno puslapio programą. Tai užtikrins patikimą ir efektyvų SPA, kuris nepatirs su eismu susijusių prastovų.
Vieno puslapio programos architektūra
Vieno puslapio programos sąveikauja su lankytojais įkeldamos ir dirbdamos su dabartiniu puslapiu, todėl nereikia įkelti kelių tinklalapių iš serverio.
Svetaines su SPA sudaro viena URL nuoroda. Turinys atsisiunčiamas ir konkretūs vartotojo sąsajos (UI) komponentai atnaujinami spustelėjus. Vartotojo patirtis pagerėjo, nes vartotojas gali sąveikauti su esamu puslapiu, kai iš serverio gaunamas naujas turinys. Kai įvyksta atnaujinimas, dabartinio puslapio dalys atnaujinamos nauju turiniu.
Pradinė kliento užklausa SPA įkelia programą ir visus susijusius išteklius, tokius kaip HTML, CSS ir JavaScript. Pradinis įkėlimo failas gali būti svarbus sudėtingoms programoms, todėl įkėlimo laikas gali sulėtėti. Programų programavimo sąsaja (API) gauna naujus duomenis, kai vartotojas naršo per SPA. serveris atsako tik duomenimis JSON (JavaScript Object Notation) formatu. Gavusi šiuos duomenis, naršyklė atnaujina programos vaizdą, kurį mato vartotojas, neįkeldama puslapio iš naujo.
Vieno puslapio taikomųjų programų architektūra apima serverio ir kliento pusės atvaizdavimo technologijas. Svetainė rodoma ir pateikiama vartotojui naudojant kliento pusės atvaizdavimą (CSR), serverio pusės atvaizdavimą (SSR) arba statinį svetainių generatorių (SSG).
- Kliento pusės atvaizdavimas (CSR)
Naudodama kliento pusės atvaizdavimą, naršyklė pateikia serveriui užklausą dėl HTML failo ir gauna pagrindinį HTML failą su pridedamais scenarijais ir stiliais. Vykdydamas „JavaScript“, vartotojas mato tuščią puslapį arba įkroviklio vaizdą. SPA gauna duomenis, sukuria vizualizacijas ir perkelia duomenis į dokumento objekto modelį (DOM). Tada SPA paruošiamas naudojimui. CSR dažnai yra ilgiausia iš trijų alternatyvų ir kartais gali priblokšti naršyklę dėl didelio įrenginio išteklių naudojimo peržiūrint turinį. Be to, CSR yra puiki alternatyva didelio srauto svetainėms, nes ji pateikia informaciją vartotojams be pernelyg didelio serverio ryšio, todėl naudotojo patirtis yra greitesnė.
- Serverio pusės atvaizdavimas (SSR)
Serverio pusės atvaizdavimo metu naršyklės prašo HTML failo iš serverio, kuris paima prašomus duomenis, pateikia SPA ir sukuria HTML failą programai kelyje. Tada vartotojui pateikiama prieinama medžiaga. SPA architektūra reikalinga norint prijungti įvykius, sukurti virtualų DOM ir atlikti tolesnes operacijas. Tada SPA paruošiamas naudojimui. SSR daro programą greitą, nes sujungia SPA greitį ir neperkrauna vartotojo naršyklę.
- Statinis svetainių generatorius (SSG)
Statinėje svetainių kūrimo priemonėje naršyklės iš karto pateikia serveriui užklausą dėl HTML failo. Puslapis rodomas vartotojui. SPA gauna duomenis, generuoja rodinius ir užpildo dokumento objekto modelį (DOM). Tada SPA yra paruoštas naudojimui. Iš pavadinimo matyti, kad SSG dažniausiai tinka statiniams puslapiams. Jie teikia statinius puslapius su gera ir greita parinktimi. Svetainėse su dinamišku turiniu vartotojams patariama pasirinkti vieną iš kitų dviejų informacijos pateikimo parinkčių.
Vieno puslapio aplikacijų privalumai
Didelės įmonės, tokios kaip „Meta“, „YouTube“ ir „Netflix“, perėjo nuo kelių puslapių programų prie vieno puslapio programų. SPA siūlo sklandesnę vartotojo patirtį, didesnį našumą ir didesnį reagavimą. Žemiau pateikiami vieno puslapio programų naudojimo pranašumai.
- Talpyklos funkcija
Vieno puslapio programa pateikia vieną užklausą serveriui pradinio atsisiuntimo metu ir išsaugo visus gautus duomenis. Vartotojai gali naudoti gautus duomenis dirbdami neprisijungę, jei reikia, todėl vartotojams tai yra patogiau, nes jie sunaudoja mažiau duomenų išteklių. Be to, kai klientas turi blogą interneto ryšį, vietiniai duomenys gali būti sinchronizuojami su serveriu, jei leidžia LAN ryšys.
- Greitai ir reaguoja
Naudojant SPA galima padidinti svetainės greitį, nes atnaujinamas tik prašomas turinys, o ne visas puslapis. SPA įkelia nedidelį JSON failą, o ne naują puslapį. JSON failas užtikrina greitesnį įkėlimo greitį ir efektyvumą. Tai suteikia tiesioginę prieigą prie visų puslapio funkcijų ir funkcijų be jokių vėlavimų. Tai didžiulis pliusas, nes svetainės įkėlimo laikas gali labai paveikti pajamas ir pardavimus.
SPA leidžia sklandžiai pereiti, nes visą informaciją puslapyje pateikiama akimirksniu. Svetainės nereikia atnaujinti, todėl jos procesai yra efektyvesni nei įprastų internetinių programėlių.
Be to, naudojant SPA, išteklius, pvz., HTML, CSS ir scenarijus Java jie bus paimti tik vieną kartą per programos veikimo laiką. Pirmyn ir atgal keičiamasi tik reikalingais duomenimis.
Puslapiai su SPA taip pat leidžia vartotojams greičiau naršyti dėl talpyklos ir mažesnio duomenų kiekio. Pirmyn ir atgal perduodami tik reikalingi duomenys ir atsisiunčiamos tik trūkstamos atnaujinto turinio dalys.
- Derinimas naudojant „Chrome“.
Derinimas aptinka ir pašalina klaidas, klaidas ir žiniatinklio programų saugos spragas, kurios lėtina našumą. Naudojant „Chrome“ kūrėjo įrankius, SPA derinimas yra paprastas. Kūrėjai gali valdyti JS kodo atvaizdavimą iš naršyklės, derinti SPA neperžiūrėdami daugybės kodo eilučių.
SPA yra sukurti naudojant „JavaScript“ sistemas, tokias kaip „AngularJS“ ir „React“ kūrėjų įrankiai, todėl juos lengviau derinti naudojant „Chrome“ naršykles.
Kūrėjų įrankiai leidžia kūrėjams suprasti, kaip naršyklė prašys duomenų iš serverių, saugo juos talpykloje ir kaip rodys puslapio elementus. Be to, šie įrankiai leidžia kūrėjams stebėti ir analizuoti puslapio elementus, tinklo operacijas ir susijusius duomenis.
- Spartus vystymasis
Kūrimo proceso metu SPA priekinė dalis ir galinė dalis gali būti atskirtos, kad lygiagrečiai galėtų dirbti du ar daugiau kūrėjų. Frontend arba backend keitimas neturi įtakos kitam galui, todėl skatinamas greitesnis vystymasis.
Kūrėjai gali pakartotinai naudoti serverio kodą ir atskirti SPA nuo priekinės vartotojo sąsajos. Atsietoji SPA architektūra atskiria priekinius ekranus ir galines paslaugas. Tai leidžia kūrėjams keisti perspektyvas, kurti ir eksperimentuoti nepaveikiant turinio ir nesijaudinant dėl galinių technologijų. Tada klientai gali nuolat naudotis šiomis programomis.
- Patobulinta vartotojo patirtis
Naudodami SPA, vartotojai iškart pasiekia peržiūrėtus puslapius su visu turiniu vienu metu. Tai patogiau, nes vartotojai gali patogiai ir sklandžiai slinkti. Toks jausmas, lyg naudotumėte vietinę darbalaukio ar mobiliąją programą.
SPA suteikia teigiamą UX su aiškia pradžia, viduriu ir pabaiga. Be to, vartotojai gali pasiekti norimą turinį nespustelėdami kelių nuorodų, pavyzdžiui, MPA. Atmetimo rodikliai yra mažesni, kai naudotojai gauna tiesioginę prieigą prie informacijos, kitaip nei naudojant MPA, kai naudotojai nusivilia, nes puslapiai įkeliami daug laiko. Naršymas taip pat greitesnis, nes puslapio elementai naudojami pakartotinai.
- Konvertavimas į IOS ir Android programas
Kūrėjai, norintys pereiti prie „iOS“ ir „Android“ programų, turėtų naudoti SPA, nes juos palyginti lengviau konvertuoti. Jie gali naudoti tą patį kodą norėdami pereiti nuo SPA prie mobiliųjų programų. Kadangi visas kodas pateikiamas vienu atveju, SPA lengva naršyti, todėl jie idealiai tinka mobiliosioms programoms.
- Kelių platformų suderinamumas
Kūrėjai gali naudoti vieną kodo bazę kurdami programas, kurios gali veikti bet kuriame įrenginyje, naršyklėje ir operacinėje sistemoje. Tai pagerina vartotojų patirtį, nes jie gali naudotis SPA bet kur. Tai taip pat leidžia kūrėjams ir „DevOps“ inžinieriams kurti daug funkcijų turinčias programas, įskaitant realiojo laiko analizę, kuriant turinio redagavimo programas.
Minusai
Nepaisant visų vieno puslapio aplikacijų privalumų, naudojant SPA karkasus atsiranda tam tikrų trūkumų. Laimei, vyksta darbas siekiant išspręsti šias problemas su SPA. Žemiau yra keletas minusų;
- Optimizavimas paieškos sistemoms (SEO)
Plačiai manoma, kad vieno puslapio programos nėra tinkamos SEO. Dauguma paieškos sistemų, pvz., Google ar Yahoo, kurį laiką negalėjo tikrinti SPA svetainių pagal Ajax sąveiką su serveriais. Dėl to dauguma šių SPA vietų liko neindeksuotos. Šiuo metu „Google“ robotai buvo mokomi naudoti „JavaScript“, o ne įprastą HTML, indeksuojant SPA svetaines, o tai kenkia reitingams.
Bandymas pritaikyti SEO į jau paruoštą SPA svetainę yra sudėtingas ir brangus. Kūrėjai turi sukurti atskirą svetainę, kurią sukuria paieškos serveris, kuri yra neefektyvi ir apima daug papildomo kodo. Taip pat gali būti naudojami kiti metodai, pvz., funkcijų aptikimas ir išankstinis atvaizdavimas. SPA patalpose vienas URL kiekvienam puslapiui riboja SPA galimybes.
- Naršymas pirmyn ir atgal
Naršyklės išsaugo informaciją, kad tinklalapiai būtų greitai įkeliami. Kai vartotojai paspaudžia mygtuką „Atgal“, dauguma tikisi, kad puslapis bus tokios pat būsenos, kaip ir paskutinį kartą, kai jie jį matė, ir kad perėjimas įvyks greitai. Tradicinė žiniatinklio architektūra tai leidžia naudojant talpykloje esančias svetainės ir susijusių išteklių kopijas. Tačiau naiviai įgyvendinant SPA, mygtuko „Atgal“ paspaudimas turi tokį patį poveikį kaip ir nuorodos spustelėjimas. Sukelia serverio užklausą, padidina delsą ir matomus duomenų pokyčius.
Siekdami patenkinti vartotojų lūkesčius ir teikti greitesnę patirtį, SPA kūrėjai turi imituoti vietinių naršyklių funkcijas naudodami JavaScript.
- Slinkite vietą
Naršyklėse saugoma tokia informacija kaip paskutinė aplankytų puslapių slinkties padėtis. Tačiau vartotojai gali pastebėti, kad naršydami SPA, naudodami naršyklės mygtukus atgal ir pirmyn, slinkties padėtis pasikeitė. Pavyzdžiui, „Facebook“ vartotojai kartais grįžta į paskutines slinkties pozicijas, bet kartais to nedaro. Tai lemia neoptimalią naudotojo patirtį, nes jie turi rankiniu būdu atnaujinti slinkimą atgal į ankstesnę slinkimo padėtį.
Kad išspręstų šią problemą, kūrėjai turi pateikti kodą, kuris išsaugo, nuskaito ir ragina nustatyti teisingą slinkties padėtį, kai vartotojas slenka pirmyn ir atgal.
- Tinklalapio analizė
Pridėję prie puslapio analizės kodą, vartotojai gali stebėti puslapio srautą. Tačiau dėl SPA sunku nustatyti, kurie puslapiai ar turinys yra populiariausias, nes tai tik vienas puslapis. Norėdami stebėti pseudo puslapius, kai jie peržiūrimi, analitikai turite pateikti papildomą kodą.
- Saugos problemos
SPA yra labiau linkę į pavojų kelių svetainių scenarijus. Jie leidžia vartotojams atsisiųsti visą programą ir suteikia jiems daugiau galimybių rasti pažeidžiamumą naudojant atvirkštinę inžineriją. Norėdami išspręsti šią problemą, kūrėjai turi užtikrinti, kad visa kliento logika, susijusi su žiniatinklio programų sauga, pvz., autentifikavimas ir įvesties patvirtinimas, serveryje būtų patikrinta dvigubai. Be to, kūrėjai turi suteikti ribotą vaidmenimis pagrįstą prieigą.
Išvada
Vieno puslapio programos žymi kitą žingsnį plėtojant programų patirtį. Jie yra greitesni, intuityvesni ir gali būti integruoti su pažangiomis funkcijomis, tokiomis kaip tinkinimas. Štai kodėl geriausios įmonės, turinčios daug vienu metu naudojamų vartotojų, pvz., „Gmail“, „Netflix“ ar „Facebook“ naujienų kanalas, remiasi vieno puslapio architektūra. Įdiegę šią technologiją, įmonės gali gauti daugiau naudos iš savo internetinių savybių ir žengti naujus skaitmeninio verslo žingsnius.
Ercole Palmeri
