Useful JavaScript libraries

JavaScript je skriptni programski jezik, koji se izvršava u web pretraživaču na strani korisnika, umesto na strani servera (dakle, u browseru, a ne na web serveru). JavaScript može menjati sadržaj prikazane web stranice i kontrolisati pretraživač. Može se koristiti za animacije, navigaciju, jednostavne igre, kalkulatore, validaciju formi... Dok su stranice bile čisti HTML, kad bi kliknuo na neki deo stranice, ponovno bi se učitavao celi HTML od sledeće stranice. Danas, sa javascriptom, to nije potrebno. Umesto dugogodišnjeg slogana “World Wide Wait” koja je upućivala na period frustracije nekoliko miliona korisnika koji su čekali da server obradi zahtevanu stranicu u potpunosti pre njenog prikaza na ekran računara, AJAX tehnologija je, ukratko, ponudila mogućnost parcijalnog ažuriranja nekog segmenta web stranice a da se pri tome njen kompletan sadržaj ne učitava iznova. Na ovaj način su funkcionalnosti web aplikacija podignute na viši nivo uz efikasnije korišćenje mrežnih resursa.

Programeri koriste JavaScript za puno različitih web aplikacija zato što on stvarno može da učini da strana klijenta – odnosno, strana korisnika - izgleda lepo i dobro funkcioniše. Ako uvek dodajete sve više i više kodova da bi JavaScript funkcionisao u više različitih pretraživača može da postane veoma velik i zbunjujuć. Tako je programiranje popularnih funkcionlanosti web stranica na klijentskoj strani pomoću JavaScript jezika iz godine u godinu postojalo sve teže. Pojava novih igrača na tržištu internet pretraživača je dodatno zakomplikovala postupak programiranja internet aplikacija s obzirom na činjenicu da su postojale međusobne razlike u interpretiranju web stranica pa i samog koda koristeći JavaScript. Danas, uz pomoć JavaScript biblioteka se ruše ove razlike među pretraživačima. Gotovo da svaka JavaScript biblioteka danas poseduje podršku za lakšu realizaciju AJAX zahteva, manipulaciju odgovorima servera i jednostavnije parcijalno ažuriranje web stranice. U zavisnosti od nivoa kompleksnosti efekata koje želite da postignete nad elementima neke web stranice, realizacija tih efekata je u “čistom” JavaScript programiranju ponekad zahtevala i na desetine redova programskog koda umesto samo par linija koda pomoću neke JavaScript biblioteke.

Biblioteka je skup već napisanih JavaScript funkcija (malih programa) koji vam omogućavaju da brže pišete JavaScript kod. Korišćenjem raznih biblioteka zasnovanih na JavaScript jeziku unosite strukturu u vaš JavaScript kod i održavate ga organizovanim. JavaScript biblioteke su rešenja otvorenog koda pa se konstantno poboljšavaju. Zahvaljujući JavaScript bibliotekama, upravljanje DOM-om i njegovim elementima je uštedelo vreme mnogim web programerima da realizuju određene funkcionanosti web stranica. Tako se npr. pomoću JavaScript biblioteka na jednostavniji način vrši selekcija i pristup željenim elementima stranice, iščitavanje i izmena njihove vrednosti i vrednosti njihovih atributa, njihovo dodavanje ili uklanjanje u/iz DOM stabla, promena izgleda elemenata manipulacijom njihovog CSS koda itd.. Takođe, jedna od podržanih oblasti JavaScript biblioteka jeste upravljanje događajima. JavaScript je po prirodi event-driven skript jezik, odnosno skript jezik koji zagovara interaktivnost između korisnika i sadržaja neke web strane. Ta interakcija se najčešće zasniva na korišćenju računarskih periferija poput miša i tastature gde se kroz niz mogućih događaja (klik miša, prevlačenje krusora miša preko nekog elementa stranice, pritiskom na određeno dugme tastature itd.) mogu izvršavati napisani JavaScript kodovi. JavaScript biblioteke u tom pogledu teže da omoguće pravilno registrovanje pomenutih događaja i izvršavanju određenog koda ukoliko se dati događaj okine.

JS Biblioteke

Neke od najčešće korišćenih opštih biblioteka među programerima su jQuery, jQueryUI, MooTools, YUI, Dojo, Prototype, React i mnoge druge. Sve imaju svoje prednosti i mane a razlike se ogledaju u razvoju određenih funkcionalnosti. Sve biblioteke teže da olakšaju programiranje u JavaScript programskom jeziku ali neke su više okrenute ka jednoj od osnovnih funkcionalnosti biblioteka koje smo gore pomenuli dok druge teže da olakšaju i unaprede rad nekih drugih aspekata. Neke biblioteke su okrenute ka DOM-u i manipulaciju sa HTML elementima dok neke teže da unaprede rad sa JSON objektima.

Na internetu se mogu naći mnogi pluginovi koji olakšavaju rad programerima jer imaju već predefinisane neke funkcionalnosti i stilove sa kojima je lako manipulisati i prolagođavati ih sebi i datoj situaciji. Pluginovi služe za rad sa slikama, video zapisima, datumima, formama, animacijama, elementima na samoj strani, prikzu određenih stvari… Oblast gde se dosta koriste razni pluginovi je i prikaz i rad sa tabelarnim prikazom podataka na samoj web stranici. Najkorišćeniji pluginovi za te svrhe su jqGrid, Flexigrid, Gridster, OmniGrid, TableKit, Gridsteck.

Njihova prednost je u tome što već imaju implementirane funkcionalnosti za tabelarni prikaz podataka, manipulaciju sa podacima, stilizovan prikaz i dr. za šta bi vi izgubili dosta vremena da radite sami na svakom projektu. Već prilikom inicijalizacije ovakvog plugin-a dobijate osnovni prikaz i osnovne njegove karakteristike. Naravno kod je potpuno otvoren i ostavljena vam je mogućnost personalizacije i prilagođavanja svojim potrebama i što se tiče samog izgleda, boja, kolona, redova, veličine, fonta i dr. ali i što se tiče samog funkcionisanja tabela i nekih dodatnih opcija.

Implementira se veoma lako tako što downloadujete fajl (može da sadrži i .js i .css fajlove), ubacite u svoj folder i pozovete na samoj web strani unutar head taga.

<link rel="stylesheet" href="http://YOURJQGRIDURL/jqGrid-4.5.2/css/ui.jqgrid.css" type="text/css" />

<script type="text/javascript" src="http://YOURJQGRIDURL/jqGrid-4.5.2/js/jquery.jqGrid.src.js" />

Pored navedenih biblioteka, postoji i čitav niz biblioteka koje se koriste za vizuelizaciju podataka i crtanje različitih vrsta grafikona, kao što su: D3.js, Chart.js, FusionCharts, jqPlot, Dimple, Highcharts, Plotly i mnoge druge. Upotreba bilo koje od ovih biblioteka zavisi kako od problema koji je pomoću njih potrebno rešiti, tako i od vrste i tipa podataka koje je potrebno vizuelizovati, ali i ličnih preferenci programera. Velika većina ovih biblioteka omogućava razvoj prilično komplikovanih i zahtevnih vizuelizacija bez posedovanja bilo kakvog naprednog programerskog znanja, što predstavlja njihovu ogromnu prednost.

jQuery

Jedna od najkorišćenijih JavaScript biblioteka je jQuery. jQuery je JavaScript biblioteka koja pojednostavljuje korištenje JavaScripta kod komplikovanih stvari kao što su AJAX pozivi (Asynchronous JavaScript and XML) ili manipulacija DOM-om (Document Object Model). Omogućava vam da web sajtu dodate funkcionalnosti koje sa čistim html/css-om ne biste mogli da uradite. jQuery slogan „write less, do more“ dosta govori – sa jednom linijom jQuery koda možete pozvati funkcionalnosti za koje bi vam trebalo mnogo više rada i truda, ako bi koristili klasični JavaScript metod kodiranja. jQuery obuhvata mnoge zadatke koji zahtevaju veliki broj linija JavaScript-a i omotava ih u metode koje možete pozvati sa samo jednom linijom. Njegova najveća prednost sa funkcionalne strane je da je potpuno cross-browser kompatibilan, tj. jednako ga ispravno tumače i Internet Explorer i Mozzilla kao i Chrome pa je bojazan od grešaka značajno umanjen.

Funkcionalnosti jQuery-ja:

  • HTML/DOM manipulacija
  • CSS manipulacija
  • HTML event metodi
  • Efekti i animacije
  • AJAX

Neki od bitnih prednosti su:

  • Drastično smanjuje količinu potrebnog koda u odnosu na čist JavaScript što ga čini lakim za čitanje
  • Poboljšava performanse vašeg sajta
  • Lakši za učenje u odnosu na JavaScript
  • Organizovana dokumentacija i prilično velika zajednica za podršku
  • Mnogo gotovih stvari koje možete odmah dodati na web stranu
  • Smanjuje vreme potrebno za razvoj aplikacije
  • Lakše optimizovanje sajta za različite web pretraživače

Dodavanje jQuery biblioteke na web stranice je jednostavno i sastoji se od dva koraka:

  • Preuzimanje jQuery biblioteke sa sajta jQuery.com
  • Pozivanje u head delu HTML koda. jQuery biblioteka je samo jedan JavaScript fajl i pozivate ga u okviru script tag-a unutar head sekcije. <script type="text/javascript" src="jquery.js"></script>
  • Pozivanjem same biblioteke sa nekog od servera i tada ne morate imati sam JavaScript fajl u svom projektu. <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Postoje dve verzije dostupne za preuzimanje (production i development).

  • verzija za produkciju – verzija koda za vaš web sajt koji je već objavljen, zbog toga što je minimalizovana i kompresovana.
  • development verzija – verzija za testiranje i razvoj (nekompresovan i čitljiv kod).

Jedna od velikih prednosti jQuery biblioteke nad ostalim bibliotekama JavaScript jezika je u tome što je to poprilično “živ” projekat. Pod tim podrazumevamo da veliki tim ljudi radi na projektu i da se stalno usavršava i unapređuje i dorađuje. Tim ljudi koji radi na razvoju jQuery-ja je toliko posvećen tome da se ova biblioteka razvija kroz dva projekata tj. kroz dve verzije koje se stalno dopunjuju. Verzija 1.X je verzija jQuery-ja koja podržava i starije web pretraživače kao što su Internet Explorer u verzijama 6,7 i 8 i starije verzije drugih pretraživača dok druga verzija 2.X nema mogućnosti podrške na ovim starijim verzijama web pretraživača. Ovo je iz razloga što se time smanjuje sam kod jer se neke funkcije razlikuju od pretraživača do pretraživača pa kako se ovi pretraživača polako izbacuju iz upotrebe tako se i kod i funkcionalnosti prilagodjavaju samo potrebama koje se javljaju u praksi i time dobijamo struktuiran i pregledan kod bez nepotrebnih funkcionalnosti. Pa tako implementirate verziju prema korisnicima za koje smatrate da će koristiti vašu web stranicu .

Navešćemo primer kako jQuery kod olakšava samo programiranje. Da bi JavaScript sintaksom pristupili nekom elementu sa ID-jem moj_div i pridružili mu određenu CSS klasu, kreiraćemo sledeći izraz:

document.getElementById(‘moj_div’).className=’neka_klasa’;

Isto ovo u jQuery sintaksi postizemo izrazom:

$(‘#moj_div’).addClass(‘neka_klasa’);

jQueryUI

jQuery je već korišćen da bi se pravili neki impresivni efekati i pluginovi, od kojih su neki bili dovoljno korisni da se opravda njihovo uključivanje u osnovni paket jQuery biblioteke. Međutim, tim programera koji radi na usavršavanju biblioteke je odlučio da u cilju zadržavanja fokusa jezgra biblioteke izdvoji te dodatne funkcionalnosti na višem nivou i upakuje ih u jednu dodatnu biblioteku koja se nalazi na vrhu jQuery bibliteke.

Ta biblioteka je nazvana jQuery User Interface (obično skraćeno na samo jQueryUI), i obuhvata skup korisnih efekata i naprednih vidžeta koji su dostupni i visoko prilagodljivi kroz korišćenje tema. jQueryUI je kolekcija grafičkih vidžeta, animiranih, vizuelnih efekata i tema realizovanih na jQuery-ju. Slajderi, text boksevi, datum polja, selektori, i drugi - svi spremni da se koristi. Možete da potrošite gomilu vremena na pravljenje ovih funkcionalnosti u jQuery-ju ali jQueryUI kontrole su prilagodljive i dovoljno sofisticirane da Vaše vreme možete bolje potrošiti radeći nešto drugo.

D3.js

Prvo ime na koje većina programera pomisli kada se spomene softver za vizuelizaciju podataka je D3.js (Data-Driven Documents). On koristi HTML, CSS i SVG da renderuje zaista sjajne grafikone i dijagrame. Bilo kakvu vizuelizaciju koju možete zamisliti, možete napraviti koristeći D3.js biblioteku. D3 olakšava povezivanje podataka sa DOM-om. U suštini, to je skup gotovih funkcija za iteraciju i obradu elemenata DOM stabla web stranice. D3 omogućava dinamičko kreiranje, izdvajanje i obradu elemenata u DOM-u. O Ono što je takođe bitno je činjenica da su skoro sve njegove komponente open-source. Sa druge strane, dve izuzetno bitne činjenice o kojima treba voditi računa prilikom upotrebe D3.js biblioteke na nekom projektu su prilično strma kriva učenja i njegova kompatibilnost sa modernim verzijama browser-a. Tako da je preporuka da ovu biblioteku koristite samo kada imate dovoljno vremena i nije vam bitno da li se vaši grafikoni mogu prikazati u starijim verzijama browser-a ili ne.

Veoma ga je lako implementirati, preuzimanjem .zip arhive sa D3 web stranice ili direktnog linkovanja sa iste: <script src="https://d3js.org/d3.v3.min.js"> </script>

Prikazaćemo i jednostavan primer korišćenja D3 selekcija, a ostale primere možete pronaći na https://d3js.org. Naime, modifikovanje elemenata koristeći W3C DOM API je prilično naporno. Da bismo npr. samo promenili boju teksta naslova nekog grafika kojeg pravimo, potrebno je napisati sledeći kod u javascript-u:

var paragraphs = document.getElementsByTagName("h1");
for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs.item(i);
    paragraph.style.setProperty("color", "white", null);
}

Koristeći D3 selekcije prethodni kod možemo napisati na sledeći način:

d3.selectAll("h1").style("color", "white");

Plotly

Kao što smo već napomenuli, D3.js može uraditi skoro sve što možete zamisliti, ali je i činjenica da je potrebno dosta vremena utrošiti na učenje ukoliko želimo postići takve rezultate. Plotly je biblioteka koja omogućava mnogo brži razvoj i dosta je lakša za učenje od D3.js biblioteke. Plotly je takođe biblioteka za vizuelizaciju podataka napravljena na D3.js biblioteci i stack.gl-u. Plotly poseduje više 20 različitih vrsta grafika, uključujući 3D i statističke grafike, kao i SVG mape.

Implementacija je takođe jednostavna, bilo da preuzimate minifikovani plotly.js izvorni kod koji nakon toga uključujete u html stranicu: <script src="plotly-latest.min.js"></script> ili umesto toga koristite plotly.js CDN link: <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Da biste napravili grafikon, potrebno je u HTML dokumentu kreirati prazan DIV u koji ćete ucrtati grafik:

<div id="tester" style="width:600px;height:250px;"></div>

A nakon toga pravite interaktivni plotly.js grafik koristeći Ploty.plot() funkciju. 

<script>
tester = document.getElementById('tester');
Plotly.plot( tester, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16] }], 
    { margin: { t: 0 } } );
</script>

Upotreba JavaScript-a pri izradi aplikacija za mobilne uređaje

Jedna od ključnih prednosti korišćenja web tehnologije za pravljenje aplikacija je prenosivost. Korišćenje programskog prevodioca, kao što je PhoneGap, može se preneti aplikacija i instalirati različitim platformama. Postoji veliki broj biblioteka i okvira koji to omogućavaju. PhoneGap programski prevodioc obezbeđuje niz JavaScript API-ja koji se povezuju sa izvornim funkcijama mobilnih uređaja kao što su kamera, kompas, kontakti i lokacije i omogućava nam da napravimo mobilnu aplikaciju bez korišćenja nativnog programskog jezika platforme na kojoj uređaj radi. Umesto nativnih jezika možemo koristiti okvire i biblioteke JavaScript jezika za pravljenje mobilnih aplikacija. Najveća prednost hibridnih mobilnih aplikacija se zasniva na pristupu "napravi jednom a pokreni svuda".

jQuery Mobile

jQuery Mobile je jedan od paketa koji se koriste za izradu hibridnih aplikacija. Fanovi jQuery zajednice su izgradili ovaj paket na temeljima čvrstog jQuery i jQueryUI. Cilj jQuery Mobile okvira je da obezbedi programerima da prave web aplikacije i mobilne aplikacije koje rade besprekorno i na mobilnim telefonima, tabletima i računarima. Ne fokusira se mnogo na pružanje nativnog izgleda i osećaja aplikacije individualnim platforme kao što su iOS ili Android. jQuery Mobile podržava širok spektar različitih platformi, od stonih, pametni telefon, tableta ili uređaja E-čitača kao što su Nook i Kindle. Slično kao i jQueryUI, jQuery Mobile obuhvata niz grafičkih kontola i komandi koje su optimizovane za mobilne i uređaja sa ekranima osetljivim na dodir.

Mobile AngularUI

Uz ovaj okvir dobijate najbolje fukncionalnosti iz Bootstrapa 3 i AngularJS okvira za pravljanje mobilnih aplikacija korišćenjem HTML5 standarda. Mobile Angular UI koristi Fastclick.js i Overthrov.js za kontinuirano i bolje korišćenje mobilnoih aplikacija. Omogućava kontrole za pravljenje korisnićkih komponenti kao što su preklapanja, dugme, sidebar i apsolutna pozicioniranja navigacije bez odskakanja od koncepta prilikom skrolovanja. To su komponente koje nedostaju Bootstrapu 3 za izgradnju mobilnih aplikacija.

results matching ""

    No results matching ""