| .:. | svg - revolucija 2D grafike | .:. | N|vu - web dizajn: novi pogled |
| .:. | JavaScript biblioteke | .:. | firefox - vatren i lukav |
| .:. | jQuery biblioteka | .:. | inkscape - svg editor |
Prateći razvoj weba i trendove u dizajnu primijetio sam da se iz velike (i po meni prenapuhane) buke oko tzv. Web2.0 koncepta može izvući i nekoliko korisnih i opravdanih stvari. 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.
Ako zanemarimo marketinške trikove i naglašeno zanimanje novinara isključivo za teme koje će prodati njihove tekstove, možemo iza tih trikova ipak razabrati neke stvari koje su čista posljedica evolucije web dizajna bez obzira na slogane i marketing. Iako u većini tih Web2.0 tekstova tako piše, ja osobno mislim da interaktivnost i dinamičnost web stranica (uz "neizostavno sudjelovanje korisnika u kreiranju sadržaja" - čitaj: lijenost i inertnost autora, čast iznimkama) nisu svojstvo Web2.0 stranica nego jednostavno evolucija. Kao što je dodavanje slika na stranice u počecima weba bilo stvar evolucije a ne revolucije, tako i sada dodavanje dinamičnog sadržaja i interaktivnosti ne znači da web postaje neki novi medij.
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.
Kao i većina autora web XHTML stranica koje sadrže barem malo JavaScripta 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 nemaju 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 i još neke koje su mi pojednostavnile dinamičko umetanje HTML koda u stranice, sakrivanje e-mail adresa od spamera, naizmjeničnu promjenu pozadinske boje svakog drugog reda u tablici 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 je doživio (r)evoluciju: prvo rješenje je iznosilo 5-6 sati programiranja (i debugiranja) u 42 linije koda zamijenjeno je za 15 minuta sa 2 linije koda. Doslovno!
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 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.
Ako animaciju na web stranici promatramo kao promjenu nekog svojstva određenog elementa tijekom vremena, onda ćemo lako zaključiti da pomoću JavaScript biblioteka možemo jednostavno izraditi animacije koje će podići razinu upotrebljivosti i zanimljivosti web stranica (naravno, uz smišljenu i umjerenu upotrebu).
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).
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.
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 dva faktora: namjena i veličina biblioteke. Postoje krajnosti koje omogućuju napredno objektno programiranje u JavaScriptu i koje predstavljaju pravo malo razvojno okruženje. Primjer takvog okruženja je Prototype + ExtJS, gdje ExtJS predstavlja samu JavaScript biblioteku. Nedostaci takvih okruženja su komplicirano korištenje, teško savladavanje osnova i veličina same biblioteke koja će usporiti učitavanje web stranice. Postoje i biblioteke koje jednostavno olakšavaju manipulaciju elementima stranice, dodajući razne efekte i olakšavajući izbor DOM elementa kojim manipuliramo. Takve biblioteke su jednostavnije koncipirane, manje su i lakše je naučiti njihovo korištenje. Primjeri su jQuery i Mootools (koji čak omogućava da odaberemo samo one funkcionalne dijelove koji su nam potrebni).
Ovdje ću navesti neke od najpopularnijih biblioteka:
.:. Prototype JavaScript framework - jedan od pionira JavaScript biblioteka, trenutno postoji nekoliko biblioteka koje su zasnovane na njemu, ili rade uz Prototype.
.:. script.aculo.us - vrlo robusna biblioteka s naglaskom na vizualne efekte, trenutno najpopularnija. Koriste je vrhunski web siteovi kao što su Digg (istodobno koristi i jQuery), Apple, BBC, od nedavno i HRT koji je zapravo kopija odličnog BBC-evog portala (funkcionalno i ergonomski dobra kopija, ali stvarno nije bilo potrebno doslovno ukrasti dizajn). Najveća prednost joj je i najveći nedostatak: robusnost (čitaj: velika i spora kod učitavanja). Osim toga, da bi funkcionirala potrebno joj je istodobno učitavanje Prototype-a.
.:. jQuery - trenutno druga najpopularnija biblioteka, više o njoj dalje u tekstu.
.:. MooTools - vrlo popularna i modularna biblioteka sa odličnim vizualnim efektima, ali omogućava i puno više. Cijela biblioteka je prilično velika, ali moguće je uključiti samo one module koji su potrebni za određenu namjenu. Osim toga, iza ove biblioteke stoji velika zajednica i dobra dokumentacija. MooTools-i su bili u užem izboru za moje stranice, ali mislim da je jQuery bolji izbor.
.:. Yahoo! User Interface Library (YUI) - ogromna biblioteka koja podržava odlične vizualne efekte i još puno drugih stvari (AJAX, kolekcije, drag and drop, tražilica i sl.). Velika i moćna biblioteka koja može sve, ali preko 100 kB velika i sa jako strmom krivuljom učenja.
.:. Ext JS - još jedna robusna biblioteka prvotno nastala kao ekstenzija YUI-a koja je prerasla samu sebe. Vrlo fleksibilna i moćna, a istodobno brža od YUI-a. Najveći problem je restriktivna licenca za komercijalnu upotrebu, što odmah otjera ljude koji malo razmišljaju: zašto uopće ulagati trud u nešto što će jednog dana trebati platiti kad ima toliko konkurencije koja ne postavlja takva ograničenja.
Izbor biblioteka je ogroman, i najvažnije je dobro odvagnuti njihove prednosti i nedostatke kako bi dobili optimalna svojstva. Moj izbor je 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
.:. orijentiranost na DOM
.:. pridržavanje standarda.
Osim ovih istaknutih prednosti čitajući razne usporedbe i recenzije otkrio sam da autor jQuery-a John Resig između ostalog radi i u Mozillinom JavaScript timu, što garantira kvalitetu njegovog načina programiranja. Primjeri webova koji koriste jQuery također puno govore o kvaliteti i popularnosti ove biblioteke: Mozilla, Google Code search, Digg, Intel, BBC, Oracle, Newsweek, Cisco Systems, SourceForge, Amazon, Linux.com i ogromna lista ostalih.
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. Radi se o Symbian mobitelima koji imaju vrlo napredan WebKit browser na čijoj bi se jezgri pokretao jQuery, tvoreći tako Web Run-Time aplikacije. Za početak je predviđeno prenošenje postojećih aplikacija (najpoznatija je svakako Nokia Maps), a sve nove aplikacije će se od početka razvijati na ovoj platformi. Ovo osigurava i puno više stručnog testiranja i ispravljenih propusta nego do sada, iako se na stabilnost nitko ni prije nije tužio.
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.