Webové aplikace

• interaktivní webová aplikace
• chová se jako aplikace
• kompletní systém
• často i desktopové / mobilní aplikace (Discord, Spotify, ...)
• DámeJídlo, Google Drive, Trello, (školní portál)

Tvorba takové stránky v čistém JS by bylo těžké.

Správa

• spousta souborů
• různé části se vážou na sebe
• opakování kódu
• různé reference na stránku (identifikátory, třídy, ...)

Řešení?

Webové frameworky

Webový framework

• předpřipravená knihovna k vytváření prostředí
• způsob vytvoření ucelené aplikace
• většinou používá různé šablony a vnich JS
• různé návrhy - předpřipravené věci
• např. Vue, React, Angular

Vue

Vue

• webový framework
• založen na návrhu Angularu
• open-source
• https://vuejs.org/

Vue

• především jednostránkové stránky (jedno HTML)
• umí i více
• většinou jako frontend - pracuje na klientovi
• umí i na serveru

Vue

• velmi malé a rychlé
• dobrá komunita - spousta knihoven a možnost studia

Vue lze instalovat & používat jako Node.js balíček.

Prozatím v .HTML souboru pomocí JS skriptu.

Vue je zároveň překladačem JSX - překládá speciální jazyk velmi podobný HTML do funkčního HTML s JS funkčnostmi.

v2 vs. v3

Ahoj světe!

Práce s JS uvnitř šablony

Reaktivita

• Vue automaticky hlídá na čem jsou dané elementy vázané
• když se dané data změní, překreslí se daný element

Direktivy

• způsob manipulace se šablonou
• překladač (compiler) poté zpracuje na funkční část kódu
• v podstatě atribut
• začíná v-

Direktiva v-bind

• vloží nějakou hodnotu dovnitř atributu na prvku
• za smth uvnitř v-bind:smth se dává jméno atributu, kterému bude nastavena hodnota

Direktiva v-if

• z výrazu vyhodnotí, zda se má daný blok vykreslit
• bolean hodnota / výraz

Direktiva v-model

• funguje pouze na input, textarea, select
• když se hodnota změní v daném inputu, změní se i jako proménná v kódu
• všechny místa, kde se proměnná používá se překreslí