Single Page Apps — uvod u Ember.js

Iz godine u godinu raste broj dostupnih frejmvorka (okvira) koji u suštini predstavljaju apstrakciju putem kojeg softver zapravo pruža programeru generičke funkcionalnosti koje on zatim selektivno može modifikovati. Dakle, smanjuju količinu neophodnog koda i količinu vremena koje bi programer morao da provede pišući funkcije koje je već neko napisao što utiče na povećanje efikasnosti i rast produktivnosti u razvoju. Upravo to ih čini gotovo neizbežnim za startape koji po pravilu imaju za cilj da isporuče svoj proizvod što pre moguće.

Kako su okviri sve češće korišćeni i sve interesantniji odlučili smo da u narednom periodu pišemo upravo o njima. Počinjemo od Embera, open-source JavaScript frejmvorka za razvoj single page web aplikacija na klijent strani. U slične svrhe se koriste okviri kao što su Angular i Backbone, međutim o Emberu se možda i najmanje zna, a u poslednje vreme postaje sve popularniji.

Ovaj okvir se pojavio krajem ne tako davne 2011. godine što ga čini prilično mladim u svetu frejmvorka. U trenutku kada se pojavio, Angular je postojao već dve godine, dok je Backbone napunio jednu. Trenutno aktuelna verzija je Ember 1.8 koju možete preuzeti na zvaničnoj stranici.

Kako bi Ember bio što jasniji ne bi bilo loše objasniti i šta su zapravo single page aplikacije o čemu je sa nama je govorio Dušan Barać, docent sa Katedre za elektronsko poslovanje Fakulteta organizacionih nauka:

SPA (Single Page Aplications) su definitivno jedan od najbitnijih trendova danas kada je u pitanju web development. Ideja single page aplikacija je da se UI i aplikaciona logika premeste sa serverskog na klijentski deo aplikacije. Ove aplikacije zapravo sav potreban kod (HTML, CSS , JS..) povlače u prvom i jedinom učitavanju stranice, nakon čega se dodatni sadržaj dinamički učitava ako za tim ima potrebe. Svaki naredni zahtev za otvaranje nove stranice u aplikaciji generiše novi view.

Pomoću takozvanog rutiranja aplikacija može da upravlja prelaskom korisnika sa jedne na drugu stranicu, tj. sa view-a na view. U trenutku kada se klikne na neki URL u okviru aplikacije router ga prevodi u view koji treba da bude prikazan na odgovarajućem mestu.

Prednost korišćenja SPA je pre svega njihova brzina odgovora koja je ekvivalentna brzini kod desktop aplikacija, pored toga, mogu da rade i u offline režimu i imaju sposobnost samostalnog osvežavanja. Značajno je to što je količina podataka koja se razmenjuje svedena na minimum.

Ključni koncepti na kojima se Ember zasniva:

Templejti – napisani su u Handlebars templejting jeziku i opisuju korisnički interfejs aplikacije. Svaki templejt je podržan modelom i u slučaju da se izvrše izmene na samom modelu, templejt se automatski ažurira. Kao dodatak na klasičan HTML templejti sadrže tzv. expressions koji uzima informacije iz modela i stavlja ih u HTML, outlets u kojima se “skladište” templejti, jer ruter može usmeriti korisnika na neki drugi templejt dok se korisnik kreće kroz aplikaciju.

Ruter – prevodi URL u seriju ugnježdenih templejta, od kojih svaki u pozadini ima svoj model. Dok se templejti i modeli menjaju za korisnika, Ember automatski ažurira URL u browseru.

Model – objekat je zadužen za čuvanje persistent stanja aplikacije. HTML je zadužen da ga prevede u korisnički interfejs. Dok se  model obično učitava preko HTTP JSON API-a, Ember-u nije bitno za koji se backend odlučite.

Za jednostavnije aplikacije može se koristiti jQuery za učitavanje JSON podataka sa servera, a zatim te objekte koristiti kao modele. Ipak, korišćenje biblioteke koja se bavi pronalaženjem modela, izmenama i čuvanjem istih na serveru kod se može dosta uprostiti a samim tim moguće je poboljšati i performanse aplikacije.

Upravo u tu svrhu mnoge aplikacije koriste Ember Data biblioteku koja olakšava pronalaženje modela, izmene i pamćenje na serveru, omogućava unapređenje performansi, kao i čuvanje novih zapisa na klijentu.

Ruta – objekat koji daje templejtu do znanja koji model treba da prikaže.

Kontroler – obejekat koji sadrži aplikaciono stanje. Templejt opcionalno može imati i kontroler kao dodatak na model i može da povlači sadržaj iz oba.

Ember.js = MVC ~ MVVM ~ MVP

Ember je inicijalno baziran na MVC paternu, ali u zavisnosti od implementacije programera, moze biti neka varijacija MVC-a tj. MVVM, MVP. Kao  kod većine frejmvorka i ovde je zastupljen MVC (Model View Controler) koji razdvaja prezentaciju i poslovnu logiku. Prosto rečeno model je zadužen za klase koje služe za čitanje, dodavanje i ažuriranje baze podataka. View je namenjen korisniku, dok controller služi kao posrednik između model-a, view-a i ostalih resursa za procesiranje HTTP zahteva.

MVVM je specifična implementacija MVC-a namenjen pre svega aplikacijama sa kompleksnim UI funkcionalnostima. Razlika je najveća u View sloju koji ima malo aktivniju ulogu.

Zajednica

Ono što je svakako bitna stavka za svakog developera je zajednica okupljena oko u ovom slučaju Embera. Jer zajednica pruža mogućnost bržeg učenja, pronalaženja relevantnih materijala a zašto ne i potencijalnih saradnika.

Ona svakim danom postaje veća i od ove nedelje i kod nas postoji udruženje Ember Srbija koje je pokrenuto na inicijativu Laboratorije za elektronsko poslovanje FON-a i softverske kuće FSD. Udruženje “Ember Srbija” sa ciljem širenja znanja, edukacije o mogućnostima primene, unapređenja i promovisanja Ember.js tehnologije u razvoju veb aplikacija i poslovnih rešenja zasnovanih na vebu.

Još jedan pokazatelj rasta interesovanja za Ember je velika posećenost radionica za početnike koje je u okviru projekta S2S organizacije FONIS održao Mihailo Milojević.

Nedostaci

Naravno, pored svih prednosti koje dolaze sa korišćenjem Embera u razvoju SPA, postoje i određeni nedostaci među kojima se ističu problemi vezani za SEO (optimizacija za pretraživače). Uz to, ponekad činjenica da se se celokupna aplikacija učitava u samom startu može da bude problematično sa vremenskog aspekta. Koliko god stranica bilo učitano u okviru aplikacije, iako Ember automatski ažurira URL u browseru ipak u istoriji pretraživača ostaje samo jedan link. Takođe, javljaju se i određeni bezbednosni problemi.

*

Ember je svakako frejmvork vredan pažnje i biće verovatno vrlo blizak svakome ko ima iskustva sa MVC programiranjem u bilo kom objektno orijentisanom jeziku. Ono što ga izdvaja od konkurenata je manjak količine suvišnog koda što je posledica filozofije “konvencija ispred konfiguracije”. Verovatno i najbitnije, može se pohvaliti odličnim performansama što svakako čini krajnjeg korisnika srećnim.

Naravno, postoje slučajevi u kojima postoje bolja rešenja za razvoj, kao što su npr. gore pomenuti Angular i Backbone. Treba imati na umu da je mnogo je bitnije kakva se aplikacija pravi nego pomoću čega. Njena svrha, karakteristike i specifičnosti određuju koji okvir odabrati.