Vue, Vuex, Nuxt,… znie to ako vývojové štádium nejakého Pokémona. Zvládnuť prvé dve štádiá je ešte celkom jednoduché. Teraz je čas posunúť sa na vyšší level. JS development má neskutočný vývoj. Javascript už nie je len na frontendoch, ale aj na backendoch. Nakódiš v ňom webové aplikácie a stránky, ale aj aplikácie do telefónu, desktopu, hodiniek… Všade samý Javascript. Či to je správne a koľko tento trend vydrží, na to si netrúfnem odpovedať. Rôzne ankety a prieskumy hovoria jasne – JS je teraz jednoducho cool a určite ešte nejaký čas aj ostane.

Preto sme aj my v Riešeniach naskočili na tohto trendového koňa. Pôvodné výhovorky prečo Vue.js nemá šancu (framework jedného človeka, už je tu React a Angular, nevie to xy, na Slovensku to nikto nepozná,…), už sú dávno minulosťou a ekosystém okolo tohto frameworku neustále narastá. Komunita je stále väčšia a väčšia. V niektorých štatistikách dokonca poráža aj skúsenejších predchodcov.

Angular vs. React vs. Vue: Which Framework to Choose in 2019 – www.codeinwp.com

A tak, ako dozrieva Vue (mimochodom, o chvíľu dozreje už do očakávanej verzie 3.0!), aj naše komponenty potrebujú trocha nakopnúť a posunúť na vyšší level. Nebudeme si klamať, chceme si aj otestovať nejaké nové fíčury, ktoré nám aktuálny build umožňuje riešiť len veľmi kľukatými cestami. Vue.js sme implementovali do nášho projektu RSHOP až dodatočne, už ako do existujúcej aplikácie. Nemali sme priestor na veľké experimenty a ani framework nebol dostatočne preverený. Byť pokusným králikom sa nie vždy vypláca a dávať do produkcie niečo neoverené je zbytočne veľký risk. Navyše, pracovať s technológiou, o ktorú možno časom ani nebude záujem, by úplne zabilo naše ciele rozširovať náš top tím developerov.

Preto sme radšej zvolili proces iteratívnej implementácie. Od malých elementov stránky, ktoré sú jednoducho izolovateľné. Nákupný košík a našepkávač boli prvými kandidátmi na rewrite. Výsledok? Rýchlosť implementácie bol úplný luxus a počet riadkov kódu sa znížil viac než o tretinu. Hlavne sme pôvodné riešenie (áno, bolo to v jquery) dokázali prekódiť do takej štruktúry, ktorá bola pripravená na bezbolestné rozširovanie ďalšej funkcionality. V pôvodnom kóde sa už niekedy nevyznal ani jeho tvorca, a to bolo znamenie veľkého problému do budúcna.

Single File Components sú ďalším benefitom, vďaka ktorému je možné mať pokope v jednom súbore CSS, JS a šablónu celého komponentu. Píšeš CSS v SASS? Alebo na HTML používaš šablóny Jade? Stačí nastaviť property a kód môžeš zapisovať podľa tvojej voľby. Ďalej máš možnosť písania scoped CSS, čo znamená, že bude CSS aplikované len na komponent, ku ktorému kód patrí. Teda neriešiš žiadne konflikty s CSS v úplne inom scope.

Single File Components – vuejs.org

Prvá výzva nastala, keď prišlo na dáta. Udržiavať dáta priamo v komponentoch a snažiť sa ich mať aj konzistentné, bolo stále náročnejšie. Vznikalo kopec nadbytočného kódu, ktorý mal na starosť iba synchronizáciu dát, či už smerom hore k parentom, alebo k iným komponentom, ktoré s dátami taktiež pracovali. Potrebujem mať State management, čo je centralizovaný store pre celú aplikáciu. React má na to Redux, Angular NgRX, Vue.js Vuex.
Má 3 hlavné časti, ak teda nerátam state – moje dáta:

• 1. Getters – metódy, ktoré vracajú dáta zo stavu.
• 2. Mutations – funkcie, ktorými môžem modifikovať stav.
• 3. Actions – iné custom metódy, napríklad na volanie mutations.

What is a „State Management Pattern“? – vuex.vuejs.org

Aby som dáta mohol rozdeliť do samostatných celkov, napríklad podľa funkcionality, používam Vuex moduly. Nemusím teda moc vymýšlať unikátny naming pre dáta alebo funkcie. Keď dopýtam produkty v košíku, viem s určitosťou, že nedostanem produkty napríklad z wishlistu.

Dobre, takže už mám poriešené komponenty a state management. Čo ale také SEO? Alebo UX? Nechcem, aby prvé, čo užívateľ uvidí na mojom webe, bolo prázdne miesto. Či dokonca úplne prázdna stránka. V tomto stave by bola akákoľvek JS chyba tisíckrát bolestivejšia, keďže by sa môj web nemusel z tej čisto bielej stránky vôbec dostať. Alebo čo taký performance na slabších zariadeniach? Nie každé zariadenie má 10 jadier, 20GB RAM a iné uletené parametre, kvôli ktorým by sme špinavú robotu mali nechať na klientovi. Teraz trocha ulietam, ale radšej si budem 100%-ne istý, že minimálne 90% stránky sa načíta ako má a asynchrónne elementy si pokryjem testami.

Server Side Rendering (SSR)

Vo výsledku to znamená, že do browsera už ide zo servera vygenerovaný obsah, ktorý je plne funkčný. Inak povedané, rendering sa deje na backende, na frontende sa len inicializuje Vue.js aplikácia. Pre viac info odporúčam prejsť si dokumentáciu k Vue.js SSR. Po rozbehaní som mal bežiaci express server, build Single File Components a peknú ukážku, ako fungovať s univerzálnym kódom.

Celé sa mi to zdalo dosť zbytočne zložité. Po skúsenostiach s vue-cli, som bol presvedčený, že sa dá tento proces zjednodušiť. A naozaj. Nuxt je to, čo som hľadal.

Inštalácia

Stačí vytvoriť nový Nuxt projekt cez príkaz npx, ktorý by si mal mať automaticky naištalovaný v počítači s novšou verziou NodeJS.

npx create-nuxt-app

Vyklikáš si, aké tooly chceš do projektu nainštalovať (pwa podpora, testing, lintering,…), vyberieš v akom móde má aplikácia bežať (pre SSR chceš Universal mode) a hotovo – máš pripravenú štruktúru s routovaním, komplet buildom, live realoadingom a ďalšími featurami, o ktorých ešte ani neviem. Pripraveným npm skriptom spustím build, všetko pekne funguje na prvý pokus. Žiadne zložité nastavovanie. Žiadne inštalovanie ďalších packages. Žiadne náročné nastavovanie webpacku. Môžeš sa sústrediť len na svoj kód. Framework už za teba porieši špinavú robotu.

Čo sa štruktúry týka, stránka je rozdelená na layout, pages a components.
Layout – kostra stránky, miesto, kde chceš vložiť hlavičku, navigáciu, pätičku,…
Pages – obsah stránky, teda homepage, produktová stránka, nákupný košík
Components – komponenty/elementy, z ktorých vyskladáš obsah

Creating Server-side Rendered Vue.js Apps Using Nuxt.js – www.toptal.com

Routovanie, pluginy, server a ostatné veci sa konfigurujú v súbore nuxt.config.js.

Asynchrónne dáta

Cieľom je mať čo najrýchlejšiu prvú odpoveď zo servera. Načítanie dát a renderovanie sa deje komplet na strane klienta. Ak mám na stránke niekde úplne dole box, ku ktorému sa užívateľ niekedy ani nedoscrolluje, môžem ho načítať lazy-loadom. Problém nastane v prípade vypnutého JS v browseri, alebo inej JS chyby, kedy som v… keli :).

  created() {
    const _self = this
 
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        _self.$store.commit('setPosts', response.data)
      })
  }

Synchrónne dáta/Server Side Rendering + REST

V tomto príklade je žiadané, aby som zo servera dostal vygenerovaný komponent. V zdrojovom kóde stránky budem vidieť jej obsah. Na zobrazenie obsahu nie som limitovaný zapnutým JS v browseri. Async/await je to, čo potrebujem. Pred funkciu, kde bude riešený REST call, pridám príznak async. To znamená, že daná funkcia vráti Promise. Keď pred axios vložím await, Javascript bude čakať, kým Promise nevráti výsledok. Viac sa o tejto téme dočítaš tu. Metóda fetch je určená na naplnenie store ešte pred začiatkom renderovania komponentu.

  async fetch({ store, params }) {
    await axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        store.commit('setPosts', response.data)
      })
  }

Základ mám teda pripravený. Teraz už mi neostáva nič iné, len začať makať na mojej super-cool-sexy aplikácii. Čo s tým ďalej, alebo viac k téme Vue.js ti poviem nabudúce.