Napredni JavaScript

Napredni JavaScript: biblioteke i razvojne cjeline (libraries & frameworks)

Kroz nekoliko godina programiranja u JavaScriptu pratim razvoj najprije JavaScript biblioteka (library), a zadnjih godina i kompletnih razvojnih cjelina (ili kostura – framework). JavaScript već dugo više nije skriptni jezik, bez obzira na ime i bez obzira što se kod ne kompajlira jer se ne radi o pukom popisu operacija koje računalo na kojem se izvodi treba odraditi, što je principijelna odrednica skriptiranja. Na stranu definicije i razlike koje se tiču kompajliranja, moderni JavaScript je puno bliži objektno orijentiranom programiranju nego skriptiranju.


 Primjer koji dobro pokazuje koliku fleksibilnost i
efikasnost pružaju JavaScript biblioteke - interaktivna
štoperica programirana u JavaScriptu (AngularJS) i iscrtana
pomoću SVG-a.

Razvoj naprednog JavaScript programiranja donio je najprije biblioteke koje drastično olakšavaju rad u JavaScriptu u području za koje su razvijene. Najpoznatiji primjer je jQuery koji je razvijen za web dizajn, kao pomoć za dohvat i manipulaciju DOM elemenata. Pri tome je vrlo jednostavno koristiti se naprednim stvarima kao što su animacije ili event management. Primjere ovoga možete naći u tekstu o jQuery biblioteci koji sam napisao kao mali uvod u njegove mogućnosti prije nekoliko godina. Sada se mogu pohvaliti i time da sam svojedobno dobro analizirao situaciju i odabrao biblioteku koja tada nije bila najpopularnija, ali je imala potencijal. Danas je jQuery apsolutno najpopularniji, i služi čak kao odličan temelj za izradu razvojnih cjelina (frameworka).

Razvojne cjeline, kosturi ili izvorno frameworks se danas razvijaju i traže svoj put do optimuma na isti način kao što su se razvijale biblioteke 2006. godine kada sam analizirao scenu JavaScript biblioteka. I sada postoji više filozofija i principa, i svi imaju dobre argumente. Ali ja uvijek vjerujem u, budistički formulirano, srednji put. Kako sam tada odabrao jQuery koji je nudio puno (ne sve) u razumnim okvirima što se tiče veličine (bio je i ostao među kompaktnijim bibliotekama), tako sada vjerujem da najveće šanse za dugoročni uspjeh ima AngularJS framework. Zanimljivo je da je dio AngularJS -a implementirao dio jQuery-ja s kojim je potpuno kompatibilan. Još jedna velika prednost AngularJS-a je dvosmjerno povezivanje podataka koje omogućava automatsku sinkronizaciju prikazanih podataka sa onima u memoriji ili bazi podataka.

JavaScript biblioteke

Iako su JavaScript biblioteke postojale u principu otkad postoji i sam JavaScript došlo je vrijeme da takve biblioteke postanu sveprisutne. Istovremenim razvojem Web2.0, AJAX-a i modernih web aplikacija (kao što su Google Mail ili Google Docs&Spreadsheets) počelo se o tim bibliotekama sve više pričati. Očito je da se konstantno napredovanje tehnologija i softvera odrazilo i na ponudu web aplikacija – sve više stvari je moguće ponuditi korisnicima kroz web stranice i prozor browsera. Najbolja ilustracija stupnja razvoja današnjih web aplikacija je da se kroz web sučelje nude funkcionalne verzije konvencionalnog softvera kao npr. Microsoft Worda i Excela.

Većina osvježenja na tim novim dinamičnim i interaktivnim stranicama je napravljena pomoću neke od JavaScript biblioteka koje omogućuju fleksibilno i jednostavno kreiranje takvih sadržaja. Teško je uopće pojmiti koliko je JavaScript  značajan u web aplikacijama dok ne razmislite o činjenici da već godinama Google Sheets koristi JavaScript čak i za iscrtavanje samog dokumenta.

Osobno iskustvo

Kao i većina autora web xHTML stranica koje sadrže  JavaScript i ja sam primijetio da mi u svakom novom projektu većinom zatrebaju iste ili vrlo slične funkcije i uglavnom sam ih jednostavno kopirao u svaku slijedeću skriptu. Dugo radeći u JavaScriptu primijetio sam da čak osnovna radnja kao što je dohvaćanje određenog DOM elementa traži dosta pažnje i upisivanja programskog koda. Iako moje stranice tada nisu imale neke jako ušminkane efekte i metode, imale su relativno složen sustav navigacijskog izbornika kojeg sam sam zamislio i programirao (svjestan da će to biti naporno i da moje rješenje neće biti savršeno, ali i da ću jedino na taj način naučiti nešto više o JavaScriptu koji me je zanimao). U vrijeme razvoja ovih stranica (ljeto 2005. godine) sam već iza sebe imao jedan web projekt u DHTML-u i osnovno znanje programiranja u C-u (programski jezik koji ima istu sintaksu kao i JavaScript, s razlikom što je JavaScript fleksibilan što se tiče tipova varijabli).

Tako sam s vremenom za dohvaćanje DOM elementa jednostavno razvio svoju metodu: umjesto korištenja document.getElementById(“id”) koristio sam metodu sa sintaksom bajID(“id”) definiranu u glavnoj skripti:

function bajID(id){return element=document.getElementById(id)}

Možda se na prvi pogled čini trivijalnim i pretjeranim, ali samo ova jednostavna metoda mi je poprilično ubrzala rad sa JavaScriptom za vrijeme kreiranja web stranica. Osim ove metode razvio sam još neke koje su pojednostavnile dinamičko umetanje HTML koda u stranice, sakrivanje e-mail adresa od spamera itd.

Nakon nekog vremena moje se znanje o JavaScriptu povećalo, pa sam shvatio da neke od svojih metoda mogu napisati da budu još brže i efikasnije. Nakon toga je sve implementacije trebalo izmijeniti i unaprijediti. Nakon dvije godine sam shvatio da već dobro vladam JavaScriptom i da je vrijeme da stvari unaprijedim. Odluka je od početka bila takva da idem na implementaciju neke od biblioteka umjesto da jednostavno kopiram pojedinačne metode koje je netko bolji od mene u JavaScriptu objavio kao pouzdane. Zbog toga sam počeo proučavati kakve će mi prednosti donijeti neka od mnogobrojnih JavaScript biblioteka koje su se nametnule kao jedino rješenje koje ispunjava sve ono što ja tražim (fleksibilnost, olakšavanje i ubrzavanje rada pri pisanju skripti, pouzdanost koda, brzo izvođenje, pridržavanje standarda i malo zauzeće memorijskog prostora).

Nakon implementacije jQuery biblioteke popravio mi se apetit, srce jače tuče i bolje vidim! Ne baš doslovno, ali primjerice skriptu koja automatski pokupi naslove i podnaslove u tekstu stranice, generira unutarnje linkove i ponudi ih u pomoćnom izborniku (ispod glavnog izbornika) napravio sam za nekih 45 minuta. I glavni izbornik tadašnje web stranice je doživio (r)evoluciju: dok je prvo rješenje u JavaScriptu iznosilo 5-6 sati programiranja (i debugiranja) u 42 linije koda zamijenjeno je za 15 minuta sa 2 linije koda u jQuery-ju. Doslovno!

Osnove JavaScript biblioteka

Funkcionalnost JavaScript biblioteka možemo podijeliti u tri osnovne kategorije:

  • DOM pristup i manipulacija,
  • olakšavanje i ubrzavanje programiranja,
  • proširivanje funkcionalnosti pomoću gotovih komponenti.

DOM pristup i manipulacija

DOM pristup i manipulacija su najvažniji za efikasno upravljanje sadržajem web stranice. DOM (Document Object Model) je standardni model koji raščlanjuje web stranicu na točno definirani niz (stablo) objekata koji sadrže druge objekte, i pomoću takvog modela moguće je pristupiti bilo kojem dijelu web stranice da bi pročitali ili izmijenili neko njegovo svojstvo. Zbog toga je rad sa DOM-om zapravo jezgra oko koje se temelji bilo kakva manipulacija web stranicama. DOM je vrlo pouzdan i podržan u svim browserima, ali osnovne metode implementirane u JavaScript (jedna od njih je i gore navedeni document.getElementById) često su nedovoljne za elegantno rješavanje tipičnih zadataka. Tu na red dolaze razne biblioteke koje unapređuju i olakšavaju rad sa DOM-om. Osim toga, neke biblioteke čak nude implementaciju novih CSS selektora (koji su uvedeni u novu verziju 3 CSS standarda koji još nije implementiran u sve browsere) ili neke druge načine pristupa elementima.

Osim podrške za DOM skoro sve biblioteke pokušavaju (i uspijevaju) što je moguće više izgladiti svima mrske razlike prikaza elemenata između raznih browsera. To ujednačavanje korištenja različitih web browsera je zapravo i bio jedan od važnih motiva za razvoj biblioteka.

Olakšavanje i ubrzavanje programiranja

Osim samog olakšavanja pristupa i manipulacije DOM objektima (elementima stranice), JavaScript biblioteke omogućuju korisnicima razne druge mogućnosti koje se razlikuju od biblioteke do biblioteke i ovise o njezinoj namjeni. Većina ih ima ugrađene efekte koje je moguće primjeniti na elemente web stranica. Efekti se kreću od običnih promjena CSS svojstva elementa do animacija i sličnih kompliciranih efekata koje bi bilo vrlo teško pouzdano implementirati u JavaScriptu.

Skoro sve biblioteke olakšavaju najkompliciraniji i možda najvažniji dio razvijanja weba – tzv. event handling (upravljanje “događajima” koji pokreću neki efekt, npr. dolazak pokazivača miša iznad nekog elementa). Biblioteke pomoću svojih ugrađenih metoda pružaju programeru lakši i razumljiviji način pokretanja čestih funkcija, koje će na bilo kojem browseru imati isti efekt. Većina njih olakšava manipulaciju stringovima i kolekcijama (bilo kakvih podataka) i podržava asinhrono dohvaćanje podataka sa raznih lokacija (najčešće u XML ili JSON obliku).

Proširivanje funkcionalnosti pomoću gotovih komponenti

Neke biblioteke podržavaju dodavanje gotovih komponenti koje proširuju funkcionalnost stranica na vrlo jednostavan način. Primjer proširenja je jQuery.lightbox koji omogućava efektno pregledavanje slika. Obično su te komponente osmišljene na način da zauzimaju malo prostora i da se lako dodaju već aktivnoj biblioteci. Na taj način je moguće uz relativno malo truda dodati stranici novu funkcionalnost čija je implementacija već provjerena i radi brzo i pouzdano umjesto da svaki autor razvija svoju varijantu potrebnog dodatka.

Izbor JavaScript biblioteke

Trenutno se na Internetu može pronaći ogroman broj biblioteka (prema nekim izvorima preko 1000). Ali od takvog “izobilja” u obzir se isplati uzeti samo nekih 20-ak biblioteka. Ostale otpadaju iz raznih razloga (funkcionalnost, pridržavanje standarda, prestanak razvoja i sl.).

Za izbor JavaScript biblioteke su presudna tri faktora: funkcionalnost, namjena i veličina biblioteke. Namjena može biti najčešće DOM manipulacija, ali postoje biblioteke koje su razvijene za grafičku manipulaciju SVG ili Canvas elementima, AJAX komunikacijom sa serverom itd.

Moj izbor: jQuery

Izbor biblioteka je ogroman i najvažnije je dobro odvagnuti njihove prednosti i nedostatke kako bi dobili optimalna svojstva. Moj izbor je svojedobno bio jQuery zbog niza prednosti:

  • mala biblioteka koja se brzo učitava i brzo radi
  • mogućnost proširenja funcionalnosti kroz dodatke
  • blaga krivulja učenja i odlična dokumentacija
  • podrška za AJAX
  • orijentiranost na DOM
  • pridržavanje standarda.

Gledano iz današnje perspektive, jQuery je sazrio u najpopularniju i najfleksibilniju biblioteku i moja odluka od prije skoro devet godina je bila ispravna. Već tada je iza jQuery-ja stajala velika i aktivna zajednica i baza korisnika koji su garantirali kvalitetu: Mozilla, Google Code search, Digg, Intel, BBC, Oracle, Newsweek, Cisco Systems, SourceForge, Amazon, Linux.com i ogromna lista ostalih. S vremenom se pokazalo da je jQuery jako dobro podržavao i mobilne browsere (iOS i Android) jer je WebKit engine od početka dobro usklađen sa standardima. Zbog toga je jQuery svojevremeno bio i odlično rješenje za mobilne aplikacije, sve dok nisu sazrela rješenja koja omogućuju puno više od samog dohvaćanja i manipulacije objektima.

Osim toga, u 9. mjesecu 2008. jQuery je postao i globalno priznat kada su Microsoft i Nokia dogovorili suradnju sa timom koji razvija jQuery biblioteku. Zanimljivo je da suradnja ne uključuje neke posebne verzije, nego jednostavno korištenje normalnih verzija biblioteke. Microsoft se obvezao distribuirati i podržati jQuery u sklopu svog Visual Studia, a Nokia je zainteresirana za korištenje jQuery-a kao platforme za razvoj aplikacija na mobitelima. Radilo se o Symbian mobitelima koji u svoje vrijeme imaju vrlo napredan WebKit browser na čijoj bi se jezgri pokretao jQuery, tvoreći tako Web Run-Time aplikacije.

Nakon implementacije jQuery biblioteke ubrzo sam napravio neke izmjene koje su unaprijedile moje web stranice. Osim toga, otvorile su mi se do tada nepojmljive mogućnosti pri pisanju skripti. Većinu do tad korištenih funkcija sam preprogramirao, i sada su postale brže i pouzdanije. Kada želim neku novu funkcionalnost puno lakše dohvaćam željeni DOM element, i koristeći efekte ugrađene u jQuery lako dođem do željene funkcionalnosti.

jQuery u mom slučaju predstavlja pravu revoluciju nakon koje je sve moguće… S obzirom da na hrvatskom jeziku nisam našao niti jedan opsežniji tekst o korištenju jQuery biblioteke, odlučio sam napraviti jedan vodič kroz jQuery za početnike koji će pokazati koliko jednostavno i efektno se može koristiti jQuery.

JavaScript framework (razvojna cjelina)

Suvremenim razvojem web aplikacija u JavaScriptu postala je jasna potreba za nečim fleksibilnijim i moćnijim od postojećih biblioteka. Komponente i funkcionalnosti zajedničke većini web aplikacija nema smisla uvijek iznova programirati, tako da se nameće modularni pristup korištenja već razrađenih i testiranih komponenti.

Ovdje dolazimo do razlike između funkcionalnosti i namjene biblioteka i razvojnih cjelina: dok su biblioteke nešto pomoću čega gradimo i dodajemo funkcionalnost web aplikacije, razvojne cjeline (frameworks) su nešto na čemu gradimo kompletnu web aplikaciju. Na prvi pogled jednostavna razlika koja može postati vrlo komplicirana ako uđete u detalje. Zbog toga pri razlikovanju ne treba gledati pojedinačni projekt da bi se odredilo o čemu se radi, nego se bazirati na koji način koristimo taj projekt u svojoj aplikaciji. Kada koristimo biblioteku, tada najčešće pozivamo neki od njezinih objekata/modula kako bismo iskoristili njegovu funkcionalnost. S druge strane, kada koristimo framework, ne možemo samo pozvati neku od njegovih funkcija. Moramo se držati njegove arhitekture i na njoj graditi aplikaciju. Framework je zapravo sam za sebe aplikacija bez funkcionalnosti na kojoj gradimo funkcionalnost i sučelje svoje aplikacije.

Stvari koje razvojne cjeline nude su AJAX, pristup bazama podataka, predlošci, URL templating i session management itd. Sve ove komponente nema potrebe razvijati i debugirati. Osim toga, ovisno o razvojnoj cjelini koju koristi, programer ima mogućnost i relativno lake migracije na neki od mobilnih operativnih sustava. Naravno, web aplikacije funkcioniraju bez problema na mobilnom OS-u, ali moguće je napraviti i aplikaciju koja se instalira na mobilni uređaj.

Većina ovih razvojnih cjelina koristi tzv. MVC (Model-View-Controller) arhitekturu korisničkog sučelja, i većinom imaju implementirano sutomatsko osvježavanje prikazanog sučelja čim se neka od prikazanih varijabli promjeni. Model sadrži reprezentaciju svih podataka, view prikazuje podatke pohranjene u modelu, a controller sadrži logiku koja kontrolira cijelu aplikaciju, podatke i sučelje.

Moje predviđanje je da će relativno brzo dominantan igrač na ovoj sceni biti AngularJS.