Vue.js 2 tipy a řešení

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ů

  1. vue create nazev-projektu
  2. npm install vue-router –save
  3. Bootstrap 4 (instalace: npm install vue bootstrap-vue bootstrap)
  4. 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-icons

5. 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:

  1. rychlé načtení stránky (do 1 vteřiny)
  2. indexovatelnost ve vyhledávačích
  3. 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.

Add Comment

Required fields are marked *. Your email address will not be published.


tři × = 12