24/25.3 WEB programiranje 3

Uvod

JavaScript omogućava stvaranje dinamičnih i interaktivnih web stranica. Međutim, kodiranje u čistom JavaScript-u ponekad može biti zamorno, posebno kada radimo na složenim projektima. Da bismo sebi olakšali posao, koristimo JavaScript biblioteke i okvire (frameworks). One nude gotove funkcionalnosti i alate koji ubrzavaju razvoj.

JavaScript biblioteke su kolekcije unapred napisanih JavaScript kodova koje možete koristiti za pojednostavljenje i ubrzanje razvoja web aplikacija. Framework-i pružaju strukturu za razvoj aplikacija i obično uključuju više funkcionalnosti nego što to čine biblioteke.

Šta su JavaScript biblioteke?

JavaScript biblioteke su kolekcije unapred napisanih kodova koje možete koristiti u svojim projektima. 

Drugim rečima: kolekcije gotovih funkcija i alata koje programer može pozvati kako bi rešio određeni problem ili dodao funkcionalnost u aplikaciju. Programer ima kontrolu nad logikom aplikacije i bira kada i kako da koristi funkcije iz biblioteke. Biblioteka se koristi kao alat koji podržava vaš kod.

Biblioteke štede vreme jer umesto da pišete ceo kod od nule, koristite već gotove funkcije.

• Primeri biblioteka:
  • jQuery: Olakšava manipulaciju DOM-om, rad sa događajima, AJAX pozivima i animacijama.
  • Lodash: Pruža funkcije za rad sa nizovima, objektima i stringovima.
  • D3.js: Služi za vizualizaciju podataka.
• Primer: U jQuery-ju, programer poziva funkcije biblioteke, npr.:
  

  
                 $('#element').addClass('active');
  

Šta je to JavaScript framework?

• Primeri frameworka:
  • Angular: Kompletan framework za pravljenje aplikacija sa jasnom arhitekturom (MVC ili MVVM).
  • Vue.js: Fokusiran na progresivno usvajanje funkcionalnosti za izradu interaktivnih korisničkih interfejsa.

• Primer: U Angularu, koristite predefinisanu strukturu aplikacije, npr.:
  

  
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Moja aplikacija';
  }
  

Glavna razlika je u tome ko kontroliše kod:

• Biblioteka: Vi kontrolišete kod, a biblioteka samo pomaže.
• Framework: Framework kontroliše kod, a vi radite unutar njegovih pravila i strukture.

Ukratko, biblioteke pružaju alate, dok framework pruža celokupni sistem za razvoj. 😊

Popularne JavaScript biblioteke i okviri

1. jQuery

jQuery je jednostavna JavaScript biblioteka koja olakšava rad sa HTML-om, CSS-om i događajima. Glavni cilj jQuery-ja je da skratite i pojednostavite kod.

Primer: U JavaScript-u da biste sakrili element (npr. dugme), koristili biste:

document.getElementById("dugme").style.display = "none";

U jQuery-ju isti zadatak izgleda ovako:

$("#dugme").hide();

Vidite razliku? Kod je kraći i lakši za razumevanje.

Glavne prednosti jQuery-ja:

• Jednostavna sintaksa, 
• Kompatibilnost sa različitim pretraživačima, 
• Mnogo dodataka (plugins), ...

Instalacija:

jQuery se može dodati u projekat putem CDN-a:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Još jedan primer:

$(document).ready(function() {
    $("button").click(function() {
        $("p").text("Tekst je promenjen!");
    });
});

U ovom primeru, kada korisnik klikne na dugme, tekst u paragrafu se menja.

2. Angular

Angular je okvir (framework) razvijen od strane Google-a, napravljen za izradu složenih i dinamičkih aplikacija. Koristi se za pravljenje aplikacija koje funkcionišu kao web sajtovi, ali se ponašaju kao prave aplikacije (tzv. Single Page Applications - SPA).

Primer funkcionalnosti: Angular automatski ažurira sadržaj na stranici kada se podaci promene. Na primer, kada korisnik unese nešto u formu, rezultati se momentalno osvežavaju na ekranu.

Glavne prednosti Angular-a:

• Pogodan za velike projekte, 
• Omogućava dvosmerno povezivanje podataka (data binding), 
• Podrška za komponente koje se mogu ponovo koristiti, ....

Primer:

@Component({
  selector: 'app-header',
  template: '<h1>{{ title }}</h1>'
})
export class HeaderComponent {
  title = 'Dobrodošli';
}

3. ReactJS

ReactJS je biblioteka koju je razvila kompanija Facebook. Fokusira se na pravljenje korisničkog interfejsa (UI). React koristi komponente, tj. male delove stranice koji se mogu praviti i ponovo koristiti.

Primer: Zamislite dugme za "Like" koje se koristi na više mesta na sajtu. Umesto da pišete kod za svako dugme, u React-u možete napraviti komponentu za dugme i koristiti je gde god je potrebno.

Glavne prednosti React-a:

• Brzina rada,
• Jednostavna integracija sa drugim bibliotekama,
• Velika zajednica programera.

Kratak pregled ova tri:

• jQuery: Za manipulaciju HTML-om i osnovne interakcije.
• Angular: Za složene aplikacije koje funkcionišu kao web stranice.
• ReactJS: Za pravljenje brzih i prilagodljivih korisničkih interfejsa.

Na sledećem času ćemo izabrati jednu od biblioteka i detaljnije je istražiti!