Lekce 1 - Úvod do Vue a první aplikace

VueJS

VueJS je jeden ze tří v současnosti nejoblíbenějších a nejužívanějších JavaScriptových frameworků, další dva jsou React a Angular. Pořadí popularity těchto tří frameworků se neustále mění, Vue boduje hlavně svou přímočarostí, jednoduchostí. Mezi přednosti Vue můžeme též započítat rozsáhlý ekosystém a přátelskou, komunikativní developerskou komunitu. Historicky vznikly celkem tři hlavní verze Vue, přičemž nejvíce kódu je v tuto chvíli asi napsáno ve Vue 2. Poslední verze, Vue 3, je poměrně zásadně inovativní a my jsme se rozhodli náš kurz psát už rovnou v této verzi. V této sérii tedy budeme kódovat ve VueJS 3.x.

Vlastnosti

Proč by jsme zrovna měli psát web ve Vue namísto oblíbeného Reactu a nebo enterprise Angularu? Spoustu začátečníků se k Vue obrací kvůli jednoduchosti. Místo toho, aby jsme jako v Reactu psali celý frontend v JSX, můžeme psát normální HTML a tomu dát potom život pomocí Vue. Kromě toho má Vue.js optimalizovaný výkon a jeho minifikovaná verze má pouze kolem 20 KB.

Reaktivnost

Dejme si jednoduchou situaci. Zákazník po nás chce, abychom udělali stránku, která zobrazí teplotu bazénu u něj doma z jeho databáze a měla by být aktualizovaná každou hodinu. Brnkačka, každou hodinu mu budeme přepisovat stránku a vyděláme si snadno peníze. Co kdyby teď zákazník chtěl stejnou stránku, akorát pro celé město a interval aktualizace by měla být 1 minuta, namísto 1 hodiny?

To je přesně ten okamžik, kdy se hodí využít dynamický reaktivní web. Připojíme se k databázi a automaticky aktualizujeme web, kdykoliv si uživatel zamane, tohle zní dobře, ne?

Funkce

Vue.js je jeden ze tří hlavních JavaScript frameworků, který nám dovoluje psát dynamický web a dosazovat si proměnné do HTML, například z databáze či API, routovat URL adresy a mnohem více. Můžeme ho používat v normálním HTML dokumentu pomocí tagu pro script nebo si vytvořit kompletně nový Vue projekt, který má úplně všechno, co Vue obsahuje (ne jen jeho dynamické vlastnosti).

Cíl kurzu

V průběhu našeho kurzu si naprogramujeme ve Vue jednoduchou kalkulačku, která bude umět provádět základní aritmetické operace s čísly. V průběhu jejího kódování se naučíme vytvářet opakovaně použitelné Vue komponenty, pochopíme jejich základní strukturu, funkcionalitu a integraci v rámci aplikace. Výsledkem našeho kódování bude kalkulačka jako hotová webová aplikace. Naše kalkulačka bude na konci kurzu vypadat takto:

Potřebné znalosti

Pro tento kurz budete potřebovat základní znalosti HTML, CSS a samozřejmě JavaScriptu, kde se hodí také kurz Debuggingu. JavaScript budeme psát tak, jak je ve Vue obvyklé, tedy se všemi rozšířeními a funkcionalitami ECMAScript 5. Je vhodné také umět TypeScript, ale není to nutností, jelikož my v TypeScriptu programovat nebudeme. V kurzu rovněž předpokládáme vaši základní znalost práce s příkazovým řádkem - Terminál (MAC) nebo PowerShell (Windows), popř. příkazový řádek.

Developerské prostředí

Pro práci ve Vue potřebujeme mít na svém počítači globálně instalovaný NodeJS, a to minimálně ve verzi 8.9 (doporučená je nicméně verze 10 a více). Instalaci si v tomto pokročilém kurzu určitě ukazovat nebudeme, nejde však o nic těžkého a možná ho už z jiných kurzů nainstalovaný máte. Abychom mohli snadno spravovat náš nový projekt z příkazového řádku, nainstalujeme si nejprve @vue/cli (command line interface). V terminálu (MAC, Linux) nebo PowerShellu (Windows) zadejme příkaz pro npm nebo yarn:

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

Příkazem výše jsme globálně nainstalovali prostředí pro správu Vue projektů z příkazového řádku. V tomto prostředí budeme moci vytvářet nové projekty, spouštět developerský webový server, testovat aplikace anebo generovat jejich výslednou podobu pro production.

Nakonec je potřeba nějaké IDE. Osobně využiji Visual Studio Code, ale není to podmínkou

Vytvoření nového projektu

Otevřeme si příkazový řádek v adresáři, kde chceme vytvořit nový projekt. Potom zadáme příkaz:

vue create calculator

Zobrazí se vám nabídka možností pro vytvoření nového projektu.

Šipkami sjeďme dolů a zvolme možnost "Manually select features". Předchozí možnosti představují předdefinované kolekce parametrů, my si budeme chtít parametry zvolit jednotlivě ručně, přičemž si vysvětlíme jejich význam.

Parametry projektu

V seznamu parametrů vidíme zvolené parametry - tučné kolečko vlevo, a nezvolené parametry - prázdné kolečko vlevo. Mezi jednotlivými parametry přepínáme šipkami, volbu označujeme, resp. označení rušíme mezerníkem. Po správném nastavení všech parametrů potvrdíme volbu klávesou Enter.

• Choose Vue version - umožňuje nám zvolit verzi VueJS. Volbu ponecháme označenou a v dalším dialogu zvolíme verzi 3.0, ve které budeme kódovat naši aplikaci.
• Babel - volbu ponechejme označenou. Instalace balíčku Babel nám umožňuje používat v kódování nejnovější syntaktické vymoženosti JavaScriptu (ECMAScript 5, ECMAScript 7, apod.)
• TypeScript - volbu ponechejme neoznačenou. Aplikace ve VueJS je možné psát i v TypeScriptu, my se však v tomto kurzu omezíme na čistý JavaScript.
• Progressive Web App Support - volbu ponechejme neoznačenou, naše aplikace bude pouze jednostránková - jednoduchá Single Page Application
• Router - volbu ponechejme neoznačenou. Vue Router představuje nástroj pro zobrazování obsahu podle URL parametrů. Naše aplikace bude mít pouze jedinou stránku, routování tedy prozatím nepotřebujeme.
• Vuex - volbu ponechme neoznačenou. Vuex je nástroj pro správu datového obsahu, umožňuje sdílet data napříč všemi komponentami, které jsou součástí aplikace. Protože naše aplikace bude datově jen velmi málo náročná, Vuex v tuto chvíli nepotřebujeme.
• CSS Pre-processors - volbu ponechejme neoznačenou. Vue nám umožňuje používat při stylování komponent CSS preprocesory, například SASS nebo Stylus. Abychom se vysvětlováním syntaxe preprocesorů nezdržovali, budeme styly v naší aplikaci psát v čistém CSS, proto preprocesory zatím nepoužijeme.
• Linter / Formatter - Lintování kódu je velmi užitečná věc, volbu ponecháme označenou. V dalším dialogu zvolíme ESLint with error prevention only. ESLint nás bude pouze upozorňovat na syntaktické chyby, nebude nám klást detailní nároky na správné formátování, apod., dále potom zvolíme Lint on save
• Unit Testing - volbu ponechme neoznačenou, testovat v tomto úvodním kurzu nebudeme
• E2E Testing - volbu ponechme neoznačenou, testovat nebudeme

V následující nabídce dialogu na příkazovém řádku zvolíme možnost uložení konfiguračních parametrů do zvláštních souborů ("In dedicated config files") namísto možnosti uložení do package.json.

Další nabídka dialogu představuje možnost uložení konfiguračních parametrů do zvláštního souboru tak, aby mohly být využity příště, až budeme vytvářet nějaký nový podobný projekt. Ponechejme na vaší volbě, zda chcete parametry uložit.

Nakonec se nás to zeptá, zda chceme využít balíčkovací systém Yarn nebo NPM. Volba je opět na vás, pokud máte nainstalovaný Yarn, můžete si ho zvolit. Já osobně zvolím NPM.

Nový projekt

Prostředí @vue/cli nám v tuto chvíli vytvořilo nový projekt, který se jmenuje calculator. V příkazovém řádku do tohoto adresáře vstupme:

cd calculator

a uvnitř adresáře pak spusťme developerský webový server příkazem:

npm run serve

Tentýž adresář pak můžeme otevřít ve svém code editoru/IDE, kde budeme psát vlastní kód. Já osobně pro kódování ve Vue používám Visual Studio Code od Microsoftu, použití tohoto editoru však určitě není podmínkou, můžete použít jiný váš oblíbený editor.

Ve webovém prohlížeči (pro vývoj doporučuji Google Chrome) pak zadáme adresu http://localhost:8080. Prohlížeč nám zobrazí úvodní stránku aplikace, kterou pro nás automaticky vygenerovalo @vue/cli. Měla by vypadat nějak takto:

Souborová struktura

Ve svém textovém editoru bychom měli vidět následující souborovou strukturu nového projektu:

Pozornost věnujme nejprve souboru index.html v adresáři public/. Všimněme si, že Vue pro nás předdefinovalo tag <noscript>, který se bude zobrazovat uživatelům, kteří ve svém prohlížeči nemají povolený JavaScript. Hlášku v tagu <noscript> samozřejmě můžeme libovolně upravit.

V souboru index.html je rovněž odkaz na ikonu favicon.ico. Link odkazuje do téhož adresáře public/, v němž se ikona skutečně nachází. V tuto chvíli je to základní logo VueJS. Ikonu můžeme změnit tím, že soubor favicon.ico nahradíme jiným. Dále si v tomto souboru všimneme, že byl automaticky vytvořen element <div id="app">. Tento element představuje tělo naší aplikace. Právě do něj budou vkládány všechny komponenty, které v aplikaci napíšeme.

Adresář src/ je místo, do kterého budeme psát náš kód. V podadresáři assets/ zatím najdeme jen logo Vue, které se zobrazuje na úvodní stránce.

Adresář src/components/ představuje místo, kam budeme ukládat jednotlivé Vue komponenty, které napíšeme. Prozatím obsahuje automaticky vygenerovanou komponentu HelloWorld.vue.

Všimněme si dále souboru App.vue, který byl vygenerován v adresáři src/. Toto je základní kořenová komponenta naší aplikace, kterou upravíme v následující lekci.

V neposlední řadě pak prohlédneme soubor main.js, který najdeme taktéž v adresáři src/:

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

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

Soubor importuje metodu createApp() z Vue a základní kořenovou komponentu App.vue. Spuštěním metody createApp() se následně vytváří Vue aplikace a komponenta App.vue je přiřazena elementu <div id="app">, který byl vytvořen v souboru index.html.

Pokud máte nějaké problémy, můžete si celý projekt stáhnout níže. Pro dnešní obsáhlou lekci ale to je již vše

V další lekci, Komponenty ve Vue, si představíme Vue komponentu jako základní stavební prvek aplikace. Seznámíme se se strukturou Vue komponenty a s tím, jak se komponenty využívají napříč aplikací. První Vue komponenty si nakódíme.