Bart Digital Products Bart Digital Products

Úvod do Vue.js

U nás vo firme vždy vítame možnosť zoznámiť sa s novou technológiou. Pred nedávnom sa nám takáto možnosť naskytla. V rámci našeho tímu Letenky.sk / Pelikán sme boli požiadaný o doplnenie funkcionality do existujúcej aplikácie napísanej vo frameworku Vue.js. Po dokončení projektu sa nám tento framework tak zapáčil, že sme sa v ňom rozhodli vyvíjať aj ďalšie single-page aplikácie.

VUE.JS

Vue.js patrí medzi najpopulárnejšie frameworky pre tvorbu SPA (Single Page Application). Spolu s Angularom a Reactom kraľujú rebríčku najpoužívnejších javascript frameworkov. Veľká výhoda Vue spočíva v tom, že je minimalistický a rýchly. Samotné jadro Vue.js slúži podobne ako v prípade Reactu hlavne pre dynamickú prácu s UI. Pokročilejšie veci ako routovanie a podobne je potrebné doplniť cez dodatočné knižnice. Framework je tiež veľmi jednoduchý na naučenie. Na internete je možné nájsť množstvo dokumentácie a návodov pre prácu s Vue. Základy fungovania Vue sú veľmi podobné Reactu / Angularu a teda ak máte skúsenosti s niektorým z týchto frameworkov, práca s Vue sa vám bude zdať veľmi intuitívna a povedomá.

Komponenty

Komponenty sú základné stavebné jednotky vo Vue aplikácii. Práca s komponentmi je vo Vue veľmi podobná ako v prípade Reactu alebo Angularu. Komponent má svoj vlastný stav a vlastnosti. Stav komponentu je vo Vue je označovaný ako data. Dá sa chápať ako analógia state v Reacte. Stav si ovláda a mení samotný komponent. Zmeny hodnôt premenných v stave je možné sledovať cez watchery. Watcher sa nastaví na konkrétnu premennú v data. Následne sa táto funkcia zavolá po každej zmene hodnoty danej premennej. To môže byť užitočné ak chceme napríklad vykonávať určité animácie v prípade zmeny hodnôt.

Props (vlastnosti) prichádzajú od rodičovskej komponenty a slúžia na predávanie hodnôt (prípadne funkcií) do komponentu. Každá property môže mať definovaný typ (boolean, string, array, function a pod.). Props teda zastávajú rovnakú úlohu ako v prípade Reacte.

Vykreslenie komponentu sa štandardne robí cez definovanú HTML šablónu. Tento spôsob je podobný šablónam v Angulari. Šablóna sa môže nachádzať buď v samostatnom súbore alebo v jednom súbore spolu s logikou komponentu. Okrem toho je na vykreslenie možné použiť aj funkciu render, podobne, ako to robí React. Taktiež je možné cez babel plugin pridať podporu JSX, čím je samotné vykreslovanie prakticky rovnaké ako v prípade Reactu.

Komponent má tiež svoje lifecycle metódy, ktoré sú vyvolávané v životnom cykle komponentu. React / Angular programátori určite vedia o čom je reč. :)

Nasledujúci diagram ukazuje názvy a poradie vykonávania lifecycle metód.

Šablóny

Vue šablóny umožňujú všetky veci, ktoré od kvalitného šablónovacieho systému požadujeme. Vypisovanie hodnôt, podmienkovanie (if aj else), cykly pre prechádzanie položiek v poli, dynamická úprava css štýlov a tried pre elementy a množstvo iného. Oficiálna dokumentácia k šablónam je prehľadná a nachádza sa tam veľa názorných príkladov.

VUEX

VUEX je knižnica, ktorá slúži na správu stavu aplikácie. V zložitejšej aplikácie s väčším množstvom komponent môže byť výmena a úprava informácií medzi jednotlivými komponentmi dosť komplikovaná záležitosť. Preto nám VUEX poskytuje možnosť držať stav aplikácie na jednom mieste, do ktorého budú mať prístup všetky komponenty. VUEX by sa dal chápať ako alternatíva reduxu v reacte. Nie je to ale úplne to isté, v reduxe je stav nemenný a vyvolávaním akcií, následným odchytením reducerom sa zo starého stavu vytvára stav nový.

Vo VUEX sa robí priamo zmena hodnôt v existujúcom stave a to cez mutácie. Tie priamo menia hodnoty v stave. Mutácie sa vždy vykonávajú synchrónne.

Okrem mutácií tu existujú aj akcie. Akcie obsahujú logiku zmeny stavu a následne vyvolávajú mutácie, čím dochádza k zmene stavu aplikácie. Vykonávanie akcií prebieha asynchrónne.

NUXT

NUXT je framework rozširujúci Vue.js o ďalšiu funkcionalitu umožňujúce tvorbu komplexnejších aplikácií. NUXT je tiež od začiatku vyvíjaný s ohľadom na server-side rendering, prípadne je v ňom možné vygenerovať statické HTML súbory, čo môže veľmi výrazne pomôcť SEO. Okrem toho NUXT obsahuje routovanie, lepšiu prácu s asynchrónnymi dátami v komponente, podporu pre pluginy, rozdelenie aplikácie do modulov, VUEX a veľa ďalšieho.

Záver

Cieľom článku bolo krátke predstavenie frameworku Vue.js a jeho základných vlastností. Nám sa na Vue páči hlavne jeho rýchlosť a jednoduchosť. Veľkým plusom je tiež to, že základ fungovania je veľmi podobný reactu / angularu, a teda používanie Vue je pre frontend programátorov intuitívne.

Máš toto všetko v malíčku? Potom sa pridaj do nášho tímu!