Webové aplikace

SPA, Vue

Připravil: Ing. Jiří Lýsek, Ph.D.

Verze: 9. 4. 2019

Single page application

• Plnohodnotná aplikace běžící v

prostředí prohlížeče

– O vše se stará JavaScript

– Pouze jedno stažení HTML+JS+CSS

• Proto „Single page“

• Navigace a změna URL přes API prohlížeče

– Zbytek komunikace přes REST API pomocí

asynchronních požadavků

– Framework nutný

strana 2

Co zůstane na

backendu?

Není reload – stav

udržuje frontend!

Single page application

• Výhody

– Oddělení frontendu

a backendu

– Interaktivnější a

rychlejší

– REST API

použitelné i pro jiné

aplikace

• Nevýhody

– Složitější vývoj

– Nutné přemýšlet

jinak

– Indexace

vyhledávačem

strana 3

Frameworky pro SPA

• AngularJS a Angular

– Plnohodnotný framework (mnoho funkcí)

– TypeScript nebo Dart

• React

– Jen GUI knihovna, nutno doplnit funkce

– JSX

• Vue

– Něco mezi

– JavaScript

strana 4

Workflow při vývoji – stav

• Rozsáhlá aplikace

– Nutné rozdělit kód do mnoha souborů

– Používá různé knihovny (node_modules)

• Nutné použít „bundler“

– Webpack

– Browserify

– Vlastní řešení pomocí Gulp nebo Grunt

strana 5

Workflow při vývoji - průběh

• Bundler sleduje váš kód

• Při změně v kódu se spustí proces,

který sestaví JS pro prohlížeč

– spojí JS a vloží se odkazované závislosti

na knihovny

– kopíruje statické soubory (obrázky)

– spojí CSS

• Vzniklé statické JS, HTML a CSS

soubory se obvykle někam nakopírují

strana 6

Workflow při vývoji – důsledky

• Kód v prohlížeči není kód, který píšete

– Složité debugování v prohlížeči

– .map soubory

• Chvíli to trvá, než se kód přeloží

• Je to složité

– Blbě se to konfiguruje

• Je to neprůhledné

– Blbě se to ladí při chybách

strana 7

A bohužel s tím

moc nejde

udělat…

Framework Vue

• https://vuejs.org/

– Verze 2.x

• Pomocí Vue CLI lze inicializovat projekt

ze šablony (bundler Webpack)

– https://cli.vuejs.org/

– vue create slozka

– cd slozka

– npm run dev

strana 8

Instalace z

jednotlivých

balíčků je složitá

Framework Vue

• Proč?

– Používá čistý JS

– Přehledné šablony

• Oddělené HTML, CSS a JS

– Dobrá dokumentace

– Rostoucí popularita

strana 9

Vue – komponenty

• Komponenty tvoří strom

– Vlastní HTML značky pro komponenty

• Single-file komponenty

– Šablony

– JS – API

• Funkce data()

• Objekt methods

– Styly

strana 10

Kde je

globální logika

aplikace?

Vue – komponenty<template>

<div>

<button @click="change">

{{msg}}

</button>

</div>

</template>

strana 11

<script>

export default {

data() {

return {

msg: 'Hello World!'

}

},

methods: {

change() {

this.msg = 'Bye!';

}

}

}

</script>

<style>

button {

color: #FF0000;

}

</style>

Jediný

kontejner!

Ukázka: https://jsfiddle.net/fs9uj7pg/

Vue – komponenty

• Životní cyklus

– https://vuejs.org/v2/guide/instance.html

– Pozor: komponenta může být znovupoužita

s jinými daty ale zachová si vnitřní stav.

strana 12

Vue – šablony

• @události a modifikátory

– @submit.prevent

• :binding

• v- direktivy a modifikátory

– v-if, v-for, v-model, v-model.number

• Vložení proměnné a filtry

– {{promenna|filtr}}

• Vložení jiné komponenty

strana 13

Checkpoint

• Jaký je rozdíl mezi SPA a „klasickou“

aplikací?

• Na jaké projekty se SPA hodí?

• Proč použít k inicializaci projektu s Vue

raději šablonu pomocí Vue CLI?

• Co vše je ve Vue komponentě?

• Stačí pro SPA statický hosting (bez

PHP)?

strana 14