ue.js on steroids - exxcellent solutions...steroid 2: vue.js devtools steroid 3: vuex (redux für...

ue.js on SteroidsWie man aus einem guten Framework noch mehr herausholt

Wer sind wir?

Christian Hunger @frozencoffee

David Müller @dav1d55

David als Nuxt.js-Contributor

Projekterfahrung mit Vue.js aus einem mittelgroßen Projekt

www.exxcellent.de

http://www.exxcellent.de

eXXcellent solutions: Standorte

Darmstadt Ulm MünchenStuttgart

</werbung>

• Eine Übersicht über das Vue.js-Ökosystem

• Themen: u.a. Nuxt.js, Vuetify, Vue-rx, Vuex, Jest

• Konkrete Beispiele anhand einer Beispielanwendung

• Entscheidungshilfe: Kommt Vue.js für mein Projekt in Frage?

Vue.js on Steroids: Was bietet dieser Vortrag?

• Eine Einführung in Vue.js Grundlagen

• Reines Vue.js als Basis, sondern Nuxt.js

Vue.js on Steroids: Was bietet dieser Vortrag nicht?

Beispielanwendung

ue.js on Steroids ShopSupplements that make you a web development god

Steroid 1: Vue CLI

Vue CLI: Anwendungsgebiete

• Guter Einstiegspunkt zum Kennenlernen des Frameworks

• Generierung einer Projektstruktur anhand von Templates

Vue CLI: Nuxt & Vuetify Template

vue init vuetifyjs/nuxt app


vue create appvue init vuetifyjs/nuxt app

Vue CLI v3: vue ui

Steroid 2: Vue.js Devtools

Steroid 3: Vuex(Redux für Vue.js)

ZustandAnwendungslogik

UI

Vuex: Einordnung

• State Management á la Redux (Flux-Pattern)

• Zentraler Store, der den von verschiedenen Komponenten gemeinsam Zustand der Anwendung enthält

• Klar definierte Schnittstellen, um Zustand zu verändern und zu lesen

Vuex: Einführung

Vue.js Komponente

Single Page Application

Comp. Props

Actions Mutations

Store

Getter

Vuex: Store

Vue.js Komponente


Comp. Props

Actions Mutations

Store

Getter

• Verändern (mutieren!) den Store

• Unterschied zu (Redux-)Reducern (previousState, action) => newState

• Müssen synchron sein

• Aufruf: store.commit(Mutation.UPDATE_ARTICLE, { articleId: 42, … })

Vuex: Mutations

Vuex: Mutations

SHOW_SNACKBAR(state, message) { state.ui.snackbar.message = message state.ui.snackbar.visible = true }

Vuex: Mutations

• Gelegentlich Abstürze (z.B. zu viele Mutations)

Vue.js Komponente


Comp. Props

Actions Mutations

Store

Getter

Vuex: Actions

• Verändern selbst nicht den Store, sondern benutzen dazu Mutations

• Können asynchrone Abläufe (Seiteneffekte) abhandeln

• Aufruf: store.dispatch(Action.TRY_LOGIN, credentials)

Vuex: Actions

SHOW_NOTIFICATION: ({ commit }, message) => { commit(Mutation.SHOW_SNACKBAR, message) setTimeout(() => { commit(Mutation.HIDE_SNACKBAR) }, 2500) }

Vuex: Actions

FETCH_ARTICLE: async ({ commit, state }, articleId) => { commit(Mutation.INIT_ARTICLE, articleId) const { data } = await axios.get(`/api/article/${articleId}`) commit(Mutation.UPDATE_ARTICLE, data) return data }

Vuex: Actions

FETCH_ARTICLE: async ({ commit, state }, articleId) => { commit(Mutation.INIT_ARTICLE, articleId) const { data } = await axios.get(`/api/article/${articleId}`) commit(Mutation.UPDATE_ARTICLE, data) return data }

Gibt Promise zurück!

Vue.js Komponente


Comp. Props

Actions Mutations

Store

Getter

Vuex: Getter basket: state => state.basket

basketItem: state => articleId => { return state.basket.filter(item => item.articleId === articleId) }

Vue.js Komponente


Comp. Props

Actions Mutations

Store

Getter

Vuex: Computed Properties

Steroid 4: NUXT

(Next.js für Vue.js)

Nuxt.js: Einführung

• „Vue Meta Framework“

• Nutzt Vue.js 2 als Basis

Nuxt.js: Einführung

• Hauptfeatures: Server side rendering & Prerendering

• Vereinfachung durch „Convention over configuration“

• Projektstruktur

• Routing

• Webpack-Konfiguration

• ….

Nuxt.js: Routing

Nuxt.js: Routing

Automatisches Routing

Nuxt.js: Routing

async fetch({ store, params }) { await store.dispatch(Action.FETCH_CATEGORY, params.categoryId) const articleIds = store.getters.articleIdsForCategory(params.categoryId, params.pageId) await store.dispatch(Action.FETCH_ARTICLES, articleIds) },

Nuxt.js: Routing

Nuxt.js: Production Modes


SPA SPA mit SSR Prerendered SPA

Alles auch mit reinem Vue.js möglich!Aber: Erheblicher Konfigurationsaufwand


SPA Klassische Single Page Application


CDNClient

/search?q=brumergon

SPA

Grundgerüst der Anwendung Statisches HTML + JavaScript

Nuxt.js: Production Modes SPA

APIClient

API Call

Suchergebnisse JSON


„SPA the PHP-way“SPA mit SSR

Nuxt.js: Production Modes SSR

Client

/search?q=brumergon

(Node-)Server


Client

/search?q=brumergon

(Node-)Server

Statisches HTML (inkl. Suchergebnisse)

Nuxt.js: Server Side Rendering

async fetch({ store, params }) { await store.dispatch(Action.FETCH_CATEGORY, params.categoryId) const articleIds = store.getters.articleIdsForCategory(params.categoryId, params.pageId) await store.dispatch(Action.FETCH_ARTICLES, articleIds) },

Page Component

Wird auf dem Server ausgeführt


• Schnellere Ladezeiten (Mobile!)

• Bessere SEO möglich

Nuxt.js: Ladezeiten

Mit SSROhne SSR


• Node.js auf dem Server nötig, es werden nicht nur statische File/Bundles ausgeliefert

• Höhere Last auf dem Server => eventuell Caching sinnvoll


„Server Side Rendering Light“Prerendered SPA

Nuxt.js: Production Modes Pre

• Erzeugung von statischem HTML für jede Route (mit nuxt generate)

• Keine Dynamik auf dem Server nötig

• Bessere Wahl für Anwendungen mit hauptsächlich statischem Inhalt (z.B. Blogs)

• Vue.js: prerender-spa-plugin

Nuxt.js: Production Modes Pre

nuxt.config.js

Steroid 5: Vue-rx(Reactive Extensions für Vue.js)

• RxJS für Vue.js

• Reactive Extensions Integration (evtl. aus Angular bekannt)

• Observables aktuell Stage 1 ECMAScript-Proposal

Vue-rx: Einführung

Vue-rx: Anwendungsgebiete

• Zur Modellierung komplexer asynchroner Abläufe

• DOM-Events

• Websocket-Kommunikation

• Verarbeitung von stetig auftretenden Events

Vue-rx: Einführung

Vue-rx: Einführung

Produzent

Observer

Konsument

Operator

.debounce

OperatorObservable

Vue-rx: Code-Beispiel

Nuxt Plugin

Vue-rx: Konfiguration

• Steile Lernkurve (>130 Operators)

• Kann bei falscher Anwendung zu unnötig hoher Komplexität führen

• Schwer zu debuggen

Vue-rx: Nebenwirkungen

Steroid 6: Vuetify

Vuetify: Anwendungsgebiete

• Großer Bedarf an hochqualitativen, vordefinierten Komponenten (Vuetify bietet im Vue.js Umfeld die größte Auswahl)

• Mobile / Touch-Unterstützung als Anforderung

Vuetify: Formularelemente

Vuetify: Tabellen

Vuetify: Cards

Vuetify: Sonstiges

Vuetify: Dialoge

Vuetify: Nebenwirkungen

• Komponenten sind zwar anpassbar, Anwendung sieht aber trotzdem immer ein wenig nach Android aus

• Falls der Kunde ein spezielles Corporate Design wünscht eventuell nicht die richtige Wahl

Steroid 7:

Buefy: Anwendungsgebiete

• Alle Basiskomponenten vorhanden

• Einheitliches Look & Feel in Kombination mit eigenen, Bulma-basierten Komponenten

• Design leicht und umfassend anpassbar

Buefy: Formulare

Buefy: Tabellen

Buefy: Nebenwirkungen

• Weniger Auswahl an Komponenten

• Kleineres Entwicklungsteam

Steroid 8: Jest

• Test-Runner und -Framework

• Snapshot Tests

• Mocking

• Coverage

• Assertions

• mocha + chai + X

Jest: Einführung

Jest: Installation

Jest: Konfiguration

• „Zero configuration testing platform“

• Falls doch nötig: package.json

Jest: *.spec.js

Jest: Nebenwirkungen

• Läuft out-of-the-box nicht im Browser

• Falls doch nötig: jest-puppeteer (Headless Chrome Node API)

• Setup mit Vue CLI

• Server side rendering mit Nuxt.js

• State management mit Vuex

• Fancy op-piping mit Vue-rx

• UI-Komponenten aus Vuetify und Buefy

• Testing mit Jest

Vue.js on Steroids: Zusammenfassung

Endspurt: Zeit für Fragen

Vielen Dank für Ihre Aufmerksamkeit!

ue.js on steroids - exxcellent solutions...steroid 2: vue.js devtools steroid 3: vuex (redux für...

Documents