View
15
Download
0
Category
Preview:
Citation preview
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
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 CLI: Nuxt & Vuetify Template
Vue CLI: Nuxt & Vuetify Template
vue create appvue init vuetifyjs/nuxt app
Vue CLI v3: vue ui
Vue CLI v3: vue ui
Steroid 2: Vue.js Devtools
Steroid 3: Vuex(Redux für Vue.js)
ZustandAnwendungslogik
UI
Vuex: Einordnung
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
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
Vuex: Store
Vuex: Store
Vuex: Store
Vue.js Komponente
Single Page Application
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
Single Page Application
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
Single Page Application
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
Single Page Application
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
Nuxt.js: Production Modes
SPA SPA mit SSR Prerendered SPA
Alles auch mit reinem Vue.js möglich!Aber: Erheblicher Konfigurationsaufwand
Nuxt.js: Production Modes
SPA Klassische Single Page Application
Nuxt.js: Production Modes
CDNClient
/search?q=brumergon
SPA
Grundgerüst der Anwendung Statisches HTML + JavaScript
Nuxt.js: Production Modes SPA
APIClient
API Call
Suchergebnisse JSON
Nuxt.js: Production Modes SPA
APIClient
API Call
Suchergebnisse JSON
Nuxt.js: Production Modes
„SPA the PHP-way“SPA mit SSR
Nuxt.js: Production Modes SSR
Client
/search?q=brumergon
(Node-)Server
Nuxt.js: Production Modes SSR
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
Nuxt.js: Production Modes SSR
• Schnellere Ladezeiten (Mobile!)
• Bessere SEO möglich
Nuxt.js: Ladezeiten
Mit SSROhne SSR
Nuxt.js: Production Modes 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
Nuxt.js: Production Modes
„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: Tabellen
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!
Recommended