JavaScript, jeho frameworky a ako sa v nich nestratiť

Dávno sú preč doby, keď bol JavaScript iba tíchým pomocníkom, ktorý statickým webovým stránkam pomáhal overovať dáta vo formulároch. V čase, keď tento programovací jazyk vznikal, sa dalo len ťažko odhadnúť, že sa v ňom raz budú programovať drony a aplikácie pre smart zariadenia.

Hoci JavaScript má dnes široké využitie, primárne je to stále skriptovací jazyk využívaný vo vývoji webových stránok. Za ostatné roky dramaticky stúpla okrem používanosti i popularita a s ňou aj rôzne možnosti použitia. Keďže funkcionalita jednotlivých elementov na stránkach pracuje na podobných princípoch, vznikli rôzne “zľahčováky” a “zlepšováky” – knižnice a frameworky, ktoré sú stále JavaScript, no rozširujú ho o novú použiteľnosť, ktorá je voľne dostupná každému vývojárovi. Načo znova programovať niečo, čo už naprogramoval niekto iný?

Keďže komunita okolo JavaScriptu najmä v posledných rokoch mohutne narástla, vzniklo mnoho rozšírení, z ktorých tie najkomplexnejšie sa stali – dalo by sa povedať – samostatnými vývojárskými nástrojmi. Ten pôvodný, čistý – tzv. “vanilkový” – JavaScript už na weboch nájdete len výnimočne. Dnešnými programovacími trendmi sú Angular, React, Vue.js, Node.js a niekoľko ďalších. Skúsme sa tým najrozšírenejším pozrieť na zúbok a odhaliť, v čom konkrétne webdeveloperom pomáhajú.

jQuery

Začneme knižnicou, ktorá má tie najlepšie časy, zdá sa, za sebou, no ešte zopár rokov dozadu bola “základnou výbavou” každého, kto aspoň zakopol o tvorbu webových stránok. jQuery zjednodušovalo pomerne nemotornú syntax vtedajšieho JavaScriptu a výrazne uľahčovalo interakciu so stránkou, reagovanie na činnosť používateľa, načítavanie a zobrazovanie nového obsahu stránky, animovanie elementov.

//Porovnanie zápisu “čistého” JavaScriptu a jQuery

//JavaScript

var elem = document.getElementById(“selector”);
elem.style.color = “blue”;

//jQuery

$(“#selector”).css(“color”, “blue”);

V súčasnosti mnohé z týchto funkcii prebrali “mladší príbuzní”, oproti ktorým jQuery začína výrazne zaostávať v efektívnosti a prehľadnosti kódu. Napriek tomu beží jQuery stále na 83,5 milióna stránok a tak skoro sa zrejme nevytratí.

Angular

Angular je javascriptový open-source framework, za ktorým stoja chlapci z Googlu. V súčasnosti je to jedna z najpopulárnejších platforiem na tvorbu SPA – single-page applications, po našom jednostránkové aplikácie. Angular funguje na báze Type-Scriptu, čo je nadstavba JavaScriptu, ktorá vyžaduje silnejšie typovanie. Základom pre tvorbu UI sú tzv. komponenty – rovnako ako napr. v Reacte. V Angulari sú to vlastne triedy, pod ktoré možno okrem štruktúry pričleniť aj funkcionalitu a ktoré možno v HTML dokumentoch použiť ako samostatné HTML tagy.

//Názorná ukážka Angular komponentu, ktorý na obrazovke vykreslí “Ahoj, programátor!”

import { Component } from "@angular/core";  
  
@Component({  
    selector: 'my-App',  
    template: '<h1>Ahoj, {{name}}!</h1>'  
})  
  
export class AppComponent {  
    name: string = "programátor"  
} 

Zdieľanie dát medzi jednotlivými komponentmi je možné vďaka tzv. “two-way bindingu”, ktorý funkcionalitu celej webovej aplikácie posúva na novú úroveň. Synchronizácia dát medzi stavom aplikácie (komponentu) a jej vykreslením na obrazovku funguje oboma smermi. Zmena komponentu zaktualizuje vykreslenie na obrazovke a opačne.

Súčasná verzia Angularu sa označuje ako Angular 2+, s postupnými drobnými zmenami je dnes k dispozícii už šiesta verzia. Tieto verzie frameworku sú však rozdielne od ich predchodcu, ktorý sa označuje ako Angular 1.x alebo AngularJS. Ten fungoval na diametrálne odlišných princípoch.

React.js

React.js si s Angularom podáva ruky v mnohých aspektoch, je však medzi nimi niekoľko zásadných rozdielov. V prvom rade React nie je framework, ale knižnica. React však rovnako ako Angular dokáže vytvárať interaktívne prostredie a rovnako tiež funguje na princípe komponentov. React využíva funkciu render(), ktorou jednotlivé komponenty vykresľuje. Tie sú písané v jazyku JSX, čo je akousi mutáciou HTML kódu a JavaScriptu.

//Názorná ukážka React.js komponentu, ktorý vykreslí <div> element so zoznamom položiek.

class App extends React.Component {
  render() {
    return (
      <div>
<ul>
        <li>Prvá položka</li>
        <li>Druhá položka</li>
        <li>Tretia položka</li>
</ul>
      </div>
    );
  }
}

Komponenty v Reacte sú JavaScriptové funkcie, v ktorých aktualizácia dát prebieha iba jednosmerne – z komponentu do podkomponentu. Pokiaľ chcete dáta preniesť späť do nadradeného komponentu, je potrebné použiť udalosti a spätné volania. Vďaka virtual DOM konceptu však React nepotrebuje znova načítať celú stránku, vykreslí len zmenený komponent, čím sa znižujú požiadavky na transfer dát a rýchlosť načítania.

Hoci sa fungovanie Reactu môže vyzerať komplikovane, ide o silný nástroj, ktorý dokáže zvládnuť aj tie najzložitejšie UI štruktúry. Facebook a Instagram, ktoré bežia na Reacte (knižnica bola vyvinutá programátormi Facebooku), sú toho dobrým príkladom.

Vue.js

Táto knižnica je najmladším príspevkom do rodiny JavaScript rozšírení. Nemôže sa síce pochváliť takou živou programátorskou komunitou, používatelia Vue.js ale tvrdia, že ide o mimoriadne prístupné rozšírenie, ktoré sa poučilo z chýb a úspechov svojich predchodcov a dá sa naučiť a používať rýchlo a jednoducho. Vue.js podobne ako Angular či React slúži na tvorbu single-page applications, pričom pracuje s virtual DOM na báze reaktívnych komponentov. Jeho syntax je však úspornejšia, programátor tak musí pre rovnaký výsledok napísať menej kódu. Flexibilita je jednou z najväčších devíz Vue.js. Zjednodušene by sa dalo povedať, že pokiaľ vám už nestačí jQuery a Angular je pre vás so svojim rozsiahlym ekosystémom zbytočne náročný, Vue.js je tá správna voľba.

//Názorná ukážka Vue.js kódu, ktorý v elemente <div> vypíše “Hello, World!”.

//HTML

<div id="app">
   {{ message }}
 </div>

//JS

 var app = new Vue({
   el: '#app',
   data: {
     message: 'Hello, World!'
   }
 })

Node.js

Viac ako framework je Node.js samostatný softwarový systém navrhnutý pre písanie webových serverov. Krátko po svojom vydaní si Node získal obrovskú popularitu, keďže okrem prehliadača sa JavaScript dal zrazu použiť aj na backende. Na rozdiel od ostatných JavaScript nástrojov teda Node nebeží v prehliadači, ale na strane servera a plnohodnotne tak nahrádza ostatné backendové jazyky ak PHP, Ruby, Python či Java.

Node.js si svoju obľúbenosť zaslúžil najmä jednoduchou použiteľnosťou a rýchlosťou načítavania, ideálne funguje v komunikácii a ťahaní dát zo servera. Vďaka nim je vhodný pre real-time aplikácie, napr. chaty a podobne. Hlavná výhoda tkvie v jeho asynchrónnom fungovaní, v čom má (ako vidieť na infografike) navrch napríklad oproti PHP.

Ktorý framework ste si pre svoj projekt zvolili vy? Využívate aj iné JavaScript nástroje, než tie, ktoré sme uviedli? V čom vidíte ich hlavné výhody a nevýhody? Podeľte sa s nami v komentároch.