Velik broj sudionika predavanja nam govori kako je JavaScript i dalje aktualan i gotovo neizbježan u razvoju web aplikacija. Budući da čisti JavaScript zna biti vrlo kompleksan i težak za održavanje, u razvoju aplikacija koriste se razni JavaScript okviri (frameworks) i biblioteke (libraries).

Framework vs. Library

Važno je znati razliku između frameworka i libraryja.

Framework definira okvir u kojem se razvija aplikacija, dok library definira klase/metode koje rade specifične operacije. Ono što ih ponajviše razlikuje zove se Inversion of Control (IoC). Kada pozivate metodu iz libraryja, vi imate kontrolu - za razliku od frameworka, gdje on poziva vaš kod.

AngularJS & Angular2

Možemo reći da je AngularJS postavio temelje u razvoju single page aplikacija. AngularJS pruža mogućnost proširenja standardnog HTML-a kroz svoje direktive - ima već spremno rješenje za dvosmjerno vezivanje podataka (two-way data-binding), što je odlično za izradu interaktivnih aplikacija. Problemi se pojavljuju kod debugiranja $scope-a. Angular2 je vrlo dobro riješio taj problem - uklonio je $scope. Osim toga, Angular2 donosi još promjena - budući da je napisan u TypeScript-u, u istom se preporuča i razvoj. Još jedna novost je da postaje modularan; sastoji se od komponenti i naspram svog starijeg brata, pokazuje izvrsne performanse. Mala zamjerka je što nema gotovo rješenje za dvosmjerno vezivanje podataka, nego ga se mora postaviti pomoću tzv. banana-in-the-box sintakse - [( )].

React

React je library - točnije view library. Vrlo je jednostavan, temelji se na komponentama i ima odlične performanse bez puno optimizacije. Njegovoj jednostavnosti pridonosi i to što je samo view library, dakle odstupa od klasičnog MVC obrasca. Upravo to je razlog zbog kojeg zahtjeva malo konfiguracije za korištenje u sklopu određenih frameworka, ali to se u nekim slučajevima može pokazati i kao veliki problem. Komponente Reacta sadržavaju unutarnje stanje (state) koje prilikom promjene poziva render() metodu, koja dalje ponovno renderira komponentu s novim, promijenjenim stanjem. Važno je za napomenuti da React koristi VirtualDOM, koji je isti kao i DOM koji se prikazuje korisniku. VirtualDOM Reactu omogućava lakšu manipulaciju njegovim komponentama - nakon što napravi promjenu na VirtualDOM-u, React usporedi stvarni DOM s virtualnim i ažurira ga po potrebi.

Elm

Kratko i jasno - Elm je funkcionalni jezik. Ukoliko nikad niste imali doticaja s funkcionalnim jezicima, Elm bi vam mogao biti težak za popratiti jer se razlikuje od većine alata koji se danas koriste. Ono u čemu Elm dominira jesu performanse i njegov prevoditelj (compiler). Elm nema runtime exceptiona. Da, nema ih! S druge strane compile time greške sadrže prijateljske poruke koje će vam reći gdje ste točno pogriješili i što trebate učiniti kako bi grešku otklonili. Elmov prevoditelj za prikazivanje u browseru sve prevodi u JavaScript, no problem je što se sve generira u jednu JavaScript datoteku.

Ember

Još jedan od poznatijih frameworka s velikom zajednicom je Ember. Krasi ga gotovo rješenje za dvosmjerno vezivanje podataka, te koristi Handlebars sustav predložaka. Za razliku od AngularJS i Angular2, Ember je baziran na konvencijama - Convention over configuration, koje svakako morate naučiti. Za korištenje Embera potreban je jQuery i Handlebars. Iako ostaje u sjeni nekih frameworka, Ember i dalje koristi veliki broj ljudi.

Backbone

Ovo je framework lake kategorije koji se koristi za strukturiranje web aplikacije pomoću modela, kolekcija i mnogih drugih stvari. Osim toga, aplikaciji daje modularnost, što pospješuje održavanje i daljnji razvoj. Backbone kao hard dependency sadržava i Underscore.js (napravio ih je isti tip). Budući da pruža samo najosnovnije za strukturiranje aplikacije - ukoliko niste pažljivi, vrlo lako možete naići na veliku manu Backbonea kao što je curenje memorije (memory leaking).

VueJS

VueJS je view library nalik Reactu. Također je baziran na komponentama te koristi VirutalDOM. Iako iza sebe nema tim poput Reacta, pokazao se kao izuzetno stabilan. Za razliku od Reacta, kod VueJS-a nije potrebno brinuti o stanju komponente - on to radi za vas. Prilikom dodjeljivanja JavaScript objekta instanci Vue-a, on svim propertyjima dodjeljuje gettere i settere, te komponenti dodjeljuje instancu watchera koji brine da su svi podaci ispravno prikazani korisniku čim se promijene.

MeteorJS

Ovo je sve-u-jednom framework za razvoj aplikacija na više platformi (cross-platform applications). MeteorJS, za razliku od ostalih frameworka navedenih ovdje, koristi JavaScript u backendu i frontendu. Također pruža podršku za razvoj mobilnih (iOS i Android), kao i web aplikacija. Odličan je za razvoj real-time aplikacija i sadrži smart-package pakete koji uvelike olakšavaju razvoj. Smart-package paketi sadržavaju svu logiku koja je potrebna za određene dijelove aplikacije - uzmimo za primjer membership (članstvo). Ukoliko želite dodati membership u vašu aplikaciju, u Meteorov CLI je potrebno upisati: meteor add accounts-ui i imat ćete implementiran kompletan membership modul. Na većim aplikacijama MeteorJS zna zakazati u smislu performansi.

KnockoutJS

KnockoutJS je library lake kategorije koji poštuje HTML i CSS u smislu da ne proširuje sintaksu niti dodaje nepotrebne klase. Koristi deklarativno dvosmjerno vezivanje podataka i zasnovan je na MVVM obrascu. Sve JavaScript varijable su zapravo funkcije - točnije KO Observables. Knockout koristeći observables prati promjene podataka u modelima i sukladno tome osvježava UI. Također, observables omogućavaju eksplicitno pretplaćivanje što omogućava dodatnu kontrolu nad podacima u trenutku promjene. Iako poštuje HTML, Knockout ga može vrlo lako unerediti, te se u njemu kasnije može biti teško snaći.

Aurelia

Aurelia je framework napisan u ECMAScript 2016, što znači da dolazi s modulima, klasama, dekoratorima i ostalim. Iako ju često uspoređuju s Angular2, od njega se uvelike razlikuje. Aurelia se sastoji od nekoliko manjih libraryja koji zajedno stvaraju robustan framework, a koji se mogu koristiti odvojeno i po potrebi. Također se može razvijati koristeći TypeScript, ES5 ili ECMAScript 2015. Dolazi s jakim binding sistemom koji sadrži gotovo rješenje za dvosmjerno vezivanje podataka. Zbog svoje jednostavnosti, fleksibilnosti, opširne dokumentacije i mogućnosti koje pruža, Aurelia je zadobila veliku pažnju zajednice, a neki je nazivaju i frameworkom budućnosti.

Polymer.js

Polymer.js je library temeljen na komponentama. Ono što ga razlikuje od ostalih jesu njegovi elementi - Polymer elementi. Svako svojstvo (property) unutar Polymer elementa je moguće pratiti (observable) - što je velika prednost jer se možemo pretplatiti na svako svojstvo i reagirati u odnosu na njegovu promjenu. Kod kreiranja Polymer elementa obavezan je znak "-". Ovaj framework dolazi sa već spremnim rješenjem za dvosmjerno vezivanje podataka. Polymer koristi svoju implementaciju Local DOM-a koju nazivaju Shady DOM. Budući da se sastoji od robusnih elemenata, na mobilnim uređajima i većim aplikacijama radi sporije, a veliki nedostatak je i manjak dokumentacije, te manja zajednica.

Koji je najbolji?

Sve navedeno ovdje zasnovano je na osobnom mišljenju. Teško je izdvojiti i reći “Ovaj je najbolji”. Uvijek će postojati netko tko se neće složiti, tako da odgovor na ovo pitanje ostavljam vama.

Što se tiče performansi nekih frameworka, možete ih pogledati na repainter aplikaciji. Bitno je za napomenuti da ovo nije referentni test performansi.

Download attachmenta