Википедија

Jednostranična aplikacija

Jednostranična aplikacija (engl. Single-page application (SPA)), takođe poznata kao jednostranični interfejs (engl. Single-page interface (SPI)), je veb-aplikacija ili veb-sajt smešten u okviru jedne veb-stranice sa ciljem pružanja lakše interakcije, slične onoj na računarima bez internet konekcije.

U jednostraničnim aplikacijama sav potreban kôd - HTML, JavaScript i CSS - se preuzima u okviru učitavanja jedne stranice[1], ili se odgovarajući resursi učitavaju dinamički i po potrebi dodaju stranici, obično kao posledica neke akcije od strane korisnika. Stranica se ne učitava ponovno ni u jednoj tački procesa, niti se prebacuje na neku drugu stranicu. Međutim, novije veb-tehnologije (koje su uključene u HTML5) pružaju mogućnost percepcije i navigacije kroz više logičkih stranica u okviru iste aplikacije. Interakcija sa jednostranom aplikacijom često uključuje dinamičku komunikaciju sa veb-serverom u pozadini.

Termin jednostranična aplikacija skovao je Stiv Jen (engl. Steve Yen) 2005. godine, iako je o samom konceptu diskutovano još 2003.[2]

Tehnički pristup uredi

Postoje različite tehnike (metodi) koje omogućavaju veb-pregledačima da preuzmu i zadrže stranicu, čak i onda kada aplikacija zahteva komunikaciju sa serverom.

AJAX uredi

Trebutno najkorišćenija tehnika je AJAX.[1] Pretežno se koristi XMLHttpRequest objekat JavaScript jezika. Drugi AJAX pristupi uključuju korišćenje IFRAME ili script elemente HTML jezika. AJAX metod popularizovale su biblioteke kao što je jQuery, koje normalizuju ponašanje AJAX-a na veb-pregledačima različitih proizvođača.

Node.js/SignalR uredi

Asinhroni pozivi serveru mogu se ostvariti korišćenjem Node.js ili SignalR zajedno sa Socket.IO.

Priključci pregledača uredi

Asinhroni pozivi serveru takođe mogu biti ostvareni korišćenjem priključaka (engl. plug-in) kao što su Silverlight, Flash ili Java apleta.

Transport podataka (XML, JSON i AJAX) uredi

Zahtevi serveru obično rezultuju vraćanjem ili sirovih podataka (na primer XML ili JSON) ili novog HTML dokumenta. U slučaju kada server vraća HTML dokument, JavaScript sa klijentske strane ažurira deo DOM-a (Objektni model dokumenta - Document Object Model). Kada server vrati sirove podatke, često se na klijentskoj strani koristi JavaScript XML/(XSL) proces (i šablon (engl. template) u slučaju JSON-a) da prevede sirove podatke u HTML, koji se dalje koristi za ažuriranje DOM-a.

Arhitektura lakih servera uredi

Jednostranična aplikacija prebacuje logiku sa servera na klijenta. Rezultat ovoga je da uloga veb-servera prerasta u čist API podataka ili veb-servis. Ovakva promena arhitekture se, u nekim krugovima, naziva „Tanka arhitektura servera“ (engl. „Thin server architecture“).[3]

Arhitekrura teških servera uredi

Server čuva neophodno stanje u memoriji stanja klijentske stranice. Na taj način, kada se bilo koji zahtev šalje serveru (obično neka akcija korisnika, na primer klik mišem itd.), server šalje nazad odgovarajući HTML i/ili JavaScript sa konkretnim promenama koje dovode klijenta do novog željenog stanja (obično dodavanje/brisanje/ažuriranje klijentskog DOM-a). U isto vreme se ažurira stanje na serveru. Veći deo logike se izvršava na serveru, pa se obično i HTML formira u serveru. Na neki način servfer simulira veb-pregledač, prihvata događaje (na primer klik mišem) i izvršava promene u stanju servera koje automatski propagira klijentu. Ovakav pristup zahteva više memorije i obrade na serveru, ali prednost je pojednostavljeni model razvoja jer:

  • Aplikacija je obično u potpunosti kodirana na serverskoj strani.
  • Podaci i U/I stanje na serveru dele isti memorijski prostor, pa nema potrebe za posebnim klijent/server komunikacionim mostovima.

Lokalno izvršavanje uredi

Neke jednostranične aplikacije se mogu izvršiti iz lokalne datoteke koristeći URI sheme datoteke (engl. file URI scheme). Ovo pruža korisniku mogućnost da preuzme aplikaciju sa servera i da je pokrene na lokalnoj mašini bez dalje komunikacije sa serverom. Ukoliko takva aplikacija želi da smesti ili ažurira neke podatke, mora imati mogućnost da promeni samu sebe, tj. aplikacija mora biti sposobna da sama sebe upiše na disk, uključujući i reprezentaciju stanja koje će se promeniti. Ovakve aplikacije koriste prednosti koje donosi HTML5, posebno veb skladištenje podataka (engl. Web storage)

Izazovi SPA modela uredi

Jednostranične aplikacije evolucijski naprednije od aplikacija koje ne čuvaju stanje već svaki put ponovo učitavaju stranicu. Veb-pregledači su u početku pravljeni za drugu vrstu prethodno navedenih modela aplikacija, pa pa su se pojavili neki novi izazovi. Svaki od ovih problema ima efektivno rešenje[4]:

  • JavaScript biblioteke na klijentskoj strani za različite vrste problema.
  • Veb-okviri (engl. web frameworks) na serverskoj strani specijalizovani za SPA model.[5][6][7][8]
  • Evolucija pregledača i HTML5.

Optimizacija pretraživačkih mašina uredi

Zbog nedostatka JavaScript izvršavanja na popisivačima (engl. web crawler) kod većine pretraživačkih mašina (engl. web web search engines), optimizacija pretraživačkih mašina je uvek predstavljala problem za javne veb-sajtove koji su želeli da primene SPA model.

Gugl trenutno popisuje URL-ove koji sadrže heš-fragmente koji počinju sa #!,.[9] Ovo dopušta korišćenje heš-fragmenata unutar pojedinačnog URL-a neke jednostranične aplikacije. Posebno ponašanje mora se implementirati od stane SPA veb-sajta da bi se dopustilo izvlačenje bitnih meta-podataka od strane popisivača pretraživačke mašine. Za pretraživačke mašine koje ne podržavaju ovu URL heš-shemu, heširani URL jednostranične aplikacije ostaje nevidljiv.

Alternativno, aplikacije mogu izvršiti učitavanje prve stranice na serveru, a ažuriranje sledeće stranice na klijentskoj strani. Ovakav pristup je dosta težak, jer postoji mogućnost da kôd prevođenja mora biti pisan na različitom jeziku i okviru na klijentskoj i serverskoj strani. Među-kompajliranje iz jednog jezika u drugi i korišćenje istog jezika na serverskoj i klijentskoj strani može povećati količinu koda koji može se deli.

Jedan od načina da se poveća količina koda koji može da se deli između servera i klijenata je korišćenje šablonskih jezika kao što su Mustache i Handlebars. Takvi šabloni se mogu izvući iz različitih host-jezika, kao što su Ruby za servere i JavaScript za klijente. Međutim, samo deljenje šablona obično zahteva dupliranje biznis-logike (algoritmi koji vrše razmenu podataka između baze podataka i korisničkog interfejsa) koja određuje odgovarajuće šablone i popunjava ih podacima. Obrada šablona može imati negativne efekte na performanse kada se ažurira samo mali deo šablona - recimo vrednost tekstualnog ulaza u okviru velikog šablona. Zamena celog šablona takođe može poremetiti položaj kursora ili neki izbor korisnika, dok samo ažuriranje promenjene vrednosti ne mora imati takve posledice. Da bi se izbegli ovakvi problemi, aplikacije mogu manipulisati DOM-stablom tako da se ažuriraju određeni delovi stranice umesto ponovnog formiranja celih šablona.

Drugi pristup korišćen od strane serverski orijentisanih okvira (engl. web frameworks), kao što je ItsNat baziran na Javi, je da se obradi svaki hiper-tekst na serveru korišćenjem istog jezika i tehnike formiranja šablona. Po ovom pristupu server zna tačno stanje klijentovog DOM-a. Svaka tražena promena stranice, velika ili mala, se generiše na serveru i preko AJAX-a se prenosi tačan JavaScript kôd koji menja klijentsku stranicu u novo stanje izvršavajući DOM metode. Programeri mogu da odluče koje stanje stranice je vidnjivo za popisivače pretraživačkih mašina. Aplikacija mora biti sposobna da generiše takvo stanje za vreme koje je potrebno za učitavanje stranice, i to čist HTML umesto JavaScript-a. U slučaju ItsNat okvira ovo se vrši automatski, jer ItsNat čuva klijentovo DOM-stablo na serveru kao Java W3C DOM-stablo. Obrada ovog DOM-stabla na serveru generiše čist HTML za vreme učitavanja stranice, a Java W3C DOM određuje akcije za AJAX zahteve. Ovaj dualitet je veoma bitan za optimizaciju pretraživačkih mašina, jer programeri mogu da koriste Java kôd i šablone bazirane na čistom HTML-u za konstruisanje željenog stanja DOM-stabla na serveru, a za vreme učitavanja stranice ItsNat generiše konvencionalni HTML i tako čini ovaj DOM kompatibilnim za optimizaciju pretraživačkih mašina (engl. Search engine optimization (SEO)).

Pošto SEO-kompitabilnost nije trivijalna stvar kod jednostraničnih aplikacija, one se često koriste kada indeksiranje pretraživačkih mašina nije neophodno ili poželjno.

Istorija pregledača uredi

Pošto su jednostranične aplikacije po definiciji sadržane u jednoj stranici, njihov model se kosi sa dizajnom istorije pregledača (engl. Browser history) koji koriste dugmad tipa Prethodna/Sledeća stranica za navigaciju kroz istoriju surfovanja. Ovo predstavlja smetnju kada korisnik pritisne dugme „Prethodna stranica“, očekujući da se na ekranu prikaže prethodno stanje u okviru aplikacije, a umesto toga pregledač učitava prethodno posećenu stranicu iz istorije pregledača.

Tradicionalno rešenje za jednostranične aplikacije je da se menja heš-fragment identifikator URL-a u skladu sa trenutnim stanjem ekrana. Ovo se postiže korišćenjem JavaScript-a, tako što se gradi istorija URL događaja unutar pregledača. Zadržava se očekivano ponašanje dugmeta „Prethodna stranica“, dok god je aplikacija sposobna da proizvede isto stanje na ekranu po informacijama sadržanim unutar URL heš-a.

Za dalje informacije o ovoj temi, čitaoci se upućuju na HTML5 specifikaciju ovde i ovde gde mogu da se informišu o pristupu sadržaju URL-a i istoriji pregledača.

Životni ciklus stranice uredi

Jednostranična aplikacija se u potpunosti učitava u inicijalnom učitavanju stranice, a onda se delovi stranice po zahtevu menjaju i ažuriraju novim fragmentima učitanim sa servera. Da bi se izbeglo prekomerno preuzimanje neiskorišćenih funkcija, aplikacija će često postepeno preuzimati nove funkcije kada one budu potrebne.

Na ovaj način postoji analogija između „stanja“ kod jednostraničnih aplikacija i „stranica“ kod klasičnih veb-sajtova, jer navigacija kroz stanja na nekim stranicama odgovara navigaciji kroz stranice na nekom sajtu. U teoriji, bilo koji veb-sajt baziran na stranicama može se konvertovati u jednostraničnu aplikaciju, tako što će se na jednoj stranici, pri „prelasku“ na drugu menjati samo oni delovi koji se razlikuju.

Reference uredi

  1. ^ a b Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006. str. 497.
  2. ^ „Inner-Browsing: Extending Web Browsing the Navigation Paradigm”. Arhivirano iz originala 27. 03. 2014. g. Pristupljeno 3. 2. 2011. 
  3. ^ „Thin Server Architecture Working Group”. Pristupljeno 11. 12. 2011. 
  4. ^ „The Single Page Interface Manifesto”. Pristupljeno 12. 11. 2010. 
  5. ^ „Derby”. Pristupljeno 11. 12. 2011. 
  6. ^ „Sails.js”. Pristupljeno 20. 2. 2013. 
  7. ^ „nCombo”. Arhivirano iz originala 10. 02. 2013. g. Pristupljeno 31. 1. 2013. 
  8. ^ „Tutorial: Single Page Interface Web Site With ItsNat”. Pristupljeno 13. 1. 2011. 
  9. ^ „Making AJAX Applications Crawlable”. Pristupljeno 13. 1. 2011. 

Spoljašnje veze uredi

Preuzeto iz „https://sr.wikipedia.org/w/index.php?title=Једностранична_апликација&oldid=27502592”