jQuery? VUE!

Pokračujeme v zvrhlosti – Vue ako náhrada za jQuery.

V predchádzajúcej časti som nadškrtol myšlienku nahradiť jQuery frameworkom Vue, ale kydajúc na jQuery som sa ani len nedostal k sľúbenému príkladu, nieto ešte k vysvetleniu, prečo to má podľa mňa zmysel. A tak začnem z ostra – hneď v úvode tohoto dielu to napravím. Ide sa na príklad s tabuľkou, tento krát s Vue…

Sľúbený príklad

<div id="prihlaseni">
  <button @click="obnov">Obnov</button>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Meno</th>
        <th>Priezvisko</th>
        <th>Email</th>
      </tr>
    <thead>
    <tbody>
      <tr v-for="riadok in uzivatelia">
        <td v-for="stlpec in riadok">{{ stlpec }}</td>
      </tr>
    </tbody>
  </table>
<div>

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.16.2/dist/axios.min.js"></script>

<script>
  new Vue({
    el: '#prihlaseni',
    data: {
      uzivatelia: []
    },
    methods: {
      obnov: function () {
        axios
          .get('https://api.mockaroo.com/api/a0829af0?count=20&key=6e3c5aa0')
          .then(resp => this.uzivatelia = resp.data)
      }
    },
    created: function () {
      this.obnov()
    }
  })
</script>

[iframe src=”https://jsfiddle.net/provuecateur/azz2sr57/embedded/result,html,js/” width=”100%” height=”560″]

Príklad je aj tu plne funkčný. Ak by vám predsa len nefungoval a nezobrazoval zoznam užívateľov, tak je to pravdepodobne tým, že má mockaroo.com problém s certifikátom. Kliknite na nasledovné url zdroja údajov ( https://api.mockaroo.com/api/a0829af0?count=20&key=6e3c5aa0 ) – otvorí sa v novom okne – a potvrďte bezpečnostnú výnimku. Že to funguje sa prejaví tak, že vám z tej url stiahne json súbor. Ten len zmažte, zatvorte kartu a znovu spustite fiddle prepnutím sa z karty Result na napríklad na kartu HTML a potom späť na Result.

Rozoberme si ten kód: Všimnite si na značke BUTTON ako jednoducho sme si preň zaregistrovali počúvanie na udalosť click. Ďalej, že bunky vykreslujeme v samotnom html, čiže ako keby sme použili Mustache, alebo obdobnú knižnicu pre šablóny. Ďalej, že kvôli AJAX volaniam sme si museli pripnúť ďalšiu knižnicu. Za účelom rovnako jednoduchých AJAX volaní ako s jQuery sme si síce pripli konkrétne Axios, ale pokojne sme si mohli kvôli nim nechať pripojené aj jQuery. V kombinácii s Vue je však najčastejšie používaná vue-resorce, alebo snáď ešte častejšie Axios knižnica… Ale hlavne si všimnite, že po kliknutí na značku BUTTON a následným vykonaním metódy obnov() len aktualizujeme údaje uložené v poli “uzivatelia”, ale nikde neurčujeme, že sa má tabuľka prekresliť. To sa totiž udeje automaticky, pri každej zmene poľa “uzivatelia”. Plus, Vue sa postará, že prekreslenie stránky neprebehne hneď po aktualizácii údajov. Veď čo ak novo načítané údaje sú tie isté? Lebo sa od poslednej aktualizácie nikto neprihlásil / neodhlásil? No tak sa ani nič neprekreslí. Z HTML kódu ktorý označíme, že sa má o jeho kreslenie starať Vue, sa totiž najskôr vyskladá virtuálny DOM model. Po zmene údajov sa “prekreslí” virtuálny DOM, porovná sa s reálnym DOM modelom a len keď sú tam rozdiely, až potom sa v stránke prekreslia príslušné časti. A ak už sa niečo prekresľuje, tak bez layout trashingu – aj to Vue stráži za nás. Porovnajme si to bod po bode:

Čo sme stratili:

• AJAX volania

Čo sme získali:

• Jasný a prehľadný kód.
• Efektivitu – nemusíme kontrolovať údaje, či sa líšia od predošlých.
• Efektivitu – nehrozí layout trashing.

Čo nám ostalo:

• Udalosti – ale jednoduchšie – vrátane parametrov pre spätné volania.
• Animácie – a ešte jednoduchším spôsobom, len sme ich tu nepoužili.

Čo nám odpadlo:

• Selektory a traverzovanie. S Vue nie sú potrebné.

Ak si to spočítate, tak obetovaním AJAX volaní sme získali ešte jednoduchšiu tvorbu web stránok: selektory a traverzovanie už nie je potrebné, udalosti a animácie idú použiť jednoduchšie, výsledný kód je ďaleko čitateľnejší a výsledná stránka sa vykresluje efektívnejšie. A to sme ani poriadne nezačali…

Prv ako sa pustíme do vysvetľovania Vue, uvedieme si ešte jeden príklad. Ľahšie sa nám potom budú chápať tie vysvetľované princípy:

<div id="app">
  <data-grid
    zdroj="https://api.mockaroo.com/api/a0829af0?count=20&key=6e3c5aa0"
    :stlpce="{      
      id: 'ID',
      meno: 'Meno',
      priezvisko: 'Priezvisko',
      email: 'Email'
    }"
  ></data-grid>
<div>

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.16.2/dist/axios.min.js"></script>

<script>
  Vue.component('data-grid', {
    props: ['zdroj', 'stlpce'],
    template: `
      <div class="container">
        <button @click="obnov">Obnov</button>
        <table>
          <thead>
            <tr>
              <th v-for="stlpec in stlpce">{{ stlpec }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="riadok in udaje">
              <td v-for="bunka in riadok">{{ bunka }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    `,
    data: function () {
      return {
        udaje: []
      }
    },
    methods: {
      obnov: function () {
        axios
          .get(this.zdroj)
          .then(resp => this.udaje = resp.data)
      }
    },
    created: function () {
      this.obnov()
    }
  })

  new Vue({
    el: '#app'
  })
</script>

[iframe src=”https://jsfiddle.net/provuecateur/q0ooL08o/embedded/result,html,js/” width=”100%” height=”560″]

Nejak hlbšie rozoberať kód predošlých príkladov nemá momentálne zmysel. Po prvé, toto je článok o princípoch, nie tutoriál. A po druhé, ten syntax je beztak tak priamočiary, že je až samo vysvetľujúci. Stačí ak si uvedomíte, že hoci je jQuery postavené na úplne odlišnej filozofii ako Vue, obe sú zameniteľné, pretože vo výsledku ide obom o to isté. A ak je výsledok použitia oboch ten istý, prečo si radšej nezvoliť Vue? Keď jeho modernejší princíp umožňuje, že sa s ním k tomu istému výsledku dopracujem prehľadnejším a možno ešte kratším kódom? Ktorý následne v stránke funguje ešte efektívnejšie? To je to, na čo chcem upozorniť…

Avšak prvý príklad, hoci plne funkčný, nevystihuje princíp o čom Vue naozaj je. O komponentoch. Tak som napísal aj druhý, tento krát aj s použitím toho “komponentového prístupu” k tvorbe web stránok. Avšak treba hneď na začiatku dodať, že ten príklad nie celkom vystihuje o čom komponenty skutočne sú. Značka DATA-GRID je “custom element”, nie komponent. Chcelo by to hlbší popis, ale pre naše potreby stačí odniesť si poznatok, že zhruba takto to funguje. Komponenty definujú vlastné elementy, ktoré následne používame vo svojich stránkach…

Kód v druhom príklade zároveň aj ďaleko viac pripomína napríklad React. Ale je tu jeden rozdiel, pre ktorý mám (nie len ja) radšej Vue: Pre React je pri definícii komponentu preferované použitie JSX, je pre neho “natívne”, a pre Angular je zasa “natívne” použiť rovno TypeScript. Avšak oba idú použiť aj s čistým JavaScriptom, hoci v takom prípade už nie tak elegantne. A Vue zvolil opačný prístup: “natívne” je použiť čistý JavaScript, ale môžete použiť aj TypeScript… Z mojej strany bod pre Vue, pretože sa ľahko obídem aj bez serveru a transpilovania.

A posledný poznatok ktorý sa dá z druhého príkladu odniesť, je znovu použiteľnosť (reusability) komponentov. Vytvoril som ešte jeden zdroj dát, tento krát iných a pozrime sa, ako môžeme použiť ten komponent aj na iné dáta, bez toho aby sa zmenil čo len jediný riadok JavaScriptu. A potom konečne hurá do opisu Vue…

<div id="app">
  <data-grid
    zdroj="https://api.mockaroo.com/api/a0829af0?count=20&key=6e3c5aa0"
    :stlpce="{      
      id: 'ID',
      meno: 'Meno',
      priezvisko: 'Priezvisko',
      email: 'Email'
    }"
  ></data-grid>
  <data-grid
    zdroj="https://api.mockaroo.com/api/5a4cc1a0?count=20&key=6e3c5aa0"
    :stlpce="{      
      id: 'ID',
      domena: 'Doména',
      mac: 'MAC adresa',
      ip: 'IP adresa'
    }"
  ></data-grid>
<div>

<script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.16.2/dist/axios.min.js"></script>

<script>
  Vue.component('data-grid', {
    props: ['zdroj', 'stlpce'],
    template: `
      <div class="container">
        <button @click="obnov">Obnov</button>
        <table>
          <thead>
            <tr>
              <th v-for="stlpec in stlpce">{{ stlpec }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="riadok in udaje">
              <td v-for="bunka in riadok">{{ bunka }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    `,
    data: function () {
      return {
        udaje: []
      }
    },
    methods: {
      obnov: function () {
        axios
          .get(this.zdroj)
          .then(resp => this.udaje = resp.data)
      }
    },
    created: function () {
      this.obnov()
    }
  })

  new Vue({
    el: '#app'
  })
</script>

[iframe src=”https://jsfiddle.net/provuecateur/fkz1064t/embedded/result,html,js/” width=”100%” height=”1040″]

Čo je Vue

Sám seba definuje ako progresívny, škálovateľný JavaScriptový (MVVM) framework, určený na tvorbu užívateľských rozhraní. Takýto opis spomenutý hneď na začiatku by vám nič nedal. Ale teraz už z neho dáva zmysel napríklad to, že je škálovateľný, že nebol vytvorený ako monolitický framework, ale skôr ako sada knižníc, ktoré je možné dohromady použiť ako framework, ale ktoré idú použiť aj sami o sebe. A preto sa netreba báť aj ho tak použiť – je naprosto “natívne” aj toto naše: proste ho pripneme do kódu pomocou “script src” ako každú inú knižnicu a hneď ho môžeme začať používať – napríklad ako zmysluplnú náhradu za jQuery…

To MVVM v zátvorkách je zasa architektonický dizajn, ktorým sa inšpiroval. Týmto zasa pripomína Knockout. MVVM, čiže Model-View-ViewModel (alebo aj MVB, Model-View-Binder), je taký “novší MVC” princíp. Vo Vue sa dá ako Model označiť definícia komponentu, ako View zasa šablóna (template) toho komponentu a za ViewModel (Binder) sa považuje tá inštancia Vue (new Vue({}))…

No a samozrejme, že ho môžeme použiť aj na serverovej strane. Tak je to aj najideálnejšie a tam jeho komponentový princíp najlepšie využijete. A to nie len spolu s Node, ale pokojne aj spolu s PHP. Najčastejšie je však asi používaný s Node + Express + Webpack a v prípade PHP s Laravel frameworkom. Ale, hlavne ide použiť aj bez nich, na klientskej strane. Nie, že by aj konkurenčné frameworky nešli použiť aj len ako knižnica. Ale nie tak jednoducho a prehľadne ako Vue. A z toho vypýva druhý dôležitý dôvod, prečo po jQuery siahnuť ako prvé práve po Vue. Nie len, že ním ide nahradiť a zároveň sa tak naučíte ako sa dnes weby robia, ale zároveň má tak prehľadný syntax, že sa dá naučiť ďaleko rýchlejšie ako React, či Angular. Takzvaná krivka učenia je pri Vue fakt asi najstrmšia…

Nájde sa aj zopár ďalších dobrých argumentov, ale ako posledné skôr spomeniem asi najčastejší a najdôležitejší argument uvádzaný proti nemu:

React a Angular sú tu dlhšie, sú obľúbenejšie a častejšie používané a hlavne je ich znalosť zamestnávateľmi častejšie požadovaná…

No a? JASNE, že sú obľúbenejšie a častejšie používané, keď sú tu dlhšie. A s tým aj priamo súvisí, a len kvôli ich popularite, sú tým pádom častejšie požadované zamestnávateľmi. Ale to tak nebude navždy: popularita Vue rastie raketovým tempom a dokázal ich za kratší čas svojej existencie oba dobehnúť. A tak, hoci je už rovnako populárny, stalo sa to tak rýchlo, že firmy proste ešte nestihli zareagovať… A keby niekto tvrdil, že nedobehlo, nech si pozrie čísla z Githubu. React má aktuálne 76 000 hviezdičiek a Angular 57 000. A Vue 68 000… Už teraz v obľúbenosti predbehol Angular(2) A NAVYŠE jeho popularita rastie naďalej, a to ešte vyšším tempom oproti zvyšným dvom. Tak čo myslíte? Koľko mu potrvá kým ich oboch trhne?

No a uplatniteľnosť na trhu práce príde. Tá ide ruku v ruke s popularitou. Takže, čo tak miesto pesimizmu skúsiť prezieravo nasadnúť na ten vlak teraz? Keď má úspech prakticky zaručený, ale ešte ho toľko ľúdí neovláda? Jeho doba ešte len prichádza. Ešte aj kníh je o ňom viac rozpísaných kníh, ako dopísaných…

V konečnom dôsledku je to však fuk. Ako som napísal na začiatku, ide tu o reaktívne, znovu použiteľné komponenty, nie o flame war medzi top trojkou: React vs Angular vs Vue. A pre cieľovú skupinu tohoto článku Vue proste vychádza ako “first-choice” voľba…

To je k predstaveniu Vue, k tomu článku všetko. Ale, nie nutne koniec. Pokiaľ bude záujem zo strany čitateľov, môže z tohoto vzniknúť aj seriál, tento krát skutočný tutoriál, nie len intro. Je to na vás priatelia, howgh…