Nuxt Workshop - 2020

Nuxt

Proč nuxt

  • ready to go řešení pro SSR (vs vue SSR)
  • code splitting 
  • jasně daná projektová struktura
  • slušná podpora komunity

Co je nuxt?

  • server
    • express js 
    • SSR pro nuxt 
    • 🤷‍♂️ teoreticky jakékoliv API 
  • frontend
    • vue.js 
  • build 
    • universal rendering - SPA vs SSR
    • teoreticky vše vyřešené bez většího nastavování

Easy part

  • pokud používám nuxt prakticky mě zajímají 3 věci
  • Layouts 
    • definice obecného layoutu 
    • definice erorů
  • Pages
    • definice jednotlivých stránek 
  • Components
    • definice komponent na stránce

 

Náš postup za 👌developer experience

  • ideálně přijde FE develoeper poprvé do práce, zmáčkne yarn a yarn dev a všechno funguje
  • problém - závislost na monolitu
  • dvě možnosti
    • jde mi všechno ale nemám HMR
      • (jde řešit ale potřebujeme vyrobit vlastní proxy)
      • nutnost mít zprovozněnou aktuální verzi monolitu
    • nejde mi všechno ale mám HMR
      • některé věci nemusejí fungovat na 100% 
      • custom řešení některých věcí jako 
  • 👉 dočasná nutnost mít nějaké vlastní skripty pro jednoduší vývoj

Mezi monolitem a naší službou

  • ❗️jedná se o službu která dokáže obsarat všechny země
  • monolit jako garant autentizace 
  • resolve základních dat, které potřebujeme k renderu
  • rozhodování o tom co vykreslíme 
    • + můžeme si dovolit spouštět postupně
    • - budeme muset nějaký čas
      udržovat dvě řešení zároveň
  • nastavení se předává v hlavičkách
    • x-shop-id
    • x-shop-user
    • ...

Mezi monolitem a naší službou

Typescript a vue.js

  • používáme knihovnu vue-property-decorator https://github.com/kaorun343/vue-property-decorator
  • používáme dekorátory k komponent
  • @Component, @Prop, @Ref etc
  • nevýhoda I.
    • uvnitř dekorátoru @Component je dostupné "this"
    • ale typescript říká ne 🙅‍♂️
    • určitě se podaří vyřešit zatím používáme naší metodu 
      • getInnerValue
  • nevýhoda II. 
    • typescript support hodně pomáhá ale je vidět že je tam naroubovaný - looking forward to vue 3 😋

Konfigurace

  • not so simple!
  • několik "druhů konfigurace"
    • konfigurace nuxt
      • nastavení nuxtu, zapojení plugins a modulů etc
      • soubor nuxt.config.js
    • základní "nastavení" resolvuje monolit a předává se v hlavičkách
    • konfigurace pro aplikaci
      • server vs frontend - secure property (jen pro server)
      • ❗️je důležité si uvědomit co je dostupné na serveru a co naklientu
      • nastavení - /config/appConfig.ts a .env -> do vaultu 🔑
    • přístupné přes this.$env
    • konfigurace v graphql
      • sdílené konfigurace s monolitem
      • http://mal-urban.cs.mall.test/graphql
        • shopconfig, feature flags
        • nastavitelné ve webadminu - nutné nastavit visibility pro frontend❗️
      • dostupné přes graphql

Globální proměnné

  • některé věci se hodí všude
  • jak to tam dostat 👉 Plugin
  • kde to můžu použít 👉 this
  • jak to můžu otypovat 👉 nuxt.d.ts

Nuxt plugins

  • přidává se do složky /plugins
  • nastavení v nuxt.config.js
  • aktuální pluginy
    • setup graphql
    • nastavení translates
    • nastavení logování
    • nastavení knihoven a vue pluginů
  • https://nuxtjs.org/guide/plugins/
  • ❗️tady se projevuje rozdíl mezi Serverem a klientem

Překlady

  • překlady jsou uložené ve webadminu - překlady
  • v rámci pluginu se nastaví pro daného klienta správné překlady
  • sdílíme překladové klíče s monolitem
  • ❗️snažíme se stahovat jen to co je potřeba
    • použití namespaces
  • použití:

Routování

  • tady jsme museli předělat funkcionalitu nuxt (nuxt je založen na routingu dle složkové struktury)
  • pro každý request v rámci pluginu napushujeme do routeru 
  • potřebujeme se chytře rozhodovat jestli je stránka SPA nebo PHP
  • middleware na resolving
  • u web components je potřeba používat m-link 
    • rozhodnutí mezi použití mezi <a> a <nuxt-link>
    • nastavení v pluginu webComponentsConfiguration
  • nastavení routes je pak v celku přímočaře řešeno v config/routes.ts
  • ❗️pokud chci zaregistrovat novou route musím
    • vyplnit component (to je page - hlavní komponenta)

Graphql

Jak získat aktuální verzi graphql

  • npm run script:graphql-codegen
    • ​vygenerování interfaces na základě serveru
    • kvůli interfaces
  • .graphqlconfig
    • ​stažení schématu lokálně - kvůli napovídání ve schématech gql
  • 😭 ANO mohl by to dělat jeden task

Graphql

  • důležité property 
    • fetchPolicy
    • variables
    • update
    • result
    • skip
    • error

Graphlq vs REST API

  • ne všechno lze dělat proti urbanu
  • košík, různé legal věci - všechno co jde do oracle
  • těšíme se na cart api 😋
  • nicméně veškerý stav aplikace se snažíme udržovat v graphql
  • HARD PART ❗️ - resp. jednoduchý principy, ale musím tomu trochu rozumět
  • definice toho co používáme ve WebApi
  • nutnost pracovat s csrftokenem
  • definice lokálních věcí v gqlLocal

Vývoj s webcomponents

  • nevýhoda - musíme počítat s tím, že po update komponent je třeba mít závislost v nuxt aplikaci
  • pro lokální vývoj existují dvě možnosti
    • npm link (nepoužíváme)
    • skripty pro copy a cleanup web component
      • využít napsané
      • napsat si vlastní 
  • tohle není uplně ideální zatím

Logování

  • sentry
  • prometheus
  • kibana

Caching

Nuxt workshop

By Radim Štěpaník

Nuxt workshop

  • 49
Loading comments...

More from Radim Štěpaník