Sebastijan Štefanič
PRISTOP SPA ZA IZGRADNJO SPLETNIH
STRANI
Diplomsko delo
Maribor, avgust 2014
PRISTOP SPA ZA IZGRADNJO SPLETNIH
STRANI
Diplomsko delo
Študent: Sebastijan Štefanič
Študijski program: Visokoškolski strokovni študijski program prve
stopnje Informatika in tehnologije komuniciranja
Smer: Razvoj informacijskih sistemov
Mentor: Viš. pred. mag. Boštjan Kežmah
Somentor: Asist. Mitja Krajnc
Lektorica: mag. Nataša Koražija
Pristop SPA za izgradnjo spletnih strani
i
Pristop SPA za izgradnjo spletnih strani
ii
ZAHVALA
Zahvaljujem se mentorju in somentorju
za pomoč in vodenje pri pisanju
diplomskega dela ter za njihovo
strokovno svetovanje.
Posebna zahvala velja staršem, ki so mi
omogočili študij.
Pristop SPA za izgradnjo spletnih strani
iii
Pristop SPA za izgradnjo spletnih strani
Ključne besede: SPA, Microsoft, JavaScript, AngularJS, Backbone.js, Ember.js, MVC,
MVVM
UDK: 004.774.6(043.2)
Povzetek
V diplomskem delu je raziskan postopek razvoja SPA aplikacij (enostranskih spletnih
aplikacij). Razloženi so koncepti, ki jih je treba razumeti, ter ozadje in osnovni pojmi
razvoja spletnih strani. Na začetku se osredotočamo na sam pomen besede »SPA« ter na
arhitekturo SPA aplikacij. Raziskane so ene od najbolj aktualnih ogrodjih in knjižnic, ki se
uporabljajo za razvoj SPA aplikacij, na koncu pa se nahaja še kratek primer, pri katerem
se je uporabila AngularJS knjižnica.
Pristop SPA za izgradnjo spletnih strani
iv
SPA approach to building web sites
Key Words: SPA, Microsoft, JavaScript, AngularJS, Backbone.js, Ember.js, MVC,
MVVM
UDK: 004.774.6(043.2)
Abstract
The thesis studied the process of developing SPA (Single Page Application) applications.
The concepts that need to be understood, background and basic concepts of web are
explained. At the beginning, we focus on the actual meaning of the word »SPA«, as well as
the architecture of SPA applications. One of the most current frameworks and libraries
that are used fort he development of SPA applications are researched and at the end of the
thesis is a brief example in which we use AngularJS library to create small SPA
application.
Pristop SPA za izgradnjo spletnih strani
v
KAZALO VSEBINE
1. UVOD ................................................................................................................................. 1
1.1. Opredelitev problema .................................................................................................. 1
1.2. Predpostavke in omejitve ............................................................................................. 1
1.3. Kompozicija dela ......................................................................................................... 1
2. OZADJE IN OSNOVNI POJMI ......................................................................................... 3
2.1. Kaj je spletna stran? ..................................................................................................... 3
2.2. Kaj je spletno mesto? ................................................................................................... 3
2.3. Označevalni jezik HTML5 .......................................................................................... 4
2.4. Stilske predloge CSS ................................................................................................... 4
2.5. Skriptni jezik JavaScript .............................................................................................. 5
2.6. Format za izmenjavo podatkov JSON ......................................................................... 6
2.7. Arhitektura REST ........................................................................................................ 7
2.8. Knjižnica jQuery .......................................................................................................... 7
2.9. Vzorec MVC ................................................................................................................ 7
2.10. Microsoftove tehnologije za izgradnjo spletnih strani ............................................. 9
3. Enostranske spletne aplikacije .......................................................................................... 14
3.1. Kaj je SPA? ................................................................................................................ 14
3.2. Arhitektura SPA ......................................................................................................... 15
3.3. Podatkovna raven SPA aplikacije .............................................................................. 17
3.4. Logična raven SPA aplikacije .................................................................................... 17
3.5. Predstavitvena raven SPA aplikacije ......................................................................... 17
4. AKTUALNE KNJIŽNICE IN OGRODJA ....................................................................... 18
4.1. Knjižnica Backbone.js ............................................................................................... 18
4.2. Knjižnica Ember.js ..................................................................................................... 20
4.3. Knjižnica AngularJS .................................................................................................. 23
4.4. Ostale knjižnice in ogrodja ........................................................................................ 27
5. KONKRETNI PRIMER .................................................................................................... 29
5.1. Opis aplikacije ........................................................................................................... 29
5.2. Struktura projekta ...................................................................................................... 29
5.3. Podatkovna in logična raven aplikacij ....................................................................... 32
5.4. Predstavitvena raven aplikacije (SPA) ...................................................................... 33
6. ZAKLJUČEK .................................................................................................................... 47
Pristop SPA za izgradnjo spletnih strani
vi
7. VIRI, LITERATURA ....................................................................................................... 48
KAZALO SLIK
Slika 1: Več spletnih strani tvori spletno mesto ......................................................................... 4
Slika 2: Gradniki MVC vzorca in komunikacija med njimi ...................................................... 8
Slika 3: MVVM vzorec .............................................................................................................. 9
Slika 4: .NET ogrodje ............................................................................................................... 10
Slika 5: Kategorizacija ASP.NET ogrodja ............................................................................... 11
Slika 6: Primer vnosa C# kode neposredno v datoteko s HTML kodo .................................... 11
Slika 7: Primer Razor sintakse ................................................................................................. 12
Slika 8: Arhitektura SPA aplikacije ......................................................................................... 16
Slika 9: Primer Backbone.js modela ........................................................................................ 18
Slika 10: Primer uporabe Backbone.View modula .................................................................. 19
Slika 11: Primer dogodka in njegovega proženja ..................................................................... 20
Slika 12: Interakcija med Ember.js koncepti ........................................................................... 21
Slika 13: Primer Ember.js predloge ......................................................................................... 21
Slika 14: Primer preprostega Ember.js usmerjevalnika ........................................................... 22
Slika 15: Primer Ember.js modela ............................................................................................ 22
Slika 16: Primer preprostega AngularJS modula ..................................................................... 24
Slika 17: Primer preproste AngularJS direktive ....................................................................... 25
Slika 18: Primer uporabe AngularJS direktive ......................................................................... 25
Slika 19: Primer AngularJS krmilnika ..................................................................................... 26
Slika 20: Primer uporabe AngularJS krmilnika in lastnosti »$scope« objekta v HTML kodi. 26
Slika 21: Primer AngularJS storitve, tovarne in ponudnika ..................................................... 27
Slika 22: Struktura projekta ...................................................................................................... 30
Slika 23: Aplikacijske nastavitve v »Web.config« datoteki. »webpages:Enabled«
spremenjeno iz »false« na »true«. ............................................................................................ 31
Slika 24: Metoda za tako imenovano »Zvijanje« JavaScript datotek. ..................................... 31
Slika 25: Model opravila .......................................................................................................... 32
Slika 26: Pogovorno okno za izdelavo Web API krmilnika .................................................... 33
Slika 27: »Index.cshtml« datoteka ........................................................................................... 34
Slika 28: »app« modul- Prvi del ............................................................................................... 35
Pristop SPA za izgradnjo spletnih strani
vii
Slika 29: »app« modul- Drugi del ............................................................................................ 35
Slika 30: Definicija modula »services« in storitve »TodosService« ........................................ 37
Slika 31: »AuthService« storitev .............................................................................................. 37
Slika 32: »UrlService« storitev................................................................................................. 38
Slika 33: Krmilnik za prijavo ................................................................................................... 38
Slika 34: Krmilnik za odjavo .................................................................................................... 39
Slika 35: Pogled za delo z opravili - Prvi del ........................................................................... 39
Slika 36: Pogled za delo z opravili - Drugi del......................................................................... 40
Slika 37: Pogled za delo z opravili - Tretji del ......................................................................... 40
Slika 38: Definiranje modula »TodoListCtrl« in metoda za pridobivanje vseh opravil iz
strežnika .................................................................................................................................... 42
Slika 39: »$watchCollection« metoda ...................................................................................... 42
Slika 40: »addTodo« metoda .................................................................................................... 43
Slika 41: »delete« metoda......................................................................................................... 43
Slika 42: »deleteAll« metoda ................................................................................................... 43
Slika 43: »deleteCompleted« metoda ....................................................................................... 44
Slika 44: »completeAll« metoda .............................................................................................. 44
Slika 45: »update« metoda ....................................................................................................... 45
Slika 46: »steviloPreostalih« in »steviloOpravljenih« metode................................................. 45
Slika 47: Metode in lastnost za filtriranje opravil .................................................................... 46
KAZALO TABEL
Tablica 1: Nekatere prednosti in slabosti JavaScript jezika ....................................................... 6
Tablica 2: Ostala ogrodja in knjižnice za izdelavo SPA aplikacij ............................................ 28
SEZNAM UPORABLJENIH KRATIC
ADO.NET – ActiveX Data Objects .NET
API – Application Programming Interface
ASP – Active Server Pages
CGI – Common Gateway Interface
CLR – Common Language Runtime
CORBA – Common Object Request Broker Architecture
Pristop SPA za izgradnjo spletnih strani
viii
CSS – Cascading Style Sheet
DOM – Document Object Model
DPP – Distributed Data Protocol
FCL – Framework Class Library
HMVC – Hierarchical Model–View–Controlle
HTML – HyperText Markup Language
HTTP – HyperText Transfer Protocol
JSON – JavaScript Object Notation
JSP – JavaServer Pages
LINQ – Language-Integrated Query
MVA – Model-View-Adapter
MVC – Model-View-Controller
MVP – Model-View-Presenter
MVVM – Model-View-ViewModel
REST – Representational State Transfer
SOAP – Simple Object Access Protocol
SPA – Single Page Application
SQL – Structured Query Language
URL – Uniform Resource Locator
XHTML – Extensible HyperText Markup Language
XML – Extensible Markup Language
Pristop SPA za izgradnjo spletnih strani
1
1. UVOD
1.1. Opredelitev problema
S hitrim razvojem računalniških tehnologij in strojne opreme se povečujejo tudi
pričakovanja uporabnikov. S pojavom dinamičnih spletnih strani je uporaba klasičnih
statičnih spletnih strani postala zastarela. Uporabniki pričakujejo čim hitrejše pridobivanje
informacij in opravljanje opravil preko spleta. Danes je prišlo do še ene težave, in sicer, da
spletni brskalniki na osebnih računalnikih več niso edini odjemalci. Pojavile so se mobilne
naprave, tablice in računalniki v različnih hišnih napravah, s pomočjo katerih je
omogočeno brskanje spleta na enak način, kot je to na osebnih računalnikih. S tem je prišlo
do potrebe zmanjševanja prometa med strežniki in odjemalci. Pojavile so se enostranske
spletne aplikacije (angleško Single Page Application) (SPA). SPA aplikacije so aplikacije,
pri katerih se večina spletnega mesta naloži na odjemalca pri njegovem prvem obisku. Ko
uporabnik zahteva dodatne podatke, se mu oni pošiljajo v čim manjši obliki, tako da se
promet med odjemalcem in strežnikom precej zmanjša. Poleg boljše ekonomičnosti pa
SPA aplikacije nudijo uporabnikom tudi boljšo izkušnjo. S pojavom SPA aplikacij je izraz
»dinamični splet« dobil novi pomen, saj se šele zdaj samo podatki res dinamično
spreminjajo.
1.2. Predpostavke in omejitve
Za razlaganje strežniške strani SPA aplikacije se bomo omejili na Microsoftove
tehnologije. Vse primere bomo izdelali s pomočjo Visual Studio 2013 integriranega
razvojnega okolja, na strežniški strani pa bomo uporabili C# programski jezik. Pri
razlaganju konkretnega primera se bomo osredotočili predvsem za odjemalsko stran
aplikacije, ki jo bomo izdelali s pomočjo AngularJS knjižnice.
1.3. Kompozicija dela
Diplomsko delo je sestavljeno iz šestih poglavjih. Prvo poglavje je uvod, v katerem se
nahaja opredelili problematike, ki jo diplomsko delo rešuje, določene so osnovne
predpostavke in omejitve, na koncu poglavja pa je opisana kompozicija dela.
Pristop SPA za izgradnjo spletnih strani
2
V drugem poglavju je razloženo ozadje razvoja spletnih strani. V tem poglavju so razloženi
osnovni pojmi, za katere se od bralca pričakuje, da jih v do neke mere že pozna. Razložena
je razlika med spletnimi strani in spletnimi mesti, ter izrazi, kot so: HTML5, CSS,
JavaScript ter MVC. Na koncu poglavja se nahaja še kratek pregled Microsoftovih
pristopov izgradnje spletnih strani.
Nato sledi poglavje o SPA aplikacijah. V poglavju je na začetku razložen pomen izraza
»enostranske spletne aplikacije«, nato pa je razložena arhitektura takih aplikacij, ki je
zgrajena iz večjega števila ravni. Vsaka raven je raziskana posebej.
Naslednje poglavje je poglavje o aktualnih ogrodjih, knjižnicah in tehnologijah, ki se
uporabljajo za razvoj SPA aplikacij. Osredotočili se bomo predvsem na tri, in sicer na
Backbone.js, Ember.js in AngularJS. Vsaka tehnologija je posebej na kratko raziskana v
svojem podpoglavju. V zadnjem podpoglavju pa so naštete in na kratko opisane še
nekatere od ostalih tehnologij za razvoj SPA aplikacij.
Predzadnje poglavje je poglavje, kjer je analiziran in razložen postopek izgradnje enega
preprostega primera s pomočjo AngularJS knjižnice in Microsoft ASP.NET MVC
tehnologije v ozadju.
Zadnje poglavje je zaključek in sklep diplomskega dela. V tem poglavju se nahaja
povzetek pridobljenih rezultatov.
Na koncu diplomskega dela se nahajajo še viri in literatura, ki je bila v pomoč pri njegovi
izdelavi naloge.
Pristop SPA za izgradnjo spletnih strani
3
2. OZADJE IN OSNOVNI POJMI
2.1. Kaj je spletna stran?
Spletna stran je dokument, najpogosteje napisan v HTML jeziku, ki je dostopen prek
interneta ali drugega omrežja z uporabo brskalnika. Spletna stran je naložena v brskalnik z
vnosom URL naslova in lahko vsebuje besedilo, grafiko in povezave do drugih spletnih
strani in datotek. Prvo spletno stran je izdelal Tim Barners-Lee v CERN-u leta 1991. [6]
Spletne strani so gradniki svetovnega spleta (World Wide Web). Spletne strani so lahko
statične ali dinamične. Statične strani se prenesejo na odjemalca točno take, kot so
shranjene na strežniku in prikazujejo enako vsebino vsem uporabnikom v vsakem
kontekstu. Njihovo vsebino je možno spremeniti samo ročno na strežniku. Vsebina
dinamičnih strani pa je odvisna od konteksta in uporabnika, ki dostopa do nje. Te strani so
običajno napisane v skriptnih jezikih, kot so PHP, Perl, ASP ali JSP. Skripte na straneh
zaganjajo funkcije na strežniku, ki vračajo stvari, kot so podatki iz podatkovne baze, slike
ali delčki HTML kode. Vsa ta vsebina je vrnjena v obliki HTML kode, ki jo nato brskalnik
prevede in prikaže.
2.2. Kaj je spletno mesto?
Spletno mesto je niz sorodnih spletnih strani, ki se običajno nahajajo na eni spletni domeni
(Slika 1). Spletno mesto se nahaja običajno na vsaj enem spletnem strežniku in je dostopno
preko omrežja, kot je internet ali zasebnega lokalnega omrežja preko URL-ja. Vsa javno
dostopna spletna mesta so gradniki svetovnega spleta. Spletna mesta imajo veliko funkcij
in se lahko uporabljajo v različne namene. Obstajajo osebna spletna mesta, komercialna
spletna mesta, vladina spletna mesta ter spletna mesta neprofitnih organizacij. Spletna
mesta so lahko delo posameznika, podjetja ali neke druge organizacije in so običajno
namenjena za določeno funkcijo. Katero koli spletno mesto lahko vsebuje hiperpovezave
do katerega koli drugega spletnega mesta. [31]
Pristop SPA za izgradnjo spletnih strani
4
Slika 1: Več spletnih strani tvori spletno mesto
2.3. Označevalni jezik HTML5
HTML5 je najnovejša verzija HTML (angleško Hyper Text Markup Language) jezika, ki
je jezik za označevanje in opisovanje spletnih strani. Ko pravimo, da je jezik
»označevalni«, to pomeni, da je sestavljen iz nabora označevalnih značk, ki opisujejo
vsebino spletnega dokumenta (spletne strani). [16] Prejšnja različica HTML-ja, HTML
4.01, je prišla na trg leta 1999. Od takrat se je svetovni splet bistveno spremenil. HTML5
je bil zasnovan kot zamenjava za HTML4, XHTML in HTML DOM ravni 4. Bil je
posebno zasnovan za zagotavljanje bogatih vsebin, brez potrebe po dodatnih vtičnikih.
Sedanja različica prinaša nove gradnike, kot so animacije in grafika ter glasba in filmi in se
lahko uporablja tudi za izgradnjo zapletenih spletnih aplikacij. HTML5 je tudi podprt na
večjem številu platform tako, da deluje na računalnikih, tabletah, pametnih telefonih in
pametnih televizorjih. [17]
2.4. Stilske predloge CSS
CSS (angleško Cascading Style Sheet) se je začel razvijati leta 1997 kot orodje, ki
omogoča spletnim razvijalcem definiranje izgleda in občutka njihovih spletnih strani.
Namen CSS-a je ločevanje vsebine od izgleda, tako da lahko HTML opravlja več
funkcionalnosti, za katere je bil prvotno namenjen – označevanje vsebine, brez skrbi o
Pristop SPA za izgradnjo spletnih strani
5
postavitvi elementov in njihovem izgledu. CSS ima preprosto sintakso in uporablja veliko
angleških ključnih besed za navajanje imen različnih lastnosti. CSS dokument je sestavljen
iz niza pravil. [23] Vsako pravilo ali nabor pravil je sestavljeno iz enega ali več selektorjev
in deklaracijskega bloka. S selektorji označujemo dele HTML kode, za katere se bodo v
deklaracijskem bloku nahajale lastnosti.
2.5. Skriptni jezik JavaScript
JavaScript je dinamičen računalniški programski jezik. Najpogosteje se uporablja za
pisanje odjemalskih skript, ki se zaganjajo v spletnem brskalniku in se uporabljajo za
interakcijo z uporabnikom, nadzor brskalnika, pošiljanje asinhronih sporočil na strežnik ter
spreminjanje vsebin dokumenta, ki se prikazuje. Uporablja se tudi za programiranje
omrežij na strežniški strani, v razvoju računalniških iger in za ustvarjanje namiznih in
mobilnih aplikacij. [25]
Uporaba JavaScript jezika na strani odjemalca je najbolj pogosta. JavaScript skripta mora
biti vključena v HTML dokument, ali se on mora sklicevati nanjo, da bi brskalnik kodo, ki
je zapisana v njej, izvedel. Ko na spletno stran, dodamo JavaScript kodo, HTML stran več
ni statična. Ona vsebuje programe, ki komunicirajo z uporabnikom, nadzorujejo brskalnik
in dinamično ustvarjajo HTML kodo. JavaScript mehanizmi vsebujejo mnoge prednosti
pred tradicionalnimi CGI odjemalskimi skriptami. Na primer, z JavaScript kodo lahko
preverjamo, če je uporabnik vnesel pravilen elektronski naslov v vnosno polje. JavaScript
koda se izvede, ko uporabnik predloži (angleško submit) obrazec. Samo če so vsa vnosna
polja pravilno izpolnjena, bo obrazec poslan na strežnik. JavaScript koda se lahko
uporablja tudi za opazovanje uporabnikovih akcij ter proženje določenih delov kode, če
uporabnik sproži določene dogodke, kot so klik gumba miške ali tipke na tipkovnici. Kot
vsak programski jezik ima tudi JavaScript ima mnoge prednosti in slabosti. (Error!
Reference source not found.) [15]
Dobre karakteristike Slabe karakteristike
Manj interakcije s strežnikom – Lahko
preverjamo uporabnikov vnos, preden
podatke pošljemo na strežnik, s tem pa
dobimo manj obremenitve na strežniku.
Z JavaScript kodo ni možno branje ali
pisanje v datoteke, ki so na odjemalcu. To je
onemogočeno zaradi varnostnih razlogov.
Pristop SPA za izgradnjo spletnih strani
6
Takojšnja povratna informacija
uporabnikom – uporabniki ne morajo čakati
na osvežitev strani, da bi videli, ali so kaj
napačno vnesli.
JavaScript nima večnitne in večprocesorske
zmogljivosti.
Povečanje interaktivnosti vmesnikov –
Lahko ustvarimo vmesnike, ki se odzivajo,
ko uporabnik na primer pride z miško na
neki gradnik, ali pritisne določen gumb na
tipkovnici.
Ne obstaja podpora za izgradnjo sistemskih
mrežnih aplikacij z uporabo JavaScript
jezika.
Bogatejši vmesniki – JavaScript se lahko
uporablja za dodajanje različnih »drag-and-
drop« komponent ter drsnikov, ki dodajajo
bogatejši uporabniški vmesnik za
obiskovalce spletne strani.
Uporabnik lahko JavaScript popolnoma
izklopi, s tem pa lahko pride tudi do
varnostnih težav.
Tabela 1: Nekatere prednosti in slabosti JavaScript jezika
JavaScript je prvotno razvijal Brendan Eich, ko je delal za Netscape Communication
Corporation. Čeprav se je razvijal pod imenom »Mocha«, je jeziku uradno bilo ime
»LiveScript«, ko se je prvič pojavil v beta različici v Netscape navigatorju 2.0 septembra
leta 1995, ampak se je preimenoval v JavaScript, ko je bil izdan za Netscape brskalnike
različice 2.0B3. [25] Do danes, po skoraj dvajsetih letih obstoja, je jezik postal en od
najuporabnejših programskih jezikov na svetu in brez njega ne bi svetovni splet izgledal
kot izgleda danes. S časom so se pojavile številne dodatne knjižice, ki jih razvijajo
komercialne korporacije ali pa posamezniki, ki olajšujejo njegovo uporabo in mu dodajajo
številne dodatne zmožnosti. Razvoj SPA aplikacij bi bil zelo težek, če ne celo nemogoč
brez JavaScript jezika.
2.6. Format za izmenjavo podatkov JSON
JavaScript Object Notation (JSON) je odprtokodni standard, ki uporablja človeku berljiv
format teksta za prenos podatkovnih objektov, ki so sestavljeni iz atributov in vrednosti.
Uporablja se predvsem za prenos podatkov med strežnikom in spletno aplikacijo kot
alternativa XML-ja. [27]
Pristop SPA za izgradnjo spletnih strani
7
2.7. Arhitektura REST
Representation State Transfer (REST) temelji na odjemalec − strežnik komunikacijskih
protokolih brez stanja. Protokol, ki se uporablja, je v skoraj vseh primerih HTTP. REST je
arhitekturni stil za oblikovanje omrežnih aplikacij. Ideja je, da se namesto uporabe
zapletenih mehanizmov, kot so CORBA ali SOAP za povezovanje med stroji, uporabi
HTTP. V mnogih pogledih je možno na svetovni splet, ki temelji na HTTP-ju, gledati kot
REST arhitekturo. RESTful aplikacije uporabljajo HTTP zahteve za objavljanje podatkov
(angleško create/update), branje podatkov (poizvedbe) in brisanje le-teh. Tako REST
uporablja HTTP na vseh štirih CRUD (Create/Read/Update/Delete) operacijah. [11]
2.8. Knjižnica jQuery
jQuery je JavaScript knjižnica, ki ima namen poenostaviti pisanje HTML skript na
odjemalcu. Izdal jo je JohnResig januarja leta 2006. Trenutno jo razvija ekipa razvijalcev,
ki jo vodi Dave Methvin. S tem, da ga uporablja preko 60 % od 10-000 najbolj obiskanih
spletnih strani, je jQuery najbolj priljubljena JavaScript knjižnica v današnji uporabi.
Sintaksa jQueryja je zasnovana, da bi bila navigacija na dokumentih čim lažja za izbiranje
in označevanje DOM elementov, izdelavo animacij, odzivanje na dogodke ter razvoj Ajax
aplikacij. jQuery ponuja tudi zmožnost ustvarjanja vtičnikov. To omogoča razvijalcem
abstrakcijo nizkonivojskih interakcij in animacij ter naprednih efektov. [26] Modularni
pristop jQuery knjižnice omogoča ustvarjanje močnih dinamičnih spletnih strani in spletnih
aplikacij. Mnoge knjižnice za razvoj SPA aplikacij, ki jih bomo spoznali v naslednjih
poglavjih, so odvisne prav od jQuery knjižnice, ki se lahko šteje kod njihov prednik, saj je
razvoj SPA aplikacij možen tudi samo s pomočjo nje (čeprav je to zelo težko, prav v tem
druge knjižnice v veliki meri pomagajo).
2.9. Vzorec MVC
Model-pogled-krmilnik (angleško Model-View-Controller) je arhitekturni načrtovalski
vzorec, ki se uporablja za implementacijo uporabniških vmesnikov. S pomočjo vzorca se
aplikacija razdeli v tri medsebojno povezane dele in je močno sredstvo za ločevanje nalog
v aplikaciji. [28] Vzorec v svoji prvotni obliki ali pa kot eden od njegovih izpeljank se
Pristop SPA za izgradnjo spletnih strani
8
uporablja v številnih ogrodjih in je danes en od principov, na katerih temeljijo številne
knjižnice za razvoj različnih tipov aplikacij. MVC deli aplikacijo v tri glavna dela:
Model – nabor razredov, ki opisujejo podatke, s katerimi delamo, kot tudi poslovna
pravila za spremembo in manipulacijo teh podatkov.
Pogled (angleško View) – definira, kako bo prikazan uporabniški vmesnik.
Krmilnik (angleško Controller) – množica razredov, ki skrbi za komunikacijo med
aplikacijo in uporabnikom, za tok aplikacije ter za logiko aplikacije.
MVC vzorec definira tudi komunikacijo med temi tremi deli (Slika 2). Krmilnik lahko
pošilja ukaze modelu za posodobitev stanja modela, lahko pa komunicira tudi s pogledom,
ki je povezan s tem modelom, in posodobi predstavitev prikazanih podatkov v pogledu na
podlagi modela. Model sporoča o svojem stanju poglede in krmilnike, ki so povezani z
njim. Ta sporočila omogočajo pogledom posodabljati svoje predstavitvene podatke ter
krmilniku spreminjanje nabora dovoljenih ali možnih ukazov. Pogled zahteva podatke od
modela, s katerim je povezan, da lahko generira izhodno predstavitev uporabniku. [28]
Slika 2: Gradniki MVC vzorca in komunikacija med njimi
MVC je pomemben načrtovalski vzorec v računalniški znanosti že mnoga leta. Prvotno
ime, »Thing-Model-View-Editor« iz leta 1979, je bilo kasneje poenostavljeno v »Model-
View-Controller«. [9] Do danes se je iz MVC vzorca razvilo že večje število njegovih
variant, kot so MVA (angleško Model-View-Adapter), HMVC (Hierarhični MVC), MVP
(angleško Model-View-Presenter) ter MVVM (angleško Model-View-ViewModel), ki se pri
ogrodjih za razvoj SPA aplikacij največ pojavlja.
Pristop SPA za izgradnjo spletnih strani
9
MVVM (Slika 3) je načrtovalski vzorec, ki temelji na MVC vzorcu in se pred vsem
uporablja pri platformah za razvoj uporabniških vmesnikov, ki podpirajo programiranje z
dogodki. MVVM vzorec je bil zasnovan za podporo Microsoftovega Windows
Presentation Frameworka (WPF) in Silverlighta, ki so debitirali z .NET 3.0 ogrodjem 21.
novembra leta 2006. Sčasoma so se pojavile številne JavaScript implementacije vzorca, kot
so Knockout.js in Vue.js. Model in pogled sta pri MVVM vzorcu enaka kot pri MVC,
edino zadnja komponenta (krmilnik) je zamenjana z »ViewModel« komponento.
»ViewModel« je model pogleda, kar pomeni, da je abstrakcija pogleda in služi kot
posrednik med pogledom in modelom. Nanj lahko gledamo kot specializirani vidik, ki
spreminja podatke v modelu v podatke v pogledu ter posreduje ukaze iz pogleda modelu.
»ViewModel« izpostavlja javne lastnosti, ukaze in abstrakcije. V modelu je dejansko
stanje podatkov, in ta komponenta je običajno podatkovna baza, »ViewModel« pa podatke
iz modela spremeni v primerno obliko za prikaz in jih hrani v taki obliki, nato pa jih
posreduje pogledu, ki jih prikazuje. [29]
Slika 3: MVVM vzorec
2.10. Microsoftove tehnologije za izgradnjo spletnih strani
Pristop SPA za izgradnjo spletnih strani
10
Skozi zgodovino je Microsoft razvil večje število ogrodij, predlog ter knjižnic, ki se
uporabljajo za razvoj spletnih projektov, kot so spletne strani in aplikacije. Tehnologije, ki
jih bomo pogledali, delujejo s pomočjo .NET ogrodja.
.NET ogrodje je programsko ogrodje, ki ga je razvil Microsoft in deluje predvsem na
Microsoft Windows operacijskih sistemih. Vsebuje veliko razredno knjižnico, znano kot
»Framework Class Library« (FCL), ter zagotavlja interoperabilnost večjega števila
programskih jezikov (vsak jezik lahko uporablja kodo, napisano v drugih jezikih).
Programi, napisani za .NET ogrodje, se izvajajo v programskem okolju, znanem kot
»Common Language Runtime« (CLR). FCL in CLR so sestavni deli .NET ogrodja (Slika
4). [18] Microsoft je .NET ogrodje izdal leta 2002, z njim pa tudi prvo verzijo ASP.NET
odprtokodne platforme, ki omogoča razvijalcem razvoj dinamičnih spletnih strani, spletnih
aplikacij in spletnih storitev ter je naslednik »Active Server Pages« (ASP) tehnologije. [21]
ASP.NET platforma podpira tri tehnologije, s katerimi je možen razvoj spletnih aplikacij:
ASP.NET Web Forms, ASP.NET Web Pages (ASP.NET Razor) in ASP.NET MVC (Slika
5).
Slika 4: .NET ogrodje
Pristop SPA za izgradnjo spletnih strani
11
Slika 5: Kategorizacija ASP.NET ogrodja
ASP.NET Web Forms nam omogočajo ustvarjanje spletnih aplikacij na podoben način, kot
se ustvarjajo Windows Forms aplikacije. Na voljo nam je vmesnik z orodno vrstico z
naborom vseh možnih gradnikov spletne strani, iz katerih oblikujemo videz in razporeditev
njenih elementov. Za vsako stran se izdelata dve datoteki: datoteka z uporabniškim
vmesnikom ter datoteka s »kodo-zadaj« (angleško code-behind). Datoteka z uporabniškim
vmesnikom definira strukturo spletne strani, njen videz ter gradnike, ki se bodo na njej
nahajali. Ta datoteka ima končnico ».aspx«. V drugi datoteki pa je strežniška koda, ki
obravnava dogodke in medsebojno interakcijo med gradniki na strani (ta koda je lahko
vključena tudi v datoteki z uporabniškim vmesnikom, ampak je priporočeno da se loči). Ta
datoteka ima končnico povezano s programskim jezikom, bodisi aspx.cs za C# ali aspx.vb
za VB.NET. Strežniško kodo lahko pišemo tudi neposredno v datoteko z uporabniškim
vmesnikom, tako da jo vključimo s pomočjo »<%=« in »%>« simbolov, ampak je
priporočeno, da se ona loči (Slika 6).
Slika 6: Primer vnosa C# kode neposredno v datoteko s HTML kodo
Z ASP.NET Web Pages je Microsoft klasičnemu ASP.NET-u (Web Forms) dodal Razor.
Razor je predloga označevalne sintakse, ki omogoča lažje pisanje strežniške kode
Pristop SPA za izgradnjo spletnih strani
12
neposredno na spletni strani. S tem se pridobi predvsem na hitrosti izdelave spletnih
aplikacij ter na manjši kompleksnosti takih projektov. Namesto uporabe ASP.NET ».aspx«
označevalne sintakse (<%= in %>) za označevanje bloka s kodo v Razorju označimo blok
kode z znakom @ in ga ne rabimo zapreti (Slika 7). [22]
Slika 7: Primer Razor sintakse
Tretja tehnologija je ASP.NET MVC, ki je Microsoftova implementacija MVC
načrtovalskega vzorca. Aplikacija je s tem razdeljena v tri dele: model, pogled in krmilnik.
V pogledih je še vedno možno uporabljati strežniško kodo, napisano v C# ali Visual Basic
jeziku.
Čeprav je datoteke spletnih aplikacij možno pisati s pomočjo popolnoma preprostih
urejevalnikov besedil, kot je Notepad, bodo primeri iz diplomskega dela izdelani s
pomočjo Microsoftovega Visual Studio razvojnega orodja.
V nadaljevanju so naštete in na kratko opisane še nekatere Microsoftove tehnologije, s
katerimi je, ko izdelujemo spletne aplikacije v ASP.NET platformi, srečanje skoraj
neizogibno.
ADO.NET (angleško ActiveX Data Objects .NET) je sestavni del .NET ogrodja, ki
omogoča dostopanje do podatkov shranjenih v relacijskih podatkovnih bazah, XML
datotekah in drugih podobnih virov.
Entity Framework je nabor tehnologij v ADO.NET, ki omogočajo razvoj
podatkovno usmerjenih aplikacij. Razvijalcem omogočajo delo s podatki v obliki
domensko specifičnih predmetov in lastnosti, brez potrebe ukvarjanja s tabelami in
stolpci v podatkovni bazi, kjer so shranjeni ti podatki. Z ogrodjem lahko razvijalci
delajo na višji ravni abstrakcije. [19]
Pristop SPA za izgradnjo spletnih strani
13
LINQ (angleško Language Integrated Query) dodaja olajšano poizvedovanje po
naborih podatkov v sintakso C# in Visual Basic jezikov. Tehnologija uvaja vzorce
za poizvedovanje in posodabljanje podatkov in se lahko razširi, da podpira
potencialno kakršnokoli zbirko podatkov. [12]
Pristop SPA za izgradnjo spletnih strani
14
3. Enostranske spletne aplikacije
3.1. Kaj je SPA?
Enostranska spletna aplikacija je spletna aplikacija ali spletno mesto, ki se nahaja v celoti
na eni spletni strani, njen cilj pa je zagotoviti bolj mobilno uporabniško izkušnjo, ki
spominja na namizno aplikacijo. [30] SPA je taka spletna aplikacija, pri kateri imamo
stran, ki podaja pravila razporeditve elementov (angl. layout), potem pa lahko vanjo
nalagamo več posameznih pogledov. Pri SPA aplikacijah se večina aplikacijske logike
nahaja na odjemalski strani. Pri prvem odjemalčevem obisku se celotna spletna stran ali
mesto prenese k njemu, nato pa se, odvisno od njegovih akcij, dinamično in asinhrono
zamenjujejo in prenašajo samo delčki take aplikacije. Stran se nikoli ne osveži v celoti.
Za pojav SPA aplikacij je odgovoren hiter razvoj JavaScript programskega jezika in novih
knjižnic, brez katerih bi bil njihov razvoj zelo težek.
V današnjem času postajajo take spletne strani vse večji in večji trend. Ob njihovi uporabi
uporabnik dobi občutek, kot da uporablja klasično namizno aplikacijo, kar pripomore k
tem, da je interakcija veliko hitrejša.
Izraz »Single Page Application« je prvi uporabil Steve Yen leta 2005, čeprav se je koncept
pojavil že vsaj leta 2002. [30]
Moderni brskalniki, ki lahko obdelujejo (angleško parsajo) HTML5, so razvijalcem
omogočili prenos uporabniškega vmesnika in aplikacijske logike iz spletnega strežnika na
odjemalca. Zrele odprtokodne knjižnice omogočajo gradnjo SPA aplikacij brez potrebe
poznavanja in bojevanja s tehničnimi težavami.
Nekatere od glavnih karakteristik SPA aplikacij so:
Večina aplikacijske logike se nahaja na odjemalcu, ne pa na strežniku, kot smo
vajeni spletni razvijalci. [10]
Veči del aplikacije je napisan v JavaScript jeziku. [10]
Aplikacija izmenjuje podatke s strežnikom preko web API-ja, ki običajno temelji
na REST principih. [10]
Aplikacija podaja uporabniško izkušnjo, kot je tista pri uporabi namiznih aplikacij.
[10]
Pristop SPA za izgradnjo spletnih strani
15
Stvari se dogajajo asinhrono in na podlagi dogodkov ne pa asinhrono preko zahtev
in odgovorov. [10]
Trganje (angleško Chunking) – Spletna stran je zgrajena z nakladanja HTML
koščkov in JSON podatkov namesto prejemanja popolnega HTML dokumenta s
spletnega strežnika z vsako zahtevo. [30]
Krmilniki – JavaScript koda, ki obravnava zapleten DOM in podatkovno
manipulacijo, aplikacijsko logiko in AJAX klice, se nadomesti s krmilniki, ki
ločujejo poglede in modele, ki uporabljajo MVC ali MVVM vzorec. [30]
Predloge (angleško Templates) – Kodiranje uporabniškega vmesnika in DOM
manipulacije se nadomesti z deklarativno vezavo podatkov v HTML predloge. [30]
Usmerjanje (angleško Routing) – Izbor pogledov in navigacij (brez ponovnega
nalaganja strani), ki ohranja stanje elementov in podatkov. [30]
Komunikacija v realnem času – Dvosmerna komunikacija odjemalske aplikacije in
spletnega strežnika nadomeščajo zahteve v eno smer od brskalnika. [30]
Lokalno shranjevanje – Zmogljivost shranjevanja podatkov na odjemalcu zaradi
boljše odzivnosti in offline dostopa zamenjuje piškotke in podatkovno intenzivne
obremenitve iz spletnega strežnika. [30]
3.2. Arhitektura SPA
Ko govorimo o arhitekturi SPA aplikacij, lahko imamo dva pogleda na arhitekturo: na
arhitekturo aplikacije v celoti (odjemalska stran + strežniška stran) ali arhitekturo same
»SPA« aplikacije, ki se nahaja na odjemalski strani (Slika 8).
Pristop SPA za izgradnjo spletnih strani
16
Slika 8: Arhitektura SPA aplikacije
1. Arhitektura celotne aplikacije
Celotna aplikacija je sestavljena iz večjega števila ravni (običajno trinivojska arhitektura).
Na strežniški strani arhitekture se običajno nahaja podatkovna raven z bazo ter logična
raven (običajno REST API), ki podatke iz baze na osnovi zahtev pošilja odjemalcu. Pri
prvem obisku spletne strani se prenese na odjemalca celotna stran (HTML, CSS), vključno
z JavaScript kodo, ki zna na podlagi uporabnikovih akcij delčke te strani spreminjati.
JavaScript koda zahteve strežniku pošilja asinhrono, nato pa na podlagi pridobljenih
rezultatov dinamično spreminja uporabniški vmesnik spletne strani.
2. Arhitekture odjemalske strani
Odjemalska stran SPA aplikacije je predstavitvena raven celotne aplikacije. V tem nivoju
se nahaja celotna logika SPA aplikacije. Način zgradbe aplikacije je predvsem odvisen od
knjižnice katera se uporablja za njen razvoj. Trenutno aktualne knjižice uporabljajo
različne načrtovalske vzorce za razvoj SPA aplikacij, kot so MVC, MVVM in MVP.
Običajno se podatki pridobijo iz strežnika v JSON formatu, nato pa se shranijo v obliki
JavaScript objektov, ki se povežejo s HTML kodo. Odvisno od knjižice pa se uporabljajo
še različni gradniki, ki narekujejo logiko, po kateri je aplikacija zgrajena, kot so krmilniki,
servisi, tovarne, direktive, moduli ipd.
Pristop SPA za izgradnjo spletnih strani
17
3.3. Podatkovna raven SPA aplikacije
Podatkovna raven SPA aplikacije, ki se nahaja na strežniku, je v največjem številu
primerov relacijska podatkovna baza (MySQL, MS SQL, Oracle …), iz katere se podatki
berejo v logičnem nivoju. Baza se lahko nahaja na enakem strežniku, na katerem se nahaja
aplikacija, ali pa se ona nahaja na nekaterem drugem (ali celo več njih). Čeprav so podatki
v večini primerov hranjeni v podatkovni bazi, to ni nujno. Za SPA aplikacije je pomembno
zagotoviti, da so podatki hitro dostopni in jih je možno hitro dostaviti do odjemalca. Vir
podatkov je lahko tudi XML datoteka, neka statična datoteka na strežniku ali pa podatek,
ki se preko servisov pridobi iz nekega tujega strežnika.
3.4. Logična raven SPA aplikacije
Največji delež logične ravni SPA aplikacije so metode, ki obdelujejo podatke in jih
spreminjajo v primerno obliko za uporabo na odjemalcu. Običajno je to REST API, ki na
podlagi HTTP zahtev vrača podatke v JSON formatu. Na podlagi odjemalčevih zahtev
logična raven pridobi podatke iz podatkovne ravni in jih nato spremeni v primerno obliko.
Na primer, če pride od odjemalca zahteva po seznamu artiklov, logični nivo te podatke
prebere iz podatkovne ravni (npr. relacijske podatkovne baze), ampak jih ne vrne v obliki,
v kateri jih je pridobil, temveč iz njih zna filtrirati samo podatke, ki bo jih odjemalec
potreboval za svoje delovanje. V logični ravni je treba poskrbeti tudi za varnostne
mehanizme aplikacije.
3.5. Predstavitvena raven SPA aplikacije
Predstavitvena raven je raven, ki se popolnoma nahaja na odjemalcu. Na predstavitveno
raven aplikacije lahko gledamo kot na celoto, ki je aplikacija sama po sebi. Predstavitvena
raven SPA aplikacije je običajno implementirana s pomočjo enega od MV* vzorcev
(odvisno od uporabljene knjižnice ali ogrodja). Običajno gre za eno spletno stran, ki se
skupaj z JavaScript kodo prenese na odjemalca. Z JavaScript kodo pa je implementirana
celotna logika prikaza te spletne strani ter v bistvu celotna logika aplikacije. JavaScript
koda na podlagi odjemalčevih interakcij pošilja strežniku asinhrone zahteve po podatkih, ki
jih nato prikazuje na tej spletni strani. Celotne spletne strani nikoli ne osveži v celoti, saj se
spreminjajo samo njeni delčki.
Pristop SPA za izgradnjo spletnih strani
18
4. AKTUALNE KNJIŽNICE IN OGRODJA
Dandanes obstajajo na trgu mnoge JavaScript knjižice in ogrodja, s katerimi je možen
razvoj SPA aplikacij, ki imajo svoje prednosti in slabosti pred drugimi. V tem poglavju si
bomo na kratko pogledali nekatere od teh knjižic.
4.1. Knjižnica Backbone.js
Backbone.js je JavaScript knjižnica z RESTful JSON vmesnikom in temelji na Model-
View-Presenter (MVP) paradigmi. MVP vzorec se razlikuje od MVC vzorca v tem, da je
krmilnik zamenjan s tako imenovanim voditeljem (angleško Presenter), ter v tem, da tukaj
pogled ne more dobiti podatkov neposredno iz modela. Pri MVC vzorcu ima pogled neko
inteligenco in lahko poizveduje po modelu neposredno, pri MVP vzorcu pa je pogled
popolnoma pasiven in vsaka interakcija z modelom mora iti preko voditelja. [4]
Celotna knjižnica je izgrajena iz večjega števila modulov, najpogosteje pa se uporabljajo
Model, Collection, View in Events.
Backbone.Model je modul, ki vsebuje interaktivne podatke in njihovo logiko (»getterje« in
»setterje«, privzete vrednosti, podatke za inicializacijo, pretvorbe …). Model je možno
razširiti z lastnimi lastnosti in funkcionalnostmi s pomočjo »extend« funkcije (Slika 9).
Slika 9: Primer Backbone.js modela
Backbone.Collection je modul za delo s kolekcijami (nabor zaporednih modul objektov).
Modul nam omogoča opazovanje sprememb ter aktiviranje določenih dogodkov v
kolekcijah, v uporabo pa nam podaja tudi številne funkcije za delo z njimi, kot so: »max«,
»min«, »find«, »forEach«, »size«, »add«, »remove«, »pop«, »push«.
Pristop SPA za izgradnjo spletnih strani
19
Backbone.View je podoben krmilniku pri MVC ogrodjih. Pogled ne vsebuje HTML
oznake za našo aplikacijo, temveč procesira podatke in jih poveže s predlogami. Na tak
način lahko pogled opazuje podatke v modelu. Če pride pri njih do kakršne koli
spremembe, ustrezno spremeni tudi HTML predlogo. Na naslednji sliki se nahaja primer
uporabe Backbone.View modula ter njemu pripadajoče predloge (Slika 10) [3].
Slika 10: Primer uporabe Backbone.View modula
Backbone.Events je modul, ki lahko kakršnemu koli objektu doda možnost vezanja in
proženja poljubno poimenovanih dogodkov. Dogodki ne morajo biti deklarirani, preden se
povežejo z objekti in jim je možno podati poljubno število parametrov. Na naslednji sliki
se nahaja objekt, kateremu mu je dodana funkcija, ki se bo sprožila, ko se dogodi dogodek
»obvesti«. (Slika 11)
Pristop SPA za izgradnjo spletnih strani
20
Slika 11: Primer dogodka in njegovega proženja
Največja prednost knjižnice pred drugimi je njena velikost. Celotna knjižnica se nahaja v
eni datoteki, ki ni večja od 70 kb [2], edina knjižnica, od katere je odvisna, pa je
Underscore.js (v Underscore.js se nahajajo različne pomožne funkcije, ki jih Backbone.js v
svojem delovanju uporablja). Zaradi svoje velikosti je Backbone.js popularen v razvoju
preprostih, hitrih in manjših SPA aplikacij, uporablja pa se tudi za razvoj samo delov in
modulov spletnih strani. Čeprav je knjižnica zelo preprosta in lahka za uporabo, začetniki
(brez naprednejšega znanja JavaScript programskega jezika) pogosto padajo v pasti. Ena
od takih pasti je ponavljanje enake kode na več mestih. Backbone.js zahteva ročno
implementacijo dosti stvari, ki so v drugih knjižnicah že implementirane (npr. tako
imenovan »data-binding«); ravno zaradi tega ni primeren za razvoj kompleksnih večjih
projektov.
Nekatere od aplikacij, zgrajene s pomočjo Backbone.js knjižnice, so: TryRuby, Khan
Academy, Groupon Now, Stripe, Hulu, Quartz, Earth, Wordpress.com, Pitchfor, Spin,
Walmart Mobile, Basecamp ipd. [2] [5]
4.2. Knjižnica Ember.js
Ember.js je odprtokodno JavaScript ogrodje za izdelavo spletnih aplikacij, ki temelji na
MVC načrtovalskem vzorcu. Ogrodje je razvil Yehuda Katz leta 2011, ki je sodeloval tudi
v razvoju jQuery, Ruby on Rails in SproutCore tehnologij. [24]
Ember.js ima definirane osnovne koncepte, na podlagi katerih funkcionira in se jih zelo
tesno drži. Ti koncepti so: Model, Route, Controller, View in Template. Spodnji diagram
prikazuje, kako ti koncepti komunicirajo med sabo (Slika 12). [13]
Pristop SPA za izgradnjo spletnih strani
21
Slika 12: Interakcija med Ember.js koncepti
Predloge opisujejo uporabniški vmesnik aplikacije. V ozadju vsake predloge se nahaja
model, in če se ta model spremeni, se zna samodejno prilagoditi tudi predloga. Predloge se
izdelujejo s pomočjo Handlebars programskega jezika za izdelavo predlog in se
uporabljajo za gradnjo HTML strukture ter njeno dinamično spreminjanje. Na spodnji sliki
je prikazana dinamična HTML predloga, ki je s pomočjo Handlebars sintakse (znaki »{« in
»}«), povezane z modelom, v ozadju (Slika 13).
Slika 13: Primer Ember.js predloge
Usmerjevalnik (angleško Router) (Slika 14) je temeljni koncept Ember.js-ja, ki poudarja
pomen URL-ja pri upravljanju stanja aplikacije. En objekt poti ustreza enem URL-ju in v
Pristop SPA za izgradnjo spletnih strani
22
bistvu predstavlja trenutno stanje aplikacije. Poti so definirane v Router objektu edincu
(angleško Singleton). [24]
Slika 14: Primer preprostega Ember.js usmerjevalnika
Model je objekt, ki hrani stanje podatkov v aplikaciji. Predloge so odgovorne za prikaz
modela uporabniku, tako da podatke, shranjene v njem, spremenijo v HTML. Čeprav ni
pomembno, katera tehnologija za dobavo podatkov se nahaja na strežniku, se v mnogih
aplikacijah podatki dobijo preko HTTP JSON API-ja. [7] Modele izdelujemo tako, da
izdelamo podrazred razreda »DS.Model«, atribute pa mu dodamo s pomočjo »DS.attr«
(Slika 15).
Slika 15: Primer Ember.js modela
Krmilniki dodajajo modelom logiko prikaza. Predloga lahko z modelom vsebuje tudi
krmilnik (ni obvezno) in komunicira tudi z njim. Če ne izdelamo krmilnika med vsako
predlogo ali pogledom in modelom, jih bo ogrodje Ember.js izdelalo samo. [13]
Pogledi se uporabljajo za dodajanje sofisticiranega ravnanja z dogodki, ki jih proži
uporabnik, grafike, ki je ni možno ustvariti s CSS-om, za JavaScript animacije in
obnašanja na predloge.
Našteti koncepti so v veliko pomoč razvijalcem, ki lahko s pomočjo njih pišejo boljšo
kodo, olajšujejo pa tudi delo med različnimi razvijalci, ki delajo na istem projektu. Ker je
Pristop SPA za izgradnjo spletnih strani
23
poln močnih konceptov, veliko stvari lahko naredi namesto nas. Največja prednost
Ember.js pred ostalimi je v njegovem poudarku na usmerjanje in upravljanje URL-jev.
Velikost samega Ember.js ogrodja je okrog 300 Kb, kar je tudi ena od njegovih
pomanjkljivosti. Dokumentacija na njegovi uradni strani je polna napak, kar otežuje
njegovo učenje. Čeprav je dokumentacije na spletu ogromno, se veliko uporabnikov
pritožuje, da je učenje in razumevanje ogrodja zelo težko za začetnike.
Nekatere od aplikacij, zgrajenih z Ember.js ogrodjem, so naslednje: MHElabs, Yapp,
TILDE, Yahoo!, zendesk, Square, kohactive, captain train, Funding Gates …[8]
4.3. Knjižnica AngularJS
AngularJS je odprtokodno ogrodje za izdelavo spletnih aplikacij. Vzdržuje ga Google in
skupnost, ki pomaga pri ustvarjanju single-page aplikacij in one-page spletnih aplikacij, ki
na strani odjemalca rabijo samo HTML, JavaScript in CSS. Cilj AngularJS ogrodja je
bogatenje spletnih aplikacij z model-pogled-krmilnikom (MVC) zmožnostmi, v
prizadevanju, da bi bili razvoj in testiranje lažji. [20]
Knjižnica prebere HTML, ki vsebuje dodatne, prilagojene značke in atribute, potem pa
izvaja direktive, ki so povezane z njimi. Knjižnica se uporablja tudi za povezovanje
vhodnih in izhodnih delov strani z modelom, predstavljenim s standardnimi JavaScript
spremenljivkami. Vrednosti teh spremenljivk so lahko nastavljene ročno ali pa so
pridobljene iz statičnih ali dinamičnih JSON virov. [20]
AngularJS knjižnica podpira določene koncepte, ki se uporabljajo pri gradnji aplikacij s
pomočjo nje, kot so: moduli, krmilniki, storitve, filtri, direktive, izrazi. Glavni koncept je
»modul«. V korenu HTML dokumenta ali na delu, kjer želimo, da se SPA aplikacija začne,
moramo določiti, kateri modul bo uporabljen za njeno izvajanje. Ko brskalnik prebere
modul, se zažene AngularJS knjižnica. Od tega dela naprej se HTML procesira s pomočjo
nje. Na module pri AngularJS aplikaciji lahko gledamo kot na imenske prostore pri C# ali
Java jezikih. Vsakem modulu lahko podamo druge module, ki se bodo uporabljali v njem.
Na tak način se lahko uporabljajo komponente iz teh drugih modulov, podobno, kot to
storimo v C# jeziku s ključno besedo »using«. Moduli pomagajo tudi pri ponovni uporabi
kode. Priporoča se, da se različne komponente, kot so servisi ali krmilniki, ločijo v različne
module, saj jih je s tem možno uporabiti v popolnoma ločenih delih aplikacije ali pa celo v
Pristop SPA za izgradnjo spletnih strani
24
drugi aplikaciji. V svoji najpreprostejši obliki je modul nabor blokov kode z nastavitvami
ter tako imenovanih »run« blokov. [1] V bloke z nastavitvami dodamo kodo, ki želimo, da
se izvede, preden je karkoli drugo inicijalizirano, v »run« bloke pa kodo, ki se bo izvedla
pri zagonu aplikacije. Na naslednji sliki je preprost primer modula s imenom »app«, ki
vsebuje »config« in »run« bloke kode. (Slika 16)
Slika 16: Primer preprostega AngularJS modula
»ng« modul je modul, ki ga knjižnica privzeto sproži na samem začetku izvajanja. Modul
vsebuje najpomembnejše komponente, brez katerih AngularJS aplikacija ne bi mogla
funkcionirati.
Naslednji pomemben koncept so direktive. Direktive so oznake, ki HTML gradnikom, kot
so elementi ali atributi, dodajajo neka določena obnašanja ali pa jih skupaj s njihovi otroki
v popolnosti spremenijo. AngularJS ima v svojem »ng« modulu že definirano veliko
zalogo uporabnih direktiv, lahko pa ustvarimo tudi poljubne lastne direktive. Nekatere od
direktiv iz »ng« modula bomo spoznali v naslednjem poglavju. V lastnih direktivah lahko
definiramo različne lastnosti, ki bodo narekovale obnašanje HTML gradnika, na kateri
bomo direktivo dodali v HTML dokumentu. Lahko definiramo restrikcijo, s katero
napovemo, na kateri tip gradnika je možno direktivo dodati: na model, ki se bo uporabil v
direktivi, HTML kodo, ki se bo dodala na mestu, na katerem bomo direktivo uporabili, ali
ime datoteke, ki vsebuje to kodo; funkcijo, ki se bo izvedla nad direktivo, ter številne druge
lastnosti. Ko definiramo direktivo, ji definiramo tudi ime ter modul, v katerem bo se
nahajala, ampak ko jo želimo, uporabiti, moramo pred njenim imenom dodati še »ng-«
prefiks. Direktive pomagajo pri izgradnji HTML kode iz večjega števila delov, ki so ločeni
v različnih datotekah. Na tak način lahko na primer neko direktivo prikažemo samo, če je
izpolnjen nek pogoj. Na podlagi takih pogojev aplikaciji dodamo tako imenovana stanja, to
Pristop SPA za izgradnjo spletnih strani
25
pa je velik plus pri gradnji dinamičnih spletnih strani. Na naslednjih dveh slikah se nahaja
preprosta direktiva ter način njene uporabe v HTML kodi (Slika 17, Slika 18).
Slika 17: Primer preproste AngularJS direktive
Slika 18: Primer uporabe AngularJS direktive
Krmilniki (angleško Controller) so koncept, ki se uporablja za dodajanje poslovne logike
aplikaciji. S pomočjo »$scope« objekta, ki ga lahko uporabimo v krmilniku, aplikaciji
narekujemo aplikaciji navodila za povezovanje modela s pogledom. »$scope« objektu
dodamo lastnosti, ki jih lahko uporabimo neposredno v HTML kodi. Na tak način katera
koli sprememba podatkov, ki se nahajajo v $scope objektu, sproti spremeni njihov prikaz v
HTML dokumentu. To velja tudi nasprotno; če uporabnik spremeni vrednost podatka
preko na primer nekega vnosnega polja, se bo ta podatek spremenil tudi v $scope objektu.
Priporoča se, da krmilnik vsebuje samo logiko enega pogleda, saj se s tem zagotovi
granularnost celotne aplikacije. Zaradi tega je treba zagotoviti poseben krmilnik za vsak
pogled aplikacije ter celo za vsako direktivo. S pomočjo »ngController« atributa delu
HTML kode dodamo določen krmilnik, ki ga je možno tudi hierarhično gnezditi. S tem je
Pristop SPA za izgradnjo spletnih strani
26
»$scope« objekt nekega krmilnika dostopen v vseh krmilnikih, ki se nahajajo v hierarhiji
pod njim. AngularJS nam ponuja velik nabor direktiv (ki jih bomo podrobneje spoznali v
naslednjem poglavju), s pomočjo katerih so možne različne manipulacije nad »$scope«
objektom v krmilniku. Naslednje dve sliki prikazujeta krmilnik in njegovo uporabo v
HTML kodi (Slika 19, Slika 20).
Slika 19: Primer AngularJS krmilnika
Slika 20: Primer uporabe AngularJS krmilnika in lastnosti »$scope« objekta v HTML kodi
Storitve (angleško Services) se uporabljajo za organizacijo kode na način, da jo je možno
uporabiti v vseh delih aplikacije. S pomočjo storitev je možno definirati funkcije, ki bodo
dostopne skozi celotno izvajanje aplikacije. Uporabljajo se pa tudi za hranjenje podatkov,
ki morajo biti dostopni v različnih krmilnikih ali direktivah. AngularJS ima definirane tudi
večje število lastnih storitev, katerih ime se običajno začne z znakom »$«. Poleg storitev
obstajajo še tovarne (angleško Factorys) in ponudniki (angleško Providers). Tovarne in
ponudniki se razlikujejo od storitev v tem, da če storitev pošljemo kot vhodni parameter
nekemu drugemu konstruktu, dobimo instanco te storitve, če pa podamo tovarno ali
ponudnika, pa dobimo vrednost, ki jo oni vračajo. Vrednost, ki jo vrača tovarna, je možno
spreminjati, vrednosti ponudnika pa ne. To ne pomeni, da so ponudniki slabši od tovarn in
storitev, saj jih je zaradi tega možno konfigurirati, preden se aplikacija začne izvajati,
storitev in tovarn pa ne. Naslednja slika prikazuje primer definiranja storitve, tovarne in
ponudnika (Slika 21).
Pristop SPA za izgradnjo spletnih strani
27
Slika 21: Primer AngularJS storitve, tovarne in ponudnika
AngularJS je zelo kompleksno orodje, s pomočjo katerega njega je možna izvedba enakih
stvari na več načinov, kar pa je v nekaterih situacijah prednost, v nekaterih pa slabost.
Mnogi koncepti in funkcionalnosti, ki jih podpira, so zelo uporabni pri razvoju različnih
tipov aplikacij (ne samo SPA), zaradi česar je postal eden od najuporabnejših knjižnic; z
dodatnimi moduli, ki se še vedno razvijajo, pa postaja njegova uporabnost še širša. Glavna
slabost knjižnice je njegova velikost ter težka prilagodljivost na že obstoječe projekte, saj
če želimo neko spletno mesto spremeniti v SPA s pomočjo AngularJS-a, moramo
popolnoma prilagoditi celoten HTML.
4.4. Ostale knjižnice in ogrodja
Danes obstajajo mnoge knjižnice, ki se uporabljajo samo za razvoj SPA aplikacij, ali pa se,
čeprav niso ustvarjene v ta namen, lahko uporabijo. Knjižnice, ki smo jih podrobneje
spoznali, so v največji uporabi. To lahko vidimo že po količini dokumentacije in referenc
na spletu.
Nekatera od ostalih knjižnic in ogrodij se nahajajo v naslednji tabeli, skupaj s kratkim
opisom.
Ime Opis
KnockoutJS KnockoutJS temelji na MVVM paradigmi in se uporablja za razvoj bogatih
in dinamičnih uporabniških vmesnikov. S pomočjo knjižnice je možno
Pristop SPA za izgradnjo spletnih strani
28
preprosto manipuliranje DOM elementov, saj podpira vezanje HTML
predlog z modelom v obliki JavaScript objektov. Knjižnico lahko
uporabljamo v popolni neodvisnosti od arhitekture na strežniku in spletne
strani ne rabijo biti izdelane popolnoma z njeno pomočjo, saj se lahko
uporabi samo v delčkih strani. Vezanje med modelom in pogledom je glavna
uporabnost te knjižnice, za druge stvari, ki morajo biti zagotovljene pri SPA
aplikacijah, pa je treba uporabiti dodatne knjižnice.
Durandal Durandal je ogrodje ali predloga, ki združuje različne knjižnice z namenom
izgradnje SPA aplikacij s knjižnicami, s katerimi so razvijalci že seznanjeni.
Cilj tega je čim krajše učenje. Durandal temelji na jQuery, Require.js in
KnockoutJS knjižnicami.
Spine Spine je zelo majhna in preprosta knjižnica, napisana v CoffeScript
programskem jeziku, ki temelji na MVC načrtovalskem vzorcu. Za pisanje
aplikacij s pomočjo te knjižnice lahko uporabimo CoffeScript ali JavaScript
programski jezik. Sami koncepti in vizija knjižnice so zelo podobni
Backbon.js-ju.
Meteor.js Meteor združuje orodja, kot so jQuery, Handlebars, Node.js, websockets,
Mongod podatkovne baze ipd. Izdan je bil leta 2011, temelji pa na DPP
(angleško Distributed Data Protocol).
Batman.js Batman.js temelji na MVC načrtovalskem vzorcu in ima zelo dobro razvito
manipulacijo nad stanji aplikacije.
Tabela 2: Ostala ogrodja in knjižnice za izdelavo SPA aplikacij
Pristop SPA za izgradnjo spletnih strani
29
5. KONKRETNI PRIMER
V tem poglavju bomo prikazali potek razvoja kratke AngularJS SPA aplikacije s pomočjo
Microsoftovega Visual Studia, s tem da bomo strežniški del aplikacije napisali v C# jeziku.
5.1. Opis aplikacije
Aplikacija, s katero bomo prikazali delovanje AngularJS knjižnice ter postopek izgradnje
SPA aplikacij, bo aplikacija, v katero bo se možno prijaviti s fiksnim uporabniškim
imenom in geslom in se bo uporabljala za dodajanje opravil v bazo na strežniku. Z
aplikacijo bomo pokrili večje število različnih zasnov, ki se uporabljajo pri AngularJS
knjižnici. Prikazali bomo, kako je možno preverjati, če je uporabnik prijavljen, in mu
prikazati samo poglede, za katere je avtoriziran. Vsaka sprememba podatkov na odjemalcu
se bo samodejno, asinhrono dogajala tudi na strežniku.
Aplikacija bo imela naslednje funkcionalnosti:
prijava uporabnika,
odjava uporabnika,
dodajanje novega opravila,
brisanje posameznega opravila,
brisanje vseh opravil,
označevanje posameznih opravil kot opravljena,
označevanje vseh opravil kot opravljena,
filtriranje opravil (prikaz samo opravljenih, prikaz samo neopravljenih, prikaz
vseh).
5.2. Struktura projekta
Na začetku je v Visual Studiu treba izdelati nov projekt. Za našo aplikacijo bomo izbrali
ASP.NET MVC 4 tip projekta, ki ga bomo prilagodili namenu izgradnje SPA aplikacije.
Strukturo projekta, ki nam jo izdela Visual Studio privzeto, bomo spremenili in prilagodili.
(Slika 22).
Pristop SPA za izgradnjo spletnih strani
30
Slika 22: Struktura projekta
V mapi »App_Start« se nahajajo razredi in metode, ki se bodo zagnale na samem začetku
aplikacije, kot je na primer razred za tako imenovano zvijanje (angleško bundling), s
pomočjo česa se iz več datotek izgradi ena skupna datoteka. Statične vire, kot so slike in
CSS stili, bomo imeli v mapi »Content«. »Controllers« in »Models« so mape z MVC
krmilniki in modeli. AngularJS aplikacija se nahaja v »Scripts« mapi. Tukaj se nahaja
celotna aplikacija, ki se bo izvajala na odjemalcu, skupaj z vsemi potrebnimi knjižnicami,
ki so v podmapi »Vendor«. Poglede bomo razdelili v dve kategoriji. V mapi »Pages« se
bodo nahajali glavni pogledi, ki se bodo spreminjali skupaj z URL naslovom, v mapi
»Partials« pa so samo datoteke z delčki HTML-ja, ki se bodo uporabljali skupaj z
direktivami, kot je na primer HTML koda za glavni meni aplikacije. Na datoteko
»Index.cshtml« lahko na neki način gledamo kot na »glavno« datoteko. V njej se nahaja
začetna HTML postavitev elementov ter atribut, ki zažene AngularJS knjižnico.
»Index.cshtml« se nahaja v korenu projekta, zaradi česar je v datoteki »Web.config« treba
Pristop SPA za izgradnjo spletnih strani
31
spremeniti privzeto vrednost »webpages:enabled« ključa iz »false« na »true«, ker ta
lastnost preprečuje brskalniku neposreden dostop do ».cshtml« datotek (Slika 23).
Slika 23: Aplikacijske nastavitve v »Web.config« datoteki; »webpages:Enabled«
spremenjeno iz »false« na »true«.
Naslednja stvar, ki jo je treba narediti na samem začetku, je vključitev AngularJS knjižnice
v projekt. To bomo storili s pomočjo orodja NuGet. NuGet je odprtokoden upravljalec
paketov za .NET ogrodje in zagotavlja preprosto dodajanje različnih paketov in vtičnikov v
Visual Studio projekte. AngularJS knjižnico preprosto poiščemo s pomočjo NuGeta in jo
instaliramo. Kot privzeta bo dodana v mapo Scripts, zaradi boljše organizacije pa bomo mi
vse datoteke, ki se nam dodajo, vstavili v mapo »Scripts/Vendor/AngularJS«. Na enak
način bomo vključili še dodatne AngularJS module, ki jih bomo potrebovali.
Zadnja stvar, ki jo moramo narediti, preden se lahko lotimo programiranja same aplikacije,
je, da v datoteki »BundleConfig.cs«, ki se nahaja v mapi »App_Start«, zvijemo AngularJS
datoteke v celoto. Posebej bomo zvili datoteke knjižnice in datoteke, ki jih bomo mi sami
ustvarili (Slika 24).
Slika 24: Metoda za tako imenovano »Zvijanje« JavaScript datotek.
Pristop SPA za izgradnjo spletnih strani
32
5.3. Podatkovna in logična raven aplikacij
Podatkovna baza aplikacije bo zelo preprosta. Sestavljena bo iz ene tabele, ki bo hranila
dodana opravila za enega uporabnika. Bazo nam bo Visual Studio okolje izdelalo samo s
pomočjo tako imenovanega »code-first« pristopa. Na logični ravni se bosta nahajala dva
Web API krmilnika, ki bosta obdelovala RESTful HTTP zahteve. Na začetku bomo dodali
preprost model za opravila, ki bodo imela tri lastnosti: ID, ime in ali je opravilo opravljeno
(Slika 25).
Slika 25: Model opravila
S pomočjo izdelanega modela bo nam Visual Studio okolje izdelalo bazo samo. Preden to
lahko omogočimo, pa moramo dodati tudi kontekst. Kontekst je preslikava vseh entitet v
bazi v C# kodo. Entity Framework (ki smo ga opisali v 2. poglavju) nam bo na tak način
omogočil delo s C# objekti, namesto da se ukvarjamo s tabelami v bazi.
Ko imamo kontekst in model, nam Visual Studio lahko pomaga pri izdelavi Web API
krmilnika s pomočjo »code-first« pristopa, v ozadju pa bo izdelal tudi podatkovno bazo.
Na naslednji sliki (Slika 26) je prikazano pogovorno okno za izgradnjo novega Web API
krmilnika.
Pristop SPA za izgradnjo spletnih strani
33
Slika 26: Pogovorno okno za izdelavo Web API krmilnika
Visual Studio nam izdela krmilnik z novim objektom konteksta z vsemi metodami
(akcijami) nad tem kontekstom. Te akcije se kličejo iz odjemalca (brskalnika) s pomočjo
HTTP zahtev. Ustvarile so se metode: GET (vrne vsa opravila), GET z ID-jem (vrne
opravilo z določenim, vhodnim id-jem), POST (vnese v bazo novo opravilo), PUT (doda
novo opravilo ali ga posodobi, če ta že obstaja v bazi), ter DELETE (izbriše opravilo z
vhodnim ID-jem).
Ker se bomo osredotočili predvsem na način zagotavljanja avtentifikacije in avtorizacije na
odjemalski strani aplikacije, bo metoda za prijavo zelo preprosta. V realnem primeru je
treba poskrbeti za varnost podatkov tudi na strežniku, za to pa se uporabljajo različni
koncepti, kot so piškotki, seje in podobno. V našem primeru bomo enostavno preverili, ali
sta uporabniško ime in geslo, pridobljena z odjemalca, pravilna, in če sta, bomo vrnili
potrditev v JSON formatu.
5.4. Predstavitvena raven aplikacije (SPA)
V predstavitveno raven spada celoten SPA del aplikacija, ki je sestavljena iz JavaScript in
HTML kode. »Index.cshtml« nam bo HTML predloga, v katero bomo vključili CSS stil
aplikacije, JavaScript knjižnice ter sam atribut (ng-app), ki zagotovi, da se AngularJS
knjižnica zažene (Slika 27).
Pristop SPA za izgradnjo spletnih strani
34
Slika 27: »Index.cshtml« datoteka
»top-menu-dir«, »header-dir« in »footer-dir« so mesta, na katera bo AngularJS dodal kodo
iz direktiv, ki jih bomo sami definirali, »ng-view« pa je AngularJS direktiva, ki napove, na
katerem mestu se bodo nahajali pogledi aplikacije. Ko brskalnik prebere »ng-app« atribut,
z njim zažene tudi AngularJS knjižnico, ki pa na podlagi vrednosti atributa zažene podani
modul. V datoteki, kjer smo definirali modul, je treba zagotoviti dve stvari: obravnavanje
URL-jev in preusmerjanje v primeru, da uporabnik ni prijavljen. Vhodni parametri modula
so drugi moduli, ki se bodo uporabljali v njem. Naslednji dve sliki prikazujeta definicijo
modula (Slika 28, Slika 29).
Pristop SPA za izgradnjo spletnih strani
35
Slika 28: »app« modul − prvi del
Slika 29: »app« modul − drugi del
Pristop SPA za izgradnjo spletnih strani
36
V metodi »config()« določimo, kateri krmilnik in predloga se bosta sprožila in pri katerem
URL-ju. Ko v brskalnik vnesemo na primer »{domena}/todoList« naslov, se bo v mojem
primeru sprožil »TodoListCtrl« krmilnik in prikazala se bo predloga, ki se nahaja v mapi
»/Views/Pages/TodoList.html«. Če ne vnesemo enega od podanih naslovov, bomo
preusmerjeni na »TodoList« pogled zaradi »otherwise()« metode. Parameter
»authenticate« se uporablja v metodi »on«, kjer se preverja, če je uporabnik prijavljen,
preden bo preusmerjen na določen pogled. Podatek, če je uporabnik prijavljen, hranimo v
storitvi, postavimo pa ga na »true« s pomočjo prijave.
V aplikaciji potrebujemo 4 storitve, ki jih bomo definirali v posebnem »services« modulu.
Storitev »TodosService« (Slika 30) ima metode za delo s storitvami, ki se bodo asinhrono
prožile in pošiljale HTTP zahteve na strežnik. »AuthService« (Slika 31) se uporablja za
hranjenje podatka o tem, ali je uporabnik prijavljen ali ni. »UrlService« (Slika 32)
potrebujemo, da lahko hranimo podatek o URL-ju pogleda, ki se bo prikazal, preden se
sproži avtentifikacija pri prijavi.
Pristop SPA za izgradnjo spletnih strani
37
Slika 30: Definicija modula »services« in storitve »TodosService«
Slika 31: »AuthService« storitev
Pristop SPA za izgradnjo spletnih strani
38
Slika 32: »UrlService« storitev
Prijava ima posebno definiran krmilnik, v katerem se nahaja model za vnesene podatke in
metoda za prijavo (Slika 33). Metoda pošlje podatke na strežnik, nato pa na podlagi
vrnjenih podatkov preusmeri uporabnika na določen pogled. Če je prijava uspešna, je
uporabnik preusmerjen na pogled, na katerega je na začetku (preden je bil preusmerjen na
prijavo zaradi tega, ker je hotel priti na pogled, ki zahteva avtentifikacijo) hotel priti, če pa
ni, pa je preusmerjen nazaj na pogled za prijavo.
Slika 33: Krmilnik za prijavo
Pristop SPA za izgradnjo spletnih strani
39
Krmilnik za odjavo na podlagi uporabnikovih akcij (če klikne, da želi potrditi odjavo)
nastavi lastnost v »AuthService« storitvi na »false« in preusmeri uporabnika na prijavni
pogled (Slika 34).
Slika 34: Krmilnik za odjavo
Delo z opravili ima najkompleksnejši pogled in krmilnik. Pogled se nahaja na naslednjih
treh slikah (Slika 35, Slika 36, Slika 37), za tem pa je podrobna razlaga.
Slika 35: Pogled za delo z opravili − prvi del
Pristop SPA za izgradnjo spletnih strani
40
Slika 36: Pogled za delo z opravili − drugi del
Slika 37: Pogled za delo z opravili − tretji del
V krmilniku so uporabljene različne direktive, ki jih AngularJS že ima definirane, in te so:
»ng-controller« – direktiva določi, v katerem JavaScript krmilniku se nahaja logika
za izvajanje.
»ng-submit« – direktiva prepreči privzeto pošiljanje (angleško submit) obrazca na
strežnik. Kot vrednost atributa podamo ime funkcije, ki se bo izvedla, ko pride do
pošiljanja obrazca na strežnik, lahko v njej validiramo podatke, ki bodo poslani,
nato pa jih »ročno« pošljemo.
Pristop SPA za izgradnjo spletnih strani
41
»ng-model« – direktiva poveže neko vnosno polje z objektom v JavaScript kodi.
Na tak način kakršnakoli sprememba vrednosti v vnosnem polju spremeni vrednost
objekta in obratno.
»ng-disabled« / »ng-enabled« – preveri vrednost objekta, ki je podan kot vrednost
atributa, in če je ta »true« / »false«, omogoči / onemogoči element, na katerem se
nahaja.
»ng-click« – sproži funkcijo, ki je podana kot vrednost atributa, ko uporabnik
klikne na element na katerem se atribut nahaja.
»ng-change« – sproži funkcijo, ki je podana kot vrednost atributa, ko se spremeni
vrednost vnosnega polja, na katerem se atribut nahaja.
»ng-repeat« – del HTML kode, ki se nahaja znotraj elementa, na katerem se nahaja
atribut, se izpiše toliko krat, kot definiramo v vrednosti atributa. V programskih
jezikih je ekvivalentni gradnik zanka.
»ng-style« – če pogoj v vrednosti atributa vrne »true«, doda podan CSS stil na
element na katerem se atribut nahaja.
»ng-show« – če ima vrednost spremenljivke, ki je podana kot vrednost atributa,
vrednost »true«, se element, na katerem se atribut nahaja, prikaže; v nasprotnem pa
se prikrije.
Prikazan pogled je povezan s »TodoListCtrl« krmilnikom, v katerem so definirane metode
za manipulacijo nad prikazanimi podatki. »TodoListCtrl« vsebuje metode za: dodajanje
opravil, brisanje vseh opravil, brisanje opravljenih opravil, spreminjanje opravil, brisanje
posameznih opravil, označevanje opravil kot »opravljena«, filtriranje opravil, funkcijo za
vračanje števila opravljenih opravil ter za vračanje števila neopravljenih opravil. Te
funkcije smo dodali na objekt »$scope«. Na tak način so funkcije povezane s pogledom in
se lahko kličejo iz HTML kode neposredno.
Metoda »GetTodos()« (Slika 38) se sproži na samem začetku izvajanja krmilnika in služi
za pridobivanje vseh opravil iz strežnika s pomočjo »TodosService« storitve. »then« del
pomeni, da bo se telo funkcije izvedlo šele, ko podatki pridejo iz strežnika, »promise« pa
so dejanski podatki v JSON formatu. Ko so podatki pridobljeni, se shranijo v model in se
povežejo s pogledom.
Pristop SPA za izgradnjo spletnih strani
42
Slika 38: Definiranje modula »TodoListCtrl« in metoda za pridobivanje vseh opravil iz
strežnika
S pomočjo »$watchCollection« metode (Slika 39) se opazujejo spremembe nad »todos«
objektom v modelu. Če je število opravil v njem večje od 10, se bo spremenljivka
»maxAdded« postavila na »true«, v nasprotnem pa na »false«. S pomočjo te spremenljivke
se v pogledu preverja, ali je dodano maksimalno možno število opravil, in če je, se vnos
novih onemogoči.
Slika 39: »$watchCollection« metoda
»addTodo« metodo (Slika 40) prožimo iz pogleda, ko vnesemo novo opravilo v vnosno
polje, ona pa na začetku preveri, če je karkoli vneseno. Če je, s pomočjo »TodosService«
storitve pošlje novo opravilo na strežnik, vnosno polje pa sprazni.
Pristop SPA za izgradnjo spletnih strani
43
Slika 40: »addTodo« metoda
Brisanje opravil je možno na tri načine. Možno je izbrisati posamezno opravilo, vsa
opravila ali samo opravljena opravila. Metoda »delete« (Slika 41) izbriše posamezno
opravilo s pomočjo njegovega ID-ja; »deleteAll« (Slika 42) izbriše vsa opravila s pomočjo
zanke; »deleteCompleated« (Slika 43) pa izbriše samo opravila, ki imajo lastnost »Done«
na »true«, nato pa še enkrat pridobi vsa opravila iz strežnika.
Slika 41: »delete« metoda
Slika 42: »deleteAll« metoda
Pristop SPA za izgradnjo spletnih strani
44
Slika 43: »deleteCompleted« metoda
Ko kliknemo na gumb za označevanje vseh opravljenih opravil, se sproži metoda
»completeAll« (Slika 44), ki vsem opravilom spremeni lastnost »Done« na »true«. Za
spremembo lastnosti »Done« na posameznem opravilu ne potrebujemo posebne funkcije,
saj je ta vrednost neposredno povezana s pogledom in se pri vsaki spremembi na pogledu
(klik na gumb) sproži tudi metoda »update« (Slika 45), ki avtomatsko spremeni vrednost
tudi na strežniku. Metoda »update« se uporablja tudi za avtomatsko spremembo imena
lastnosti na strežniku, saj bo se ona sprožila pri kakršnikoli spremembi te lastnosti na
pogledu.
Slika 44: »completeAll« metoda
Pristop SPA za izgradnjo spletnih strani
45
Slika 45: »update« metoda
Metodi »steviloPreostalih« (Slika 46) in »steviloOpravljenih« (Slika 46) vračata število
opravil, ki imajo lastnost »Done« na »true« ali »false« in se uporabljajo samo za prikaz teh
podatkov.
Slika 46: »steviloPreostalih« in »steviloOpravljenih« metode
Spremenljivka »filter« (Slika 47) hrani vrednost, ki določa, katera opravila so trenutno
prikazana. Če je vrednost »vsa«, bodo prikazana vsa opravila, če je vrednost »opravljena«
bodo prikazana samo opravljena opravila, če pa je vrednost »neopravljena«, pa samo
Pristop SPA za izgradnjo spletnih strani
46
neopravljena opravila. Ker je vrednost spremenljivke vezana s pogledom s pomočjo »ng-
model« direktive, jo lahko preprosto spreminjamo s pomočjo klikov na ustrezne gumbe v
pogledu. »showTodo« (Slika 47) metodo kličemo iz »ng-show« direktive. Metoda preveri
vrednost spremenljivke »filter« in vrne »true«, če je dovoljen prikaz podanega opravila, ali
»false«, če ni.
Slika 47: Metode in lastnost za filtriranje opravil
V aplikacijo smo dodali še direktive za HTML dele, ki so definirani v »Index.cshtml«
datoteki (na enak način, kot smo prikazali v prejšnjem poglavju), CSS stil ter dodatne
poglede. S tem je pa tudi preprost primer SPA aplikacije zaključen.
Pristop SPA za izgradnjo spletnih strani
47
6. ZAKLJUČEK
Namen diplomskega dela je bila predstavitev SPA aplikacij, njihovih konceptov ter
tehnologij, ki se uporabljajo v njihovem razvoju. V diplomski nalogi smo pokrili ene od
glavnih pogledov na SPA aplikacije. V prvi polovici smo se seznanili z njihovim
teoretičnim ozadjem, nato pa smo raziskali načine njihove implementacije. Drugo poglavje
ponuja predstavitev tehnologij, ki jih je treba poznavati, preden se je sploh možno lotiti
izdelave SPA aplikacij. Osredotočili smo se na Microsoftovo ozadje. Naslednje poglavje se
ukvarja s teoretičnim ozadjem SPA aplikacij. Na začetku poglavja smo se ukvarjali z
vprašanjem, kaj sploh SPA aplikacije so, nato pa smo si pogledali arhitekturo le-teh. Četrto
poglavje je prikaz funkcionalnosti, konceptov, prednosti in slabosti nekaterih ogrodjih in
knjižnic, ki se uporabljajo za razvoj SPA aplikacij. Osredotočili smo se predvsem na
Backbone.js, Ember.js in AngularJS tehnologije. V petem poglavju pa je za konec prikazan
praktičen preprost primer, ki smo ga izdelali s pomočjo AngularJS knjižnice.
Slovenske literature o SPA aplikacijah je na razpolago zelo malo, saj je to trend, ki se je
začel v veliki meri razvijati v zadnjih petih letih, ampak postaja z vsakim dnevom vse bolj
in bolj popularen. Diplomska naloga je lahko slovenskim razvijalcem vstopna točka za
njegovo spoznavanje.
Pristop SPA za izgradnjo spletnih strani
48
7. VIRI, LITERATURA
[1] AngularJS, What is a Module?, Dostopno na:
https://docs.angularjs.org/guide/module
[2] Backbone.js, Dostopno na:
http://backbonejs.org/
[3] Backbone Tutorials, What is a view?, Dostopno na:
http://backbonetutorials.com/what-is-a-view/
[4] Code Project, Differences between MVC and MVP for Beginners, Dostopno na:
http://www.codeproject.com/Articles/288928/Differences-between-MVC-and-MVP-for-
Beginners
[5] Code School, Angular, Backbone, or Ember: Which is Best for your Build, Dostopno
na: http://blog.codeschool.com/post/85819292538/angular-backbone-or-ember-which-is-
best-for-your
[6] Computer Hope, Web page, Dostopno na:
http://www.computerhope.com/jargon/w/webpage.htm
[7] Emberjs, Core concepts, Dostopno na:
http://emberjs.com/guides/concepts/core-concepts/
[8] Emberjs, Users, Dostopno na:
http://emberjs.com/ember-users/
[9] Galloway J., Haack P., Wilson B., Allen K. S., Professional ASP.NET MVC 3, John
Wiley & Sons, Inc. Indianapolis, Indiana, 2011
[10] Krutisch, J., The Single Page App Jumpstart- Understanding and Mastering
JavaScript Applications, Leanpub, 2013
[11] Learn REST: A Tutorial, Dostopno na:
http://rest.elkstein.org/
[12] Microsoft Developer Network, LINQ (Language-Integrated Query), Dostopno na:
http://msdn.microsoft.com/en-us/library/bb397926.aspx
[13] Smashing Magazine, An In-Depth Introduction To Ember.js, Knebel J., Dostopno na:
http://www.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/
[15] tutorialspoint, JavaScript Overview, Dostopno na:
http://www.tutorialspoint.com/javascript/javascript_overview.htm
[16] w3schools, HTML5 Introduction, Dostopno na:
http://www.w3schools.com/html/html5_intro.asp
[17] w3schools, HTML Introduction, Dostopno na:
http://www.w3schools.com/html/html_intro.asp
Pristop SPA za izgradnjo spletnih strani
49
[18] Wikipedia, .NET Framework, Dostopno na:
http://en.wikipedia.org/wiki/.NET_Framework
[19] Wikipedia, ADO.NET Entity Framework, Dostopno na:
http://en.wikipedia.org/wiki/ADO.NET_Entity_Framework
[20] Wikipedia, AngularJS, Dostopno na:
http://en.wikipedia.org/wiki/AngularJS
[21] Wikipedia, ASP.NET, Dostopno na:
http://en.wikipedia.org/wiki/ASP.NET
[22] Wikipedia, ASP.NET Razor, Dostopno na:
http://en.wikipedia.org/wiki/ASP.NET_Razor_view_engine
[23] Wikipedia, Cascading Style Sheets, Dostopno na:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
[24] Wikipedia, Ember.js, Dostopno na:
http://en.wikipedia.org/wiki/Ember.js
[25] Wikipedia, JavaScript, Dostopno na:
http://en.wikipedia.org/wiki/JavaScript
[26] Wikipedia, JQuery, Dostopno na:
http://en.wikipedia.org/wiki/JQuery
[27] Wikipedia, JSON, Dostopno na:
http://en.wikipedia.org/wiki/JSON
[28] Wikipedia, Model-view-controller, Dostopno na:
http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
[29] Wikipedia, Model View ViewModel, Dostopno na:
http://en.wikipedia.org/wiki/Model_View_ViewModel
[30] Wikipedia, Single-page application, Dostopno na:
http://en.wikipedia.org/wiki/Single-page_application
[31] Wikipedia, Website, Dostopno na:
http://en.wikipedia.org/wiki/Website