Vue.js – Vývoj mobilných aplikácií a informačných systémov
Počas programovanie webových informačných systémov a mobilných aplikácií sa stretne s mnoho možnosťami ako sa projekt dá vytvoriť. Či už je to rozdielne množstvo technológií, ich prípadné limitácie, podpora komunitou alebo aj samotná rýchlosť tvorby produkty. Aj napriek tomu, že Vue.js nie je jediná technológia, ktorú používame, rozhodne to je jedna z našich najoblľubenejších. Nespočetná podpora komunity, rýchlí vývoj a veľmi dobrá kompatibilita je jeden z faktorov, prečo sa Vue stalo neodeliteľnou časťou pri vývoji softvérových produktov.
Čo je Vue.js
Vue je všestranný JavaScriptový framework na tvorbu užívateľských rozhraní. Jeho základ tvoria štandardné webové technológie HTML, CSS a JavaScript. Umožňuje rýchly a jednoduchý vývoj užívateľských rozhraní a postupné škálovanie, vďaka čomu jeho popularita medzi front-end developermi stále rastie a dnes už má za sebou obrovskú komunitu.
Podpora Vue.js a komunita
Na Vue sú postavené populárne frameworky ako Nuxt, VuePress, Ionic, Quasar a mnohé ďalšie. Tým že má Vue za sebou takú veľkú komunitu, neustále pribúdajú rôzne pluginy ktoré zefektívňujú vývoj. Najčastejšie používané sú na vue router, state management, testovacie nástroje a Static-Site-Generation (SSG) a Server-Side-Rendering (SSR). Veľké plus je aj to že Vue má podporu pre TypeScript ktorý nám pomáha pri vývoji robiť menej chýb.
Prepojenie HTML stránky a dát
Jeho základným stavebným blokom sú komponenty ktoré prepájajú dáta s HTML templatom. To znamená, že keď sa zmenia dáta, zmení sa automaticky aj HTML template. V templatoch používame špecifickú syntax na prepojenie dát s HTML. Pre vypísanie hodnoty sa používa {{ hodnota }}. Okrem toho sú preddefinované direktívy ktoré môžeme použiť na HTML elementy, napríklad ak chceme podmieniť jeho vykreslenie, vykresliť elementy v zozname alebo reaktívne meniť jeho atribúty ako sú class, src a všetky ostatné ktoré sú súčasťou daného elementu alebo aj nami definované.
<template>
<div class="classes">
<p style="textStyle">Hello, {{ name }}</p>
<div v-if="condition">Conditionally rendered element</div>
<ul>
<li v-for="number in numArray">{{ number }}</li>
</ul>
</div>
</template>
<script setup>
import {reactive, ref } from 'vue'
const name = ref()
const condition = ref(false)
const numArray = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const classes = ref(['container', 'bg-dark'])
const textStyle = reactive({
})
color: 'black',
fontSize: '20px'
</script>
<style>
.container {
padding: 0 1rem;
}
.bg-dark {
background: #2c3e50;
}
</style>
Určite sa zhodneme že ak by sme chceli rovnaké správanie docieliť vo Vanilla JavaScripte alebo dokonca aj s použitím jQuery tak by sme museli napísať oveľa viac kódu.
Previazanie dát s webovou stránkou
Okrem toho nám Vue umožňuje previazať premennú s inputmi tzv. “two-way binding”, čo má za následok že keď sa zmenia dáta v premennej, odzrkadlí sa to v inpute a keď sa zmenia dáta v inpute zmení sa aj hodnota premennej. Táto vlastnosť umožňuje veľmi jednoduchú prácu s formulármi a spracovaním dát od užívateľa alebo napríklad predvyplnenie formuláru pri editácii už existujúcich dát.
<template>
<input type="email" v-model="email">
</template>
<script setup>
import { ref } from 'vue'
const email = ref()
</script>
Eventy / Udalosti vo Vue.js
Rovnako jednoducho vieme počúvať aj na eventy HTML elementov aj samotných Vue komponentov použitím špeciálneho syntaxu. To sa veľmi často využíva pri obsluhe buttonov alebo formulárov. Pri obsluhe natívnych eventov HTML elementov vieme už pri deklarácii direktívy napríklad zastaviť event bubbling @click.stop alebo predísť defaultnému správaniu sa elementu napríklad pri submit evente formuláru @submit.prevent. Týmto spôsobom nám Vue umožňuje pracovať so všetkými natívnymi eventami HTML elementov out-of-the-box.
<template>
<form @submit.prevent="handleFormSubmit">
<input type="email" v-model="email">
<input type="password" v-model="password">
<CustomInputComponent @custom-event="onCustomComponentEvent" s
<button type="submit" @click="onButtonClick">Submit</button>
</form>
</template>
<script setup>
import { ref } from 'vue'
import CustomInputComponent from '@/components/CustomInputComponent.vue'
const email = ref()
const password = ref()
const handleFormSubmit = () ⇒ {
}
// runs when form emits submit event
const onButtonClick = () ⇒ {
}
// runs when button is clicked
const onCustomComponentEvent = () ⇒ {
}
// runs when our custom component emits customEvent
</script>
Prepoužitie komponentov
Komponenty môžu mať podobne ako funkcie vstupné parametre tzv. properties. Práve vďaka tomu môžeme vytvoriť komponent ktorý používame na viacerých miestach v aplikácii a nie je viazaný na rovnaké dáta. Ako príklad môžeme použiť komponent Button ktorý môže mať ako properties farbu, štýl, veľkosť a podobne. Potom ho môžeme v aplikácii použiť na rôznych miestach a v prípade že je potrebná nejaká zmena, spravíme ju len na jednom mieste, v komponente Button. Vždy keď sa jeho props zmenia komponent sa prekreslí.
<template>
<div>
<ButtonComponent size="lg" outline color="primary">
Primary outline large Button
</ButtonComponent>
<ButtonComponent size="sm" color="secondary">
Secondary small Button
</ButtonComponent>
<ButtonComponent
:size="buttonConfig.size"
:color="buttonConfig.color"
:outline="buttonConfig.isOutline"
Dynamic button
</ButtonComponent>
</div>
</template>
<script setup>
import ButtonComponent from '@/components/ButtonComponent.vue'
import {reactive } from 'vue'
const buttonConfig = reactive({
size: 'sm',
color: 'primary',
isOutline: false
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
</head>
<body>
<div id="app">
← some html→→
<form-component
←!— some html→
</div>
<script type="module" src="/path/to/vue.js"></script>
</body>
</html>
Ako to ale vlastne funguje? Aktuálna verzia Vue aj všetky doterajšie používajú na uchovanie stavu a štruktúry všetkých komponentov Virtual DOM na základe ktorého následne vyrenderuje skutočný DOM. Virtual DOM je JavaScriptová reprezentácia skutočného DOMu. Funguje to tak že Vue sa pozrie na template a skompiluje ho do renderovacej funkcie, tá na základe dát vráti Virtual DOM Tree, následne sa mountne ako skutočný DOM a zobrazí sa. Akonáhle sa zmenia reaktívne dáta, renderovacia funkcia sa znovu spustí, vytvorí sa nový Virtual DOM Tree ktorý sa porovná so starým a všetky potrebné zmeny sa odzrkadlia v DOMe. Akékoľvek statické elementy ktoré nie sú prepojené s reaktívnymi dátami nevytvárajú ďalšie vetvy vo Virtual DOMe ale vytvoria sa len raz a Vue ich už nemusí zakaždým porovnávať lebo vie že sa nikdy nezmenia. Aktuálne sa už pracuje na novom spôsobe vykreslovania zmien pod názvom Vue Vapor, ktorý má odstrániť porovnávanie každého nodu vo Virtual DOMe a okamžite prekresliť presne tú časť ktorá sa zmenila.
Použitie Vue.js v inom riešení
Okrem toho že vue je možné použiť samostatne ako kostru celého projektu , môžeme ho vložiť aj do už existujúceho riešenia. Napríklad do aplikácie ktorá vracia celé HTML zo servera ale chceme pridať reaktivitu na formulár tak stačí ak tento formulár vytvoríme ako Vue komponent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
</head>
<body>
<div id="app">
← some html→→
<form-component
←!— some html→
</div>
<script type="module" src="/path/to/vue.js"></script>
</body>
</html>
V súbore vue.js potom vytvoríme inštanciu Vue, zaregistrujeme všetky komponenty ktoré použijeme a mountneme funkciou mount() ktorá berie ako parameter selektor elementu v ktorom musia byť vnorené všetky použité vue komponenty. Ak by sme použili class selektor a spadalo by pod neho viac elementov, Vue by sa mountlo len na prvý. Spravidla sa Vue mountuje na root element v body.
import { createApp } from 'vue'
import FormComponent from '@/components/FormComponent.vue'
createApp({})
.component('form-component', FormComponent)
.mount('#app')
SSR vs SPA
Je to naozaj všestranný framework či už na vývoj Single-Page-Applications (SPA), alebo ako doplnok do už existujúceho riešenia, jeho možnosti sú aj vďaka podpore SSR a SSG obmedzené len našou predstavivosťou. Napriek tomu že dnes už niektoré vyhľadávače dokážu indexovať aj SPA, je nutné dodať že ak sa kladie veľký dôraz na SEO tak SSR je v tomto prípade nutnosť pretože v prípade SPA sa zo servera vracia prázdna HTML stránka a obsah sa vyrenderuje až po spustení JavaScriptu.
