JavaScript knjižnice (Frameworks)

Pri zahtevnejšem razvoju spletnih strani in aplikacij si pogosto pomagamo s knjižnicami, ogrodji in drugimi spletnimi tehnologijami. Nekatera orodja poenostavijo delo z uporabniškim vmesnikom, druga olajšajo izmenjavo podatkov ali strukturirano predstavitev podatkov. V sodobni razlagi je pomembno razlikovati med knjižnicami, ogrodji, zapisom podatkov in tehnikami komunikacije.

Osnovna pravila

• Knjižnica običajno ponuja pripravljene funkcije, ki jih vključimo v svoj program po potrebi.
• Ogrodje običajno določa tudi širšo zgradbo aplikacije in način dela.
• jQuery je namenjen predvsem poenostavljenemu delu z DOM, dogodki, učinki in Ajax.
• React, Vue in Angular temeljijo na komponentah oziroma gradnikih uporabniškega vmesnika.
• JSON uporabljamo za zapis in prenos strukturiranih podatkov.
• Ajax uporabljamo, ko želimo podatke pridobiti s strežnika brez ponovnega nalaganja celotne strani.
• AppML je opisni pristop za povezovanje podatkov z elementi strani.

Primerjave

Knjižnice in ogrodja za uporabniški vmesnik

Različna orodja za JavaScript rešujejo podobne naloge na različne načine. Nekatera so bolj usmerjena v poenostavljanje posameznih opravil, druga pa v zgradbo celotne aplikacije.

jQuery

jQuery je knjižnica, ki poenostavi izbiro elementov, delo z dogodki, animacijami in asinhronimi zahtevki. Značilna je kratka in pregledna oblika klica:

Primer, ki skrije vse odstavke na strani:

<script src="jquery.js"></script>
<script>
$(document).ready(function() {
   $("p").hide();
});
</script>

Pri sodobni razlagi je smiselno poudariti, da se veliko opravil, zaradi katerih je bil jQuery nekoč zelo pogost, danes pogosto rešuje tudi z vgrajenimi možnostmi JavaScripta.

React

React je knjižnica za gradnjo uporabniških vmesnikov iz komponent. Posamezne dele vmesnika razbijemo na manjše gradnike, ki jih nato sestavljamo v večje celote.

function Pozdrav() {
   return <h2>Pozdravljen!</h2>;
}

Pri delu z React so pomembni pojmi komponenta, lastnosti, stanje in tok podatkov med komponentami.

Vue

Vue je ogrodje za gradnjo uporabniških vmesnikov. Zgrajeno je na običajnih tehnologijah HTML, CSS in JavaScript ter uporablja deklarativen in komponentni način programiranja.

const app = Vue.createApp({
   data() {
      return {
         sporocilo: "Pozdravljen!"
      };
   }
});

Posebna prednost ogrodja Vue je, da ga lahko uporabljamo postopoma, od enostavnih vključitev do večjih aplikacij.

Angular

Angular je ogrodje za razvoj sodobnih spletnih aplikacij. Poleg komponent vsebuje tudi širši nabor rešitev za razvoj večjih aplikacij, na primer delo s predlogami, usmerjanjem in razvojem z orodji ukazne vrstice.

@Component({
   selector: "app-pozdrav",
   template: "<h2>Pozdravljen!</h2>"
})

JSON, Ajax in AppML

JSON

JSON je besedilni zapis za predstavljanje strukturiranih podatkov. Podoben je zapisom objektov v JavaScriptu, vendar ni enak JavaScript kodi. Ključi morajo biti zapisani v dvojnih narekovajih, dovoljenih pa je le nekaj tipov vrednosti.

const besedilo = '{"ime":"Ana","starost":17}';
const oseba = JSON.parse(besedilo);

Za pretvorbo iz niza v objekt uporabimo JSON.parse(), za pretvorbo iz objekta v niz pa JSON.stringify().

Ajax

Ajax pomeni, da lahko spletna stran asinhrono pošlje zahtevek strežniku in posodobi samo del vsebine, ne da bi bilo treba znova naložiti celotno stran. Danes se pri tem pogosto uporablja fetch(), izraz Ajax pa se še vedno uporablja kot splošen opis take tehnike.

fetch("podatki.json")
   .then(function(odgovor) {
      return odgovor.json();
   })
   .then(function(podatki) {
      console.log(podatki);
   });

AppML

AppML je opisni pristop za povezovanje podatkov z elementi na strani. Uporablja atribute v dokumentu in označevalna mesta za prikaz podatkov. Namenjen je predvsem preprostejšemu povezovanju podatkovnih virov in prikaza podatkov na strani.

<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<table appml-data="customers.js">
  <tr>
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
  </tr>
</table>

Priporočila

• Za preproste posege v elemente strani, dogodke in manjše učinke uporabi jQuery ali pa neposredno sodobni JavaScript.
• Za gradnjo uporabniškega vmesnika iz komponent uporabi React, Vue ali Angular, odvisno od zahtevnosti aplikacije.
• Za prenos strukturiranih podatkov med odjemalcem in strežnikom uporabi JSON.
• Za asinhrono pridobivanje podatkov s strežnika uporabi Ajax, danes pogosto z metodo fetch().
• Za preprosto opisno povezovanje podatkov z elementi strani lahko uporabiš AppML.
• Pri izbiri orodja upoštevaj velikost projekta, zahtevano strukturo aplikacije in znanje, ki ga že imaš.

Pogoste napake

• Za preproste naloge se uporabi preobsežno ogrodje, čeprav bi zadoščal že običajni JavaScript ali manjša knjižnica.
• Podatki se zapisujejo v obliki, ki ni veljaven JSON, na primer brez dvojnih narekovajev pri ključih.
• Pri asinhronem pridobivanju podatkov se pričakuje takojšen rezultat, ne da bi se upošteval asinhroni potek izvajanja.
• jQuery se uporablja za opravila, ki jih sodobni JavaScript že preprosto podpira brez dodatne knjižnice.
• React, Vue in Angular se uporabljajo brez jasne odločitve, katero orodje je glede na namen projekta najprimernejše.