1. diel - Úvod do Vue.js a prvej aplikácie

VueJS

VueJS je jeden z troch v súčasnosti najobľúbenejších a najpoužívanejších JavaScriptových frameworkov, ďalšie dva sú React a Angular. Poradie popularity týchto troch frameworkov sa neustále mení, Vue boduje hlavne svojou priamočiarosťou, jednoduchosťou. Medzi prednosti Vue môžeme tiež započítať rozsiahly ekosystém a priateľskú, komunikatívna developerskú komunitu. Historicky vznikli celkom tri hlavné verzie Vue, pričom najviac kódu je v tejto chvíli asi napísané vo Vue 2. Posledná verzia, Vue 3, je pomerne zásadne inovatívna a my sme sa rozhodli náš kurz písať už rovno v tejto verzii. V tejto sérii teda budeme kódovať vo VueJS 3.x.

Vlastnosti

Prečo by sme zrovna mali písať web vo Vue namiesto obľúbeného React a alebo enterprise Angular? Veľa začiatočníkov sa k Vue obracia kvôli jednoduchosti. Namiesto toho, aby sme ako v React písali celý frontend v JSX, môžeme písať normálne HTML a tomu dať potom život pomocou Vue. Okrem toho má Vue.js optimalizovaný výkon a jeho minifikovaná verzia má len okolo 20 KB.

Reaktívnosť

Dajme si jednoduchú situáciu. Zákazník od nás chce, aby sme urobili stránku, ktorá zobrazí teplotu bazénu u neho doma z jeho databázy a mala by byť aktualizovaná každú hodinu. Brnkačka, každú hodinu mu budeme prepisovať stránku a zarobíme si ľahko peniaze. Čo keby teraz zákazník chcel rovnakú stránku, akurát pre celé mesto a interval aktualizácie by mala byť 1 minúta, namiesto 1 hodiny?

To je presne ten okamih, kedy sa hodí využiť dynamický reaktívne web. Pripojíme sa k databáze a automaticky aktualizujeme web, kedykoľvek si užívateľ zachce, toto znie dobre, nie?:)

Funkcie

Vue.js je jeden z troch hlavných JavaScript frameworkov, ktorý nám dovoľuje písať dynamický web a dosadzovať si premenné do HTML, napríklad z databázy či API, routovat URL adresy a oveľa viac. Môžeme ho používať v normálnom HTML dokumentu pomocou tagu pre script alebo si vytvoriť kompletne nový Vue projekt, ktorý má úplne všetko, čo Vue obsahuje (nie len jeho dynamické vlastnosti).

Cieľ kurzu

V priebehu nášho kurzu si naprogramujeme vo Vue jednoduchú kalkulačku, ktorá bude vedieť vykonávať základné aritmetické operácie s číslami. V priebehu jej kódovanie sa naučíme vytvárať opakovane použiteľné Vue komponenty, pochopíme ich základnú štruktúru, funkcionalitu a integráciu v rámci aplikácie. Výsledkom nášho kódovanie bude kalkulačka ako hotová webová aplikácia. Naša kalkulačka bude na konci kurzu vyzerať takto:

Potrebné znalosti

Pre tento kurz budete potrebovať základné znalosti HTML, CSS a samozrejme JavaScriptu. JavaScript budeme písať tak, ako je vo Vue obvyklé, teda so všetkými rozšíreniami a funkcionalitami ECMAScript 5. Je vhodné tiež vedieť TypeScript, ale nie je to nutnosťou, pretože my v TypeScriptu programovať nebudeme. V kurze takisto predpokladáme vašu základná znalosť práce s príkazovým riadkom - Terminál (MAC) alebo PowerShell (Windows), popr. príkazový riadok.

Developerské prostredie

Pre prácu vo Vue potrebujeme mať na svojom počítači globálne inštalovaný NodeJS, a to minimálne vo verzii 8.9 (odporúčaná je však verzia 10 a viac). Inštaláciu si v tomto pokročilom kurze určite ukazovať nebudeme, nejde však o nič ťažkého a možno ho už z iných kurzov nainštalovaný máte. Aby sme mohli ľahko spravovať náš nový projekt z príkazového riadku, nainštalujeme si najprv @vue/cli (command line interface). V termináli (MAC, Linux) alebo PowerShellu (Windows) zadajte príkaz pre NPM alebo yarn:

npm install -g @vue/cli
# nebo:
yarn global add @vue/cli

Príkazom vyššie sme globálne nainštalovali prostredie pre správu Vue projektov z príkazového riadku. V tomto prostredí budeme môcť vytvárať nové projekty, spúšťať developerský webový server, testovať aplikácie alebo generovať ich výslednú podobu pre production.

Nakoniec je potreba nejaké IDE. Osobne využijem Visual Studio Code, ale nie je to podmienkou:)

Vytvorenie nového projektu

Otvoríme si príkazový riadok v adresári, kde chceme vytvoriť nový projekt. Potom zadáme príkaz:

vue create calculator

Zobrazí sa vám ponuka možností pre vytvorenie nového projektu.

Šípkami zídu dolu a zvoľme možnosť "Manually select features". Predchádzajúce možnosti predstavujú preddefinované kolekcie parametrov, my si budeme chcieť parametre zvoliť jednotlivo ručne, pričom si vysvetlíme ich význam.

Parametre projektu

V zozname parametrov vidíme zvolené parametre - tučné koliesko vľavo, a nezvolenej parametre - prázdne koliesko vľavo. Medzi jednotlivými parametrami prepíname šípkami, voľbu označujeme, resp. označenie rušíme medzerníkom. Po správnom nastavení všetkých parametrov potvrdíme voľbu klávesou Enter.

• Choose Vue version - umožňuje nám zvoliť verziu VueJS. Voľbu ponecháme označenú a v ďalšom dialógu zvolíme verziu 3.0, v ktorej budeme kódovať našu aplikáciu.
• Babel - voľbu ponechajte označenú. Inštalácia balíčka Babel nám umožňuje používať v kódovaní najnovšej syntaktické vymoženosti JavaScriptu (ECMAScript 5, ECMAScript 7, a pod.)
• TypeScript - voľbu ponechajte neoznačenú. Aplikácia vo VueJS je možné písať aj v TypeScriptu, my sa však v tomto kurze obmedzíme na čistý JavaScript.
• Progressive Web App Support - voľbu ponechajte neoznačenú, naše aplikácie bude iba jednostranová - jednoduchá Single Page Application
• Router - voľbu ponechajte neoznačenú. Vue Router predstavuje nástroj pre zobrazovanie obsahu podľa URL parametrov. Naša aplikácia bude mať iba jedinú stránku, routovanie teda zatiaľ nepotrebujeme.
• Vuex - voľbu ponechajme neoznačenú. Vuex je nástroj pre správu dátového obsahu, umožňuje zdieľať dáta naprieč všetkými komponentmi, ktoré sú súčasťou aplikácie. Pretože naša aplikácia bude dátovo len veľmi málo náročná, Vuex v túto chvíľu nepotrebujeme.
• CSS Pre-processors - voľbu ponechajte neoznačenú. Vue nám umožňuje používať pri štýlovanie komponentov CSS preprocesoru, napríklad SASS alebo Stylus. Aby sme sa vysvetľovaním syntaxe preprocesorov zdržaniu budeme štýly v našej aplikácii písať v čistom CSS, preto preprocesoru zatiaľ nepoužijeme.
• Linter / Formatter - Lintování kódu je veľmi užitočná vec, voľbu ponecháme označenú. V ďalšom dialógu zvolíme ESLint with error prevention only. ESLint nás bude len upozorňovať na syntaktické chyby, nebude nám klásť detailné nároky na správne formátovanie, apod., Ďalej potom zvolíme Lint on save
• Unit Testing - voľbu ponechajme neoznačenú, testovať v tomto úvodnom kurze nebudeme
• E2E Testing - voľbu ponechajme neoznačenú, testovať nebudeme

V nasledujúcej ponuke dialógu na príkazovom riadku zvolíme možnosť uloženia konfiguračných parametrov do zvláštnych súborov ( "In dedicated config files") namiesto možnosti uloženia do package.json.

Ďalšia ponuka dialógu predstavuje možnosť uloženia konfiguračných parametrov do zvláštneho súboru tak, aby mohli byť využité nabudúce, až budeme vytvárať nejaký nový podobný projekt. Ponechajte na vašej voľbe, či chcete parametre uložiť.

Nakoniec sa nás to spýta, či chceme využiť balíčkovací systém Yarn alebo NPM. Voľba je opäť na vás, ak máte nainštalovaný Yarn, môžete si ho zvoliť. Ja osobne zvolím NPM.

Nový projekt

Prostredie @ vue / cli nám v tejto chvíli vytvorilo nový projekt, ktorý sa volá calculator. V príkazovom riadku do tohto adresára vstúpme:

cd calculator

a vnútri adresáre potom spustí developerský webový server príkazom:

npm run serve

Ten istý adresár potom môžeme otvoriť vo svojom code editore / IDE, kde budeme písať vlastný kód. Ja osobne pre kódovanie vo Vue používam Visual Studio Code od Microsoftu, použitie tohto editora však určite nie je podmienkou, môžete použiť iný váš obľúbený editor.

Vo webovom prehliadači (pre vývoj odporúčam Google Chrome) potom zadáme adresu http: // localhost: 8080. Prehliadač nám úvodné zobrazenie aplikácie, ktorú pre nás automaticky vygenerovalo @vue/cli. Mala by vyzerať nejako takto:

Súborová štruktúra

Vo svojom textovom editore by sme mali vidieť nasledujúce súborovú štruktúru nového projektu:

Pozornosť venujme najprv súboru index.html v adresári public/. Všimnime si, že Vue pre nás předdefinovalo tag <noscript>, ktorý sa bude zobrazovať používateľom, ktorí vo svojom prehliadači nemajú povolený JavaScript. Hlášku v tagu <noscript> samozrejme môžeme ľubovoľne upraviť.

V súbore index.html je tiež odkaz na ikonu favicon.ico. Link odkazuje do toho istého adresára public/, v ktorom sa ikona skutočne nachádza. V tejto chvíli je to základná logo VueJS. Ikonu môžeme zmeniť tým, že súbor favicon.ico nahradíme iným. Ďalej si v tomto súbore všimneme, že bol automaticky vytvorený element <div id="app">. Tento element predstavuje telo našej aplikácie. Práve do neho budú vkladané všetky komponenty, ktoré v aplikácii napíšeme.

Adresár src/ je miesto, do ktorého budeme písať náš kód. V podadresári assets/ zatiaľ nájdeme len logo Vue, ktoré sa zobrazuje na úvodnej stránke.

Adresár src/components/ predstavuje miesto, kam budeme ukladať jednotlivé Vue komponenty, ktoré napíšeme. Zatiaľ obsahuje automaticky vygenerovanú komponent HelloWorld.vue.

Všimnime si ďalej súboru App.vue, ktorý bol vygenerovaný v adresári src/. Toto je základná koreňová komponenta našej aplikácie, ktorú upravíme v nasledujúcej lekcii.

V neposlednom rade potom prezrieme súbor main.js, ktorý nájdeme taktiež v adresári src/:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Súbor importuje metódu createApp() z Vue a základné koreňovú komponent App.vue. Spustením metódy createApp() sa následne vytvára Vue aplikácie a komponenta App.vue je priradená elementu <div id="app">, ktorý bol vytvorený v súbore index.html.

Ak máte nejaké problémy, môžete si celý projekt stiahnuť nižšie. Pre dnešný obsiahlu lekciu ale to je už všetko:)

V ďalšej lekcii, Komponenty vo VueJS , si predstavíme Vue komponent ako základný stavebný prvok aplikácie. Zoznámime sa so štruktúrou Vue komponenty as tým, ako sa komponenty využívajú naprieč aplikácií. Prvé Vue komponenty si nakódíme.