Aplikacija s jednom stranom (SPA) je web-aplikacija koja se korisniku prikazuje putem jedne HTML stranice kako bi bolje reagirala i bolje replicirala aplikaciju za stolno računalo ili izvornu aplikaciju.
SPA dolazi ponekad defijednostraničko sučelje (SPI).
Aplikacija s jednom stranicom može dohvatiti sav HTML, JavaScript i CSS aplikacije tijekom početnog učitavanja ili može dinamički učitavati resurse za ažuriranje kao odgovor na interakciju korisnika ili druge događaje.
Ostale web aplikacije korisniku predstavljaju početnu stranicu povezanu s dijelovima aplikacije na odvojenim HTML stranicama, što znači da korisnik mora čekati da se nova stranica učita svaki put kada napravi novi zahtjev.
Tehnologije
SPA koriste HTML5 i Ajax (asinkroni JavaScript i XML) kako bi omogućili fluidne i dinamičke odgovore na korisničke zahtjeve, omogućujući ažuriranje sadržaja odmah kada korisnik poduzme radnju. Nakon što se stranica učita, interakcija s poslužiteljem odvija se putem Ajax poziva, a podaci se vraćaju, otkriveni u JSON (JavaScript Object Notation) formatu, kako bi se stranica osvježila bez potrebe za ponovnim učitavanjem.
SPA u detalje
Aplikacije s jednom stranicom poznate su po svojoj sposobnosti redizajniranja bilo kojeg dijela korisničkog sučelja bez potrebe za obilaskom poslužitelja za dohvaćanje HTML-a. To se postiže odvajanjem podataka od prezentacije podataka sa slojem modela koji upravlja podacima i slojem pogleda koji čita iz modela.
Dobar kôd proizlazi iz višestrukog rješavanja istog problema ili njegovog refaktoriranja. Obično se ovaj proces razvija u ponavljajućim obrascima, s jednim mehanizmom koji dosljedno radi istu stvar.
Da biste napisali kod koji se može održavati, morate pisati kod na jednostavan način. Ovo je stalna borba, zapravo je lako dodati složenost (ulazi/ovisnosti) pisanjem koda za rješavanje problema; i lako je riješiti problem na način koji ne smanjuje složenost.
Prostori imena su primjer za to.
Usporedba aplikacija za jednu stranicu (SPA) i aplikacija za više stranica (MPA).
Aplikacije s više stranica (MPA) sadrže više stranica sa statičnim podacima i poveznicama na druga mjesta. HTML i CSS su glavne tehnologije koje se koriste za razvoj MPA web stranica. Mogu koristiti JavaScript za smanjenje opterećenja i povećanje brzine. Organizacije koje nude širok raspon usluga, poput internetskih trgovina, trebale bi razmotriti korištenje MPA jer olakšava povezivanje s različitim korisničkim bazama podataka.
Jednostrane aplikacije razlikuju se od višestranih na sljedeće načine:
- Razvojni proces: Prilikom izrade MPA-ova nije vam potrebno poznavanje JavaScripta, za razliku od SPA-ova. Međutim, spajanje prednjih i stražnjih dijelova u MPA-ima znači da je za te lokacije potrebno relativno dulje vrijeme izgradnje od SPA-ova.
- brzina: MPA-ovi rade relativno sporije, zahtijevajući da se svaka nova stranica učita ispočetka. Međutim, SPA-ovi se učitavaju puno brže nakon početnog preuzimanja jer spremaju podatke za kasniju upotrebu.
- optimizacija pretraživača: Tražilice mogu lako indeksirati web stranice s MPA. MPA-ovi imaju više stranica koje indeksiraju tražilice kako bi generirale bolji SEO rang. Sadržaj svake stranice također je statičan, što ga čini pristupačnijim. Nasuprot tome, SPA imaju stranicu s jednim jedinstvenim URL-om (Uniform Resource Locator). Oni također koriste JavaScript, koji većina tražilica ne indeksira ispravno. To čini rangiranje SEO-a za SPA-ove izazovnijim.
- sigurnosti: U MPA morate osigurati svaku mrežnu stranicu pojedinačno. Međutim, SPA su skloniji hakerskim napadima. Ali s pravim pristupom, razvojni timovi mogu poboljšati sigurnost aplikacije.
Kako sve više tvrtki migrira na korištenje SPA-ova, alati za indeksiranje i tražilice će se razvijati kako bi ih bolje indeksirali. S obzirom na njegovu brzinu, samo je pitanje kada će SPA postati glavna opcija za razvoj web aplikacija. Tada će prednosti MPA u odnosu na SPA početi nestajati.
Kada koristiti jednostrane aplikacije?
Postoji pet scenarija u kojima su takve aplikacije najrelevantnije:
- Korisnici koji žele razviti web stranicu s dinamičkom platformom i manjim količinama podataka mogu koristiti SPA.
- Korisnici koji planiraju izraditi mobilnu aplikaciju za svoje web mjesto također mogu razmisliti o korištenju SPA. Oni mogu koristiti backend API (Application Programming Interface) za web mjesto i mobilnu aplikaciju.
- SPA arhitektura prikladna je za izgradnju društvenih mreža poput Facebooka, SaaS platformi i zatvorenih zajednica jer zahtijevaju manje SEO-a.
- Korisnici koji svojim potrošačima žele ponuditi besprijekornu interakciju također bi trebali koristiti SPA. Potrošači također mogu pristupiti ažuriranjima uživo za podatke i grafikone za strujanje uživo.
- Korisnici koji žele pružiti dosljedno, izvorno i dinamično korisničko iskustvo na svim uređajima, operativnim sustavima i preglednicima.
Dobar tim trebao bi imati proračun, alate i vrijeme za izradu visokokvalitetne jednostrane aplikacije. To će osigurati pouzdan i učinkovit SPA koji ne doživljava zastoje povezane s prometom.
Arhitektura aplikacije na jednoj stranici
Aplikacije za jednu stranicu komuniciraju s posjetiteljima učitavanjem i radom na trenutnoj stranici, eliminirajući potrebu za učitavanjem više web stranica s poslužitelja.
Web stranice sa SPA sastoje se od jedne URL veze. Sadržaj se preuzima, a specifične komponente korisničkog sučelja (UI) se ažuriraju kada se klikne. Korisničko iskustvo je poboljšano jer korisnik može komunicirati s trenutnom stranicom dok se novi sadržaj dohvaća s poslužitelja. Kada dođe do osvježavanja, dijelovi trenutne stranice ažuriraju se novim sadržajem.
Početni zahtjev klijenta u SPA-u učitava aplikaciju i sva njena relevantna sredstva, kao što su HTML, CSS i JavaScript. Datoteka početnog učitavanja može biti značajna za složene aplikacije i rezultirati sporijim vremenom učitavanja. Sučelje za programiranje aplikacija (API) dohvaća nove podatke dok se korisnik kreće kroz SPA. poslužitelj odgovara samo podacima u JSON (JavaScript Object Notation) formatu. Po primitku ovih podataka preglednik osvježava prikaz aplikacije koju korisnik vidi bez ponovnog učitavanja stranice.
Arhitektura aplikacije s jednom stranom uključuje tehnologije prikazivanja na strani poslužitelja i na strani klijenta. Stranica se prikazuje i predstavlja korisniku putem prikazivanja na strani klijenta (CSR), prikazivanja na strani poslužitelja (SSR) ili generatora statičkih stranica (SSG).
- Prikaz na strani klijenta (CSR)
S prikazom na strani klijenta, preglednik šalje zahtjev poslužitelju za HTML datoteku i prima osnovnu HTML datoteku s priloženim skriptama i stilovima. Tijekom izvršavanja JavaScripta korisnik vidi praznu stranicu ili sliku učitavača. SPA dohvaća podatke, proizvodi vizualizacije i gura podatke u Document Object Model (DOM). SPA se zatim priprema za korištenje. CSR je često najduža od tri alternative i povremeno može opteretiti preglednik zbog velike upotrebe resursa uređaja prilikom gledanja sadržaja. Osim toga, CSR je izvrsna alternativa za web stranice s velikim prometom jer potrošačima predstavlja informacije bez pretjerane komunikacije s poslužiteljem, što rezultira bržim korisničkim iskustvom.
- Renderiranje na strani poslužitelja (SSR)
Tijekom iscrtavanja na strani poslužitelja, preglednici traže HTML datoteku od poslužitelja, koji dohvaća tražene podatke, renderira SPA i stvara HTML datoteku za aplikaciju u pokretu. Dostupni materijal se tada prezentira korisniku. SPA arhitektura je potrebna za prilaganje događaja, izradu virtualnog DOM-a i izvođenje daljnjih operacija. SPA se zatim priprema za korištenje. SSR čini program brzim jer kombinira brzinu SPA-a i ne opterećuje korisnički preglednik.
- Generator statičkih stranica (SSG)
Unutar alata za izgradnju statičkih stranica, preglednici odmah postavljaju zahtjev poslužitelju za HTML datoteku. Stranica se prikazuje korisniku. SPA dohvaća podatke, generira poglede i popunjava objektni model dokumenta (DOM). Tada je SPA spreman za korištenje. Sudeći po nazivu, SSG-ovi su uglavnom prikladni za statične stranice. Oni pružaju statične stranice s dobrom i brzom opcijom. Za web stranice s dinamičkim sadržajem korisnicima se savjetuje da odaberu jednu od druge dvije opcije prikaza informacija.
Prednosti jednostranih aplikacija
Velike tvrtke poput Mete, YouTubea i Netflixa prešle su s aplikacija s više stranica na aplikacije s jednom stranicom. SPA-ovi nude glatkije korisničko iskustvo, veću izvedbu i brzinu odziva. Ispod su prednosti korištenja jednostranih aplikacija.
- Značajka predmemoriranja
Aplikacija s jednom stranom šalje jedan zahtjev poslužitelju prilikom početnog preuzimanja i sprema sve podatke koje primi. Potrošači mogu koristiti primljene podatke za izvanmrežni rad ako je potrebno, što ga čini praktičnijim za korisnike jer im omogućuje potrošnju manje podatkovnih resursa. Također, kada klijent ima lošu internetsku vezu, lokalni podaci mogu se sinkronizirati s poslužiteljem ako LAN veza to dopušta.
- Brz i responzivan
Korištenje SPA-a može poboljšati brzinu web stranice jer osvježava samo traženi sadržaj umjesto osvježavanja cijele stranice. SPA učitavaju manju JSON datoteku umjesto nove stranice. JSON datoteka osigurava veću brzinu i učinkovitost učitavanja. To rezultira trenutnim pristupom svim značajkama i funkcijama stranice bez ikakvih odgoda. To je veliki plus jer vrijeme učitavanja web stranice može značajno utjecati na prihode i prodaju.
SPA-ovi omogućuju glatke prijelaze pružajući sve informacije na stranici trenutno. Web mjesto ne treba ažurirati, tako da su njegovi procesi učinkovitiji od tipičnih mrežnih aplikacija.
Također, uz SPA, sredstva kao što su HTML, CSS i skripte Java bit će dohvaćeni samo jednom u životnom vijeku aplikacije. Razmjenjuju se samo potrebni podaci.
Stranice sa SPA također omogućuju korisnicima bržu navigaciju zahvaljujući predmemoriranju i smanjenoj količini podataka. Samo se potrebni podaci prenose naprijed i natrag i preuzimaju se samo dijelovi ažuriranog sadržaja koji nedostaju.
- Otklanjanje pogrešaka s Chromeom
Debugging otkriva i uklanja bugove, pogreške i sigurnosne ranjivosti web aplikacija koje usporavaju rad. Otklanjanje pogrešaka SPA-ova je jednostavno uz alate za razvojne programere Chromea. Razvojni programeri mogu kontrolirati prikazivanje JS koda iz preglednika, otklanjati pogreške SPA-ova bez pretraživanja mnogih linija koda.
SPA-ovi su izgrađeni na temelju JavaScript okvira kao što su AngularJS i alati za razvojne programere React, što ih čini lakšim za otklanjanje pogrešaka pomoću preglednika Chrome.
Alati za razvojne programere omogućuju programerima da razumiju kako će preglednik tražiti podatke od poslužitelja, pohraniti ih u predmemoriju i kako će prikazati elemente stranice. Osim toga, ovi alati omogućuju razvojnim programerima praćenje i analizu elemenata stranice, mrežnih operacija i povezanih podataka.
- Brz razvoj
Tijekom procesa razvoja, front-end i back-end SPA-a mogu se odvojiti, omogućujući da dva ili više programera rade paralelno. Promjena sučelja ili pozadine ne utječe na drugi kraj, čime se potiče brži razvoj.
Programeri mogu ponovno upotrijebiti kod na strani poslužitelja i odvojiti SPA-ove od sučelja prednjeg kraja. Razdvojena arhitektura u SPA-ovima odvaja prednje zaslone i pozadinske usluge. To programerima omogućuje promjenu perspektiva, izgradnju i eksperimentiranje bez utjecaja na sadržaj ili brige o pozadinskoj tehnologiji. Kupci tada mogu imati dosljedno iskustvo korištenja ovih aplikacija.
- Poboljšano korisničko iskustvo
S SPA-ovima korisnici dobivaju trenutačni pristup pregledanim stranicama sa svim sadržajima odjednom. Ovo je praktičnije jer se korisnici mogu udobno i neprimjetno pomicati. Osjećaj je kao da koristite nativnu desktop ili mobilnu aplikaciju.
SPA-ovi pružaju pozitivan korisnički doživljaj s jasnim početkom, sredinom i završetkom. Također, korisnici mogu doći do željenog sadržaja bez klikanja na više poveznica, kao u MPA-ovima. Doživljavate niže stope napuštanja početne stranice kada korisnici dobiju trenutni pristup informacijama, za razliku od MPA-ova gdje su korisnici frustrirani jer stranicama treba dosta vremena da se učitaju. Navigacija je također brža jer se elementi stranice ponovno koriste.
- Konverzija u IOS i Android aplikacije
Programeri koji žele prijeći na iOS i Android aplikacije trebali bi koristiti SPA jer ih je relativno lakše pretvoriti. Oni mogu koristiti isti kod za prebacivanje sa SPA na mobilne aplikacije. Budući da se cijeli kod pruža u jednoj instanci, SPA-ovima je lako upravljati, što ih čini idealnim za mobilne aplikacije.
- Kompatibilnost s više platformi
Programeri mogu koristiti jednu bazu koda za izradu aplikacija koje se mogu izvoditi na bilo kojem uređaju, pregledniku i operativnom sustavu. Ovo poboljšava iskustvo potrošača jer mogu koristiti SPA bilo gdje. Također omogućuje programerima i DevOps inženjerima da izgrade aplikacije bogate značajkama, uključujući analitiku u stvarnom vremenu, dok razvijaju aplikacije za uređivanje sadržaja.
Loše strane
Unatoč svim prednostima jednostraničkih aplikacija, kod korištenja SPA okvira pojavljuju se neki nedostaci. Srećom, u tijeku je rad na prevladavanju ovih problema s SPA-ovima. Ispod su neke mane;
- Optimizacija za tražilice (SEO)
Uvriježeno je mišljenje da jednostrane aplikacije nisu dobre za SEO. Većina tražilica, poput Googlea ili Yahooa, neko vrijeme nije mogla indeksirati SPA web stranice na temelju Ajax interakcija s poslužiteljima. Kao rezultat toga, većina tih SPA stranica ostala je neindeksirana. Trenutačno su Google botovi naučeni kako koristiti JavaScript umjesto uobičajenog HTML-a za indeksiranje SPA web stranica, što šteti rangiranju.
Pokušaj uklopiti SEO u gotovu SPA stranicu je izazovan i skup. Programeri moraju izgraditi zasebnu web stranicu koju prikazuje poslužitelj tražilice, što je neučinkovito i uključuje puno dodatnog koda. Također se mogu koristiti i druge tehnike kao što su otkrivanje značajki i predrenderiranje. U SPA objektima, jedan URL za svaku stranicu ograničava SEO mogućnosti za SPA.
- Navigacija gumbima za naprijed i natrag
Preglednici spremaju informacije kako bi se web stranice brže učitavale. Kada potrošači stisnu gumb za povratak, većina očekuje da će stranica biti u stanju sličnom onom kad su je posljednji put pogledali i da će se prijelaz dogoditi brzo. Tradicionalne web arhitekture to dopuštaju korištenjem predmemoriranih kopija web mjesta i povezanih resursa. Međutim, u naivnoj implementaciji SPA-a, pritisak na gumb za povratak ima isti učinak kao klik na vezu. Uzrokuje zahtjev poslužitelja, povećano kašnjenje i vidljive promjene podataka.
Kako bi ispunili očekivanja korisnika i pružili brže iskustvo, SPA programeri moraju oponašati funkcionalnost izvornih preglednika koristeći JavaScript.
- Mjesto pomicanja
Preglednici pohranjuju informacije kao što je zadnja pozicija pomicanja posjećenih stranica. Međutim, korisnici mogu otkriti da su se položaji pomicanja promijenili prilikom navigacije SPA-ovima pomoću gumba za povratak i naprijed u pregledniku. Na primjer, na Facebooku se ponekad korisnici skrolaju na svoje zadnje pozicije skrolanja, ali ponekad ne. To rezultira neoptimalnim korisničkim iskustvom jer moraju ručno nastaviti s pomicanjem natrag na prethodni položaj pomicanja.
Kako bi riješili ovaj problem, programeri moraju osigurati kod koji sprema, dohvaća i traži ispravan položaj pomicanja dok se korisnik pomiče naprijed-natrag.
- Analiza web stranice
Dodavanjem analitičkog koda na stranicu korisnici mogu pratiti promet stranice. Međutim, SPA-ovi otežavaju određivanje stranica ili sadržaja koji su najpopularniji jer se radi o samo jednoj stranici. Morate osigurati dodatni kod za analitiku za praćenje pseudo stranica dok se gledaju.
- Sigurnosni problemi
SPA-ovi su skloniji biti ugroženi putem cross site skriptiranje. Korisnicima omogućuju preuzimanje cijele aplikacije, izlažući ih više prilika za pronalaženje ranjivosti obrnutim inženjeringom. Kako bi riješili ovaj problem, programeri moraju osigurati da se sva logika na strani klijenta povezana sa sigurnošću web aplikacije, kao što je autentifikacija i provjera valjanosti unosa, udvostruči na poslužitelju radi provjere. Također, programeri moraju osigurati ograničeni pristup temeljen na ulogama.
završni
Aplikacije na jednoj stranici označavaju sljedeći korak u evoluciji doživljaja aplikacija. Oni su brži, intuitivniji i mogu se integrirati s naprednim značajkama kao što je prilagodba. Zato se najbolje tvrtke s mnogo istodobnih korisnika, kao što su Gmail, Netflix ili Facebookov feed vijesti, oslanjaju na arhitekturu jedne stranice. Implementacijom ove tehnologije, tvrtke mogu izvući veću vrijednost iz svojih online svojstava i napraviti nove prodore kao digitalno poslovanje.
Ercole Palmeri
