Používám Vue.js (aktuálně verzi 2.6) teprve pár měsíců, jsem nováček od léta 2019. Pro začátek si zde budu přidávat důležité zdroje pro učení a pochopení Vue. Proč Vue.js ? Umí pracovat s moderním Javascriptem (ES6 alias ES2015 např. arrow functions, template literals, modules). Webpack se mi postará o funkční kód.
Proč Vue.js
Vytvářet web s pomocí Vue.js je jako skládat stavebnici Lego. Je to rychlé, snadné a zábavné. Komponenty mezi sebou mohou komunikovat, předávat si data nebo je možné data ukládat do store (Vuex) a přistupovat k nim z libovolné komponenty přes gettery a actions.
- Vue.js má defaultně ochranu proti XSS narozdíl třeba od jQuery (prepend, append, html…).
- Vue.js umí pracovat s webem jako jednou stránkou a při přecházení nepotřebuje načítat znovu celý html kód (SPA).
- Vue.js narozdíl od jQuery nepracuje přímo s DOM, ale díky virtuálnímu DOMU (a rychlé synchronizaci s DOM) se nestane, že by jedna syntax error vyřadila z provozu Javascript na stránce (např. přestane fungovat poptávkový formulář, našeptávač, reklamní systém, nějaký widget apod.)
- Vue.js řeší routování (Vue router) URL a rychlé přepínání mezi URL s možností transition efektů.
- Vue.js má obrovskou komunitu, je snadné najít řešení problému Google/stackoverflow … narozdíl např. od Zend Framework 3 (PHP).
- Vue.js projekt umožňuje psaní stylů přímo v SCSS (variables, mixins) bez nutnosti starat se o jejich kompilaci (automaticky je převádí sass-loader na CSS)
- Vue.js umí běžet i na straně serveru (SSR) pro zlepšení SEO (čas načtení) díky frameworku Nuxt.js
Vue video kurzy a tutoriály
Vue.js Guide – oficiální příručka
The Vue Tutorial for 2018 – Learn Vue 2 in 65 Minutes
The Vue Instance – zdarma kurz na vuemastery.com
Vue JS 2 – The Complete Guide – kurz na Udemy za peníze
Vue Essentials – Cheat sheet – seznam triků
Vytvoření projektu Vue.js + PHP
Na vytvoření velkého projektu budu potřebovat kvalitní adresářovou strukturu, abych měl kód snadno upravitelný a znovupoužitelný. Budu se snažit rozdělovat kód na jednotlivé komponenty. Frontend projektu bude ve Vue.js, na backend použiju PHP (Zend Framework 3).
Jako router se nabízí plugin Vue-router (routy budou definované v souboru routes/routes.js). Router bude rozdělovat práci komponentám na základě URL (budu chtít URL s lomítkem na konci, i to se dá).
Na správu dat a stavu se hodí plugin Vuex. Data budu chtít ukládat do adresáře /store, kde bude store.js. Ve store.js budu chtít používat moduly z adresáře /store/modules.
Příprava nástrojů pro vývoj
Na vytváření projektu lze použít vue-cli (instalace: npm install -g @vue/cli)
V mém případě verze @vue/cli@3.11.0 (14.9.2019)
Založení projektu Vue a instalace potřebných pluginů
- vue create nazev-projektu
- npm install vue-router –save
- Bootstrap 4 (instalace: npm install vue bootstrap-vue bootstrap)
- Font Awesome 5 instalace:
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome
Facebook atd.
npm i --save @fortawesome/free-brands-svg-icons5. Google login button (npm install vue-google-signin-button)
Jak přepsat frontend do Vue.JS z nějakého PHP frameworku
Web potřebuje splňovat tyto body:
- rychlé načtení stránky (do 1 vteřiny)
- indexovatelnost ve vyhledávačích
- uživatelsky přátelský (reaktivní UI) – asynchronní načtení dat a časově náročných operací
PHP framework (např. Symfony, Zend Framework nebo vlastní MVC framework) je rychlý, vrací HTML+JS+CSS ze serveru, takže je stránka dobře indexovatelná pro vyhledávače, ale už neřeší třetí bod – reaktivitu UI.
JS framework (např. Vue.js, React, Angular) má rychlé načtení stránky (zde je trochu složitější konfigurace), neřeší indexovatelnost na 100% (Seznam.cz stále neumí indexovat obsah v Javascriptu ?), perfektně řeší třetí bod reaktivního UI. A navíc umí hot-reload (automatické provedení změny v prohlížeči při vývoji, v Zendu musím mačkat F5).
Otázka zní, jak psát web ve Vue.JS, aby splňoval všechny tři body ?
Pro rychlé načtení stránek asi bude dobré používat dynamické importy komponent, lazy loading routy a seskupovat komponenty do named chunks. Aby se nenačítal velký „bundle“ na stránce, kde ho nepotřebujeme.
Pro indexovatelnost ve vyhledávačích a rychlejší načtení webu musíme přidat do aplikace Vue SSR. Přidat SSR není snadné, máme na výběr více možností. Jedna z nich je použít V8JS modul v PHP, ale je to strašně složité a nejsem si jistý, jestli to je 100% funkční. Druhá možnost je použít Nuxt.js (pro React je to Next.js, pro Vue je to Nuxt.js). S tím zatím nemám zkušenosti, doplním později článek JAK FUNGUJE SERVER SIDE RENDERING JAVASCRIPT S NUXT.JS
Jak přidat do Vue.js projektu Nuxt.js
Přidat Nuxt.js nejde, protože Nuxt musí mít pevně danou adresářovou strukturu např. /pages. Musí se vytvořit nový projekt (npx create-nuxt-app nazev-projektu) a postupně přidat všechny komponenty, routy, store z původního projektu. Pro každou Page se musí všechny data() přehodit na asyncData().
Mocha unit testy
PHP projekt napsaný např. v Zend Framework 3 jde dobře testovat v PHPUnit, JS alternativa pro Vue se jmenuje Mocha. Další možností je Jest, ale ten neumí otestovat importované SCSS styly z Webpacku, takže Mocha je jasná volba pro unit testy.