V dávnych časoch, časoch mýtov a Internet Exploreru, keď internetová rýchlosť nebola malicherná a poskytovala priestor venovať sa aj okolitému svetu, mocní vývojári na nás zoslali unikátny jazyk. Jazyk, ktorý má moc zjednotiť všetkých developerov frontendu a backendu. Zrušiť bariéry medzi web a mobile developmentom. Jeho meno je Javascript.

Javascript, respektíve jeho frameworky a knižnice, sa momentálne nachádzajú na najvyšších priečkach asi každého rebríčka popularity ohľadom web developmentu. Je nepodstatné bádať, či a ako dlho si svoju pozíciu udržia, ale vzhľadom na spoločnosti, ktoré stoja za top knižnicami a všetkému tomu “hypu” okolo nich, je jasné, že sa určite oplatí venovať im pozornosť.

Upozornenie: Pri písaní článku nebol žiadny kód nezodpovedne prepísaný. Autor nezodpovedá za prípadné škody spôsobené neuváženým refaktoringom. Článok nevznikol za účelom hejtovania tej či onej knižnice. 

Autor článku si uvedomuje, že porovnávanie frameworku (Vue) a knižnice (jQuery) môže vyzerať nezmyselne, ale prioritne ide o prezentáciu rozdielov jednotlivých riešení. 

Poďme sa teda na dnešných súperov pozrieť trocha bližšie:

jQuery

Každý frontend-ďák začína asi s tým najzákladnejším a najjednoduchším riešením, ktoré v JS svete môže nájsť, a to je jQuery. Knižnica sa používa primárne na manipuláciu a aktualizáciu DOM/CSS, binding eventov browsera, posielanie AJAX requestov a veľa daľších cool funkcií, ktoré uľahčili prácu pri písaní JS. Jej prvá verzia vznikla v roku 2006 vývojárom Johnom Resigom. Riadi sa heslom “Write less, do more”, ktoré pri menších riešeniach platí do bodky, ale pri tých väčších je to, bohužiaľ, presne naopak.

Dátum narodenia: 2006

Váha: 86,3 kb produkčná vs. 263 kb dev verzia

Silné stránky: browser podpora, jednoduchosť, množstvo pluginov

Slabé stránky: performance, udržovateľnosť pri väčších riešeniach

Popularita: 48 222 stars na githube

Vue

Proti jQuery nastupuje, možno pre niekoho neznámy framework Vue. Za Vjú, na rozdiel od svojich starších bratov – Angularu a Reactu, nestojí žiadna veľká firma, ale bývalý vývojár Googlu – Evan You, ktorý si práve od Angularu priniesol veľkú inšpiráciu. Aj keď nemá momentálne “hype” level ako jeho súrodenci, jeho kúzlo je v jednoduchosti, aké má jQuery, v sile Angularu a Reactu, a v špičkovom výkone.

Dátum narodenia: 2014

Váha: 76 kb produkčná vs. 240 kb dev verzia

Silné stránky: component based development, reaktivita, jednoduchosť, performance

Slabé stránky: release date

Popularita: 85 632 stars na githube

Ready? Fight!

1. kolo: Inštalácia

Obe knižnice je možné si buď stiahnuť k sebe lokálne na server, inštalovať použitím package managera ako NPM, YARN alebo zatiaľ ešte funkčným Bowerom či použitím CDN. V oboch prípadoch nie je nutný žiaden build proces, stačí jednoduchá inicializácia. Ďalšou výhodou je, že nie je problém dodatočnej bezbolestnej implementácie do existujúcich stránok.

jQuery pre správny beh potrebuje, aby jednotlivé eventy boli definované až po načítaní DOM.

<script type="text/javascript">
$(document).ready(function() {
    console.log("ready!");
});
</script>

Použitie Vue je podmienené vytvorením inštancie, ktorej nastavíte selectorom root element, aplikácie. V inštancii sa potom už definujú jednotlivé metódy – callbacky, šablóny a spracovávajú sa ich dáta na zobrazenie. Všetko pekne pokope.

<div id="app"></div>
 
<script type="text/javascript">
new Vue({
     el: '#app',
     data: {},
     methods: {},
     created: function () {
       console.log("ready!")
     }
});
</script>

Víťaz: Vue

Rozhodla prehľadnosť, rozšíriteľnosť a sila Vue inštancie.

2. kolo: Manipulácia s DOM

Zobrazovanie, skrývanie, aktualizovanie obsahu stránky bez nutnosti znovu načítania stránky, je v dnešnej dobe akýmsi štandardom.

jQuery tu naráža na viacero problémov, hlavným z nich je performance. Vyhľadanie prvku a aktualizácia jeho obsahu je náročná a pri práci s väčšími dátami jQuery značne nestíha.

<div id="app">
     <div id="value">0</div>
     <button>+1</button>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
    var value = 0;
 
    $('button').click(function()  {
       value++;
       $('#value').html(value);
    });
});
</script>

Veľká sila Vue je v jeho šablónach a reaktivite. Zmeny sa dejú nad takzvaným virtuálnym DOM stromom, v ktorom sú oveľa menej výpočtovo náročné ako zmeny nad reálnym DOM v prípade jQuery.

<div id="app">
    <div>{{ value }}</div>
    <button v-on:click="increment">+1</button>
</div>
 
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
       value: 0
    },
    methods: {
       increment: function() {
          this.value++;
       }
    }
});
</script>

Víťaz: Vue

Performance je v tomto jasne na strane Vue, ktorý je limitovaný len samotnou inicializáciou závislou od veľkosti HTML šablóny.

3. kolo: Eventy

Event je spôsob, akým komunikujeme s browserom. Či už je to kliknutie na element, hover efekt, odoslanie formulára, všetko má svoj definovaný event, na ktorý chceme vytvoriť určitý callback, odozvu, pre užívateľov našich stránok.

jQuery pracuje s eventami cez ich binding. Na jeden element sa môže nabindovať viacero eventov, v extrémnych prípadoch je pre jeho jeden event vytvorených viacero callbackov, čo začína byť postupom času neprehľadné a aj výsledné chovanie nemusí byť žiadané.

<div id="app">
    <div class="hide">Hide me!</div>
    <button>Push me</button>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
    $('button').click(function() {
       $('.hide').hide();
    });
});
</script>

Vue, na rozdiel od tohto prístupu, definuje callbacky na jednotlivé eventy priamo v šablónach, čiže hneď je jasné, ako sa daný element má správať.

<div id="app">
    <div v-if="!isHidden">Hide me!</div>
    <button v-on:click="hide">Push me</button>
</div>
 
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
       isHidden: false
    },
    methods: {
       hide: function() {
          this.isHidden = true;
       }
    }
});
</script>

Víťaz: Vue

jQuery má problém s bindingom dynamicky generovaných prvkov stránky, ktorý sa dá vyriešiť špeciálnymi bind metódami ako .on(), .delegate(), ale bohužiaľ, na úkor performance. Callbacky v rámci jednej inštancie sú pre Vue ďalším bonusom.

4. kolo: Pluginy vs. Komponenty

Pluginy v jQuery aj komponenty vo Vue majú rovnakú filozofiu, zabaliť určitú logiku/HTML komponenty do samostatného balíčka, ktorý je možné použiť na stránke aj viacnásobne, bez nutnosti duplikovania kódu. Ako takýto balíček si môžeme predstaviť elementy typu tabber, modálne okno, našepkávač, slider, atď. Obe knižnice majú možnosť si tieto balíčky stiahnuť, prípadne si napísať vlastný.

Použitie jQuery pluginov na stránke je často ovplyvnené dodržaním určitej HTML štruktúry. Inicializácia prebieha priamo v Javascripte.

<div id="app"></div>
 
<script type="text/javascript">
(function($) {
    $.fn.customPlugin = function() {};
} (jQuery));
 
$('#app').customPlugin();
</script>

Vue komponent je inicializovaný v HTML a jeho výslednú HTML štruktúru je možné zmeniť.

<div id="app">
    <my-component></my-component>
</div>
 
<script type="text/javascript">
Vue.component('my-component', {
    template: '<div>Component template</div>',
    data: function() {},
    methods: {}
});
 
new Vue({
     el: '#app'
});
</script>

Víťaz: jQuery

Aj keď práca s Vue komponentmi je oveľa prehľadnejšia, jQuery disponuje veľkou zbierkou knižníc + ich jQuery UI je stavebným kameňom aj mnohých našich webov.

5. kolo: Potenciál

jQuery je ešte pre mnohých synonymom pre samotný Javascript a jeho využitie si každý vždy nájde, ale žijeme v období reaktivity, v ktorej značne nestíha. Tu nastupuje Vue, ktorý má potenciál nahradiť aj samotný Angular, respektíve React.

Víťaz: Vue

jQuery nás možno ešte všetkých prežije, ale na jeho miesto nastupujú nové, pokročilejšie, knižnice a aj jeho pôvodný benefit (ak si odmyslíme jednoduchosť) v podobe cross browser kompatibility opadá, kedže sa do browserov tlačí na dodržiavanie určitých štandardov, a tým pádom už nie sú problémy so zostavením jednoduchého selectora, napísaním AJAX requestu, alebo inej požiadavky, ktorú by sme v časoch minulých museli pracne optimalizovať pre jednotlivé “exotické” browsery. Vue nielenže má väčší potenciál ako jQuery, ale jeho potenciál stúpa až k JS špičke.

Záver a víťaz:

Uvedené príklady boli, samozrejme, úplne basic, ale pri predstave komplexnejších riešení si určite každý uvedomí, že Vue je pre jQuery úplne iná liga. Článok nevznikol z dôvodu hejtovania jQuery, ale skôr ako menšie intro do Vue, ktoré u nás máme veľmi radi, a ak je pre vás React príliš komplikovaný, Angular zasa robustný, neváhajte, a vyskúšajte ho sami.