ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für...
Transcript of ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für...
![Page 1: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/1.jpg)
ue.js on SteroidsWie man aus einem guten Framework noch mehr herausholt
![Page 2: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/2.jpg)
Wer sind wir?
![Page 3: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/3.jpg)
Christian Hunger @frozencoffee
David Müller @dav1d55
![Page 4: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/4.jpg)
David als Nuxt.js-Contributor
![Page 5: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/5.jpg)
Projekterfahrung mit Vue.js aus einem mittelgroßen Projekt
![Page 7: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/7.jpg)
![Page 8: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/8.jpg)
eXXcellent solutions: Standorte
Darmstadt Ulm MünchenStuttgart
![Page 9: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/9.jpg)
</werbung>
![Page 10: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/10.jpg)
• 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?
![Page 11: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/11.jpg)
• Eine Einführung in Vue.js Grundlagen
• Reines Vue.js als Basis, sondern Nuxt.js
Vue.js on Steroids: Was bietet dieser Vortrag nicht?
![Page 12: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/12.jpg)
Beispielanwendung
![Page 13: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/13.jpg)
![Page 14: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/14.jpg)
ue.js on Steroids ShopSupplements that make you a web development god
![Page 15: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/15.jpg)
![Page 16: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/16.jpg)
Steroid 1: Vue CLI
![Page 17: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/17.jpg)
Vue CLI: Anwendungsgebiete
• Guter Einstiegspunkt zum Kennenlernen des Frameworks
• Generierung einer Projektstruktur anhand von Templates
![Page 18: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/18.jpg)
Vue CLI: Nuxt & Vuetify Template
vue init vuetifyjs/nuxt app
![Page 19: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/19.jpg)
Vue CLI: Nuxt & Vuetify Template
![Page 20: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/20.jpg)
Vue CLI: Nuxt & Vuetify Template
vue create appvue init vuetifyjs/nuxt app
![Page 21: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/21.jpg)
![Page 22: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/22.jpg)
![Page 23: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/23.jpg)
![Page 24: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/24.jpg)
Vue CLI v3: vue ui
![Page 25: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/25.jpg)
Vue CLI v3: vue ui
![Page 26: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/26.jpg)
Steroid 2: Vue.js Devtools
![Page 27: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/27.jpg)
![Page 28: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/28.jpg)
![Page 29: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/29.jpg)
![Page 30: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/30.jpg)
![Page 31: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/31.jpg)
Steroid 3: Vuex(Redux für Vue.js)
![Page 32: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/32.jpg)
ZustandAnwendungslogik
UI
Vuex: Einordnung
![Page 33: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/33.jpg)
ZustandAnwendungslogik
UI
Vuex: Einordnung
![Page 34: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/34.jpg)
• 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
![Page 35: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/35.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 36: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/36.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 37: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/37.jpg)
Vuex: Store
![Page 38: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/38.jpg)
Vuex: Store
![Page 39: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/39.jpg)
Vuex: Store
![Page 40: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/40.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 41: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/41.jpg)
• 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
![Page 42: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/42.jpg)
Vuex: Mutations
SHOW_SNACKBAR(state, message) { state.ui.snackbar.message = message state.ui.snackbar.visible = true }
![Page 43: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/43.jpg)
![Page 44: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/44.jpg)
Vuex: Mutations
• Gelegentlich Abstürze (z.B. zu viele Mutations)
![Page 45: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/45.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 46: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/46.jpg)
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)
![Page 47: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/47.jpg)
Vuex: Actions
SHOW_NOTIFICATION: ({ commit }, message) => { commit(Mutation.SHOW_SNACKBAR, message) setTimeout(() => { commit(Mutation.HIDE_SNACKBAR) }, 2500) }
![Page 48: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/48.jpg)
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 }
![Page 49: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/49.jpg)
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!
![Page 50: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/50.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 51: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/51.jpg)
Vuex: Getter basket: state => state.basket
basketItem: state => articleId => { return state.basket.filter(item => item.articleId === articleId) }
![Page 52: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/52.jpg)
Vue.js Komponente
Single Page Application
Comp. Props
Actions Mutations
Store
Getter
![Page 53: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/53.jpg)
Vuex: Computed Properties
![Page 54: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/54.jpg)
Steroid 4: NUXT
(Next.js für Vue.js)
![Page 55: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/55.jpg)
Nuxt.js: Einführung
• „Vue Meta Framework“
• Nutzt Vue.js 2 als Basis
![Page 56: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/56.jpg)
Nuxt.js: Einführung
• Hauptfeatures: Server side rendering & Prerendering
• Vereinfachung durch „Convention over configuration“
• Projektstruktur
• Routing
• Webpack-Konfiguration
• ….
![Page 57: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/57.jpg)
Nuxt.js: Routing
![Page 58: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/58.jpg)
Nuxt.js: Routing
Automatisches Routing
![Page 59: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/59.jpg)
Nuxt.js: Routing
![Page 60: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/60.jpg)
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
![Page 61: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/61.jpg)
Nuxt.js: Production Modes
![Page 62: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/62.jpg)
Nuxt.js: Production Modes
SPA SPA mit SSR Prerendered SPA
Alles auch mit reinem Vue.js möglich!Aber: Erheblicher Konfigurationsaufwand
![Page 63: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/63.jpg)
Nuxt.js: Production Modes
SPA Klassische Single Page Application
![Page 64: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/64.jpg)
Nuxt.js: Production Modes
CDNClient
/search?q=brumergon
SPA
Grundgerüst der Anwendung Statisches HTML + JavaScript
![Page 65: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/65.jpg)
Nuxt.js: Production Modes SPA
APIClient
API Call
Suchergebnisse JSON
![Page 66: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/66.jpg)
Nuxt.js: Production Modes SPA
APIClient
API Call
Suchergebnisse JSON
![Page 67: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/67.jpg)
![Page 68: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/68.jpg)
Nuxt.js: Production Modes
„SPA the PHP-way“SPA mit SSR
![Page 69: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/69.jpg)
Nuxt.js: Production Modes SSR
Client
/search?q=brumergon
(Node-)Server
![Page 70: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/70.jpg)
Nuxt.js: Production Modes SSR
Client
/search?q=brumergon
(Node-)Server
Statisches HTML (inkl. Suchergebnisse)
![Page 71: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/71.jpg)
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
![Page 72: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/72.jpg)
Nuxt.js: Production Modes SSR
• Schnellere Ladezeiten (Mobile!)
• Bessere SEO möglich
![Page 73: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/73.jpg)
Nuxt.js: Ladezeiten
Mit SSROhne SSR
![Page 74: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/74.jpg)
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
![Page 75: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/75.jpg)
Nuxt.js: Production Modes
„Server Side Rendering Light“Prerendered SPA
![Page 76: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/76.jpg)
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
![Page 77: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/77.jpg)
![Page 78: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/78.jpg)
Nuxt.js: Production Modes Pre
nuxt.config.js
![Page 79: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/79.jpg)
Steroid 5: Vue-rx(Reactive Extensions für Vue.js)
![Page 80: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/80.jpg)
• RxJS für Vue.js
• Reactive Extensions Integration (evtl. aus Angular bekannt)
• Observables aktuell Stage 1 ECMAScript-Proposal
Vue-rx: Einführung
![Page 81: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/81.jpg)
Vue-rx: Anwendungsgebiete
• Zur Modellierung komplexer asynchroner Abläufe
• DOM-Events
• Websocket-Kommunikation
• Verarbeitung von stetig auftretenden Events
![Page 82: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/82.jpg)
Vue-rx: Einführung
![Page 83: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/83.jpg)
Vue-rx: Einführung
Produzent
Observer
Konsument
Operator
.debounce
OperatorObservable
![Page 84: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/84.jpg)
Vue-rx: Code-Beispiel
![Page 85: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/85.jpg)
![Page 86: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/86.jpg)
Nuxt Plugin
Vue-rx: Konfiguration
![Page 87: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/87.jpg)
• Steile Lernkurve (>130 Operators)
• Kann bei falscher Anwendung zu unnötig hoher Komplexität führen
• Schwer zu debuggen
Vue-rx: Nebenwirkungen
![Page 88: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/88.jpg)
Steroid 6: Vuetify
![Page 89: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/89.jpg)
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
![Page 90: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/90.jpg)
Vuetify: Formularelemente
![Page 91: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/91.jpg)
Vuetify: Tabellen
![Page 92: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/92.jpg)
Vuetify: Cards
![Page 93: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/93.jpg)
Vuetify: Sonstiges
![Page 94: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/94.jpg)
Vuetify: Dialoge
![Page 95: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/95.jpg)
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
![Page 96: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/96.jpg)
Steroid 7:
![Page 97: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/97.jpg)
Buefy: Anwendungsgebiete
• Alle Basiskomponenten vorhanden
• Einheitliches Look & Feel in Kombination mit eigenen, Bulma-basierten Komponenten
• Design leicht und umfassend anpassbar
![Page 98: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/98.jpg)
Buefy: Formulare
![Page 99: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/99.jpg)
Buefy: Tabellen
![Page 100: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/100.jpg)
Buefy: Tabellen
![Page 101: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/101.jpg)
Buefy: Tabellen
![Page 102: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/102.jpg)
Buefy: Nebenwirkungen
• Weniger Auswahl an Komponenten
• Kleineres Entwicklungsteam
![Page 103: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/103.jpg)
Steroid 8: Jest
![Page 104: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/104.jpg)
• Test-Runner und -Framework
• Snapshot Tests
• Mocking
• Coverage
• Assertions
• mocha + chai + X
Jest: Einführung
![Page 105: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/105.jpg)
Jest: Installation
![Page 106: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/106.jpg)
Jest: Konfiguration
• „Zero configuration testing platform“
• Falls doch nötig: package.json
![Page 107: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/107.jpg)
![Page 108: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/108.jpg)
Jest: *.spec.js
![Page 109: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/109.jpg)
![Page 110: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/110.jpg)
Jest: Nebenwirkungen
• Läuft out-of-the-box nicht im Browser
• Falls doch nötig: jest-puppeteer (Headless Chrome Node API)
![Page 111: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/111.jpg)
• 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
![Page 112: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/112.jpg)
![Page 113: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/113.jpg)
Endspurt: Zeit für Fragen
![Page 114: ue.js on Steroids - eXXcellent solutions...Steroid 2: Vue.js Devtools Steroid 3: Vuex (Redux für Vue.js) Zustand Anwendungslogik UI Vuex: Einordnung Zustand Anwendungslogik UI Vuex:](https://reader031.fdocuments.net/reader031/viewer/2022013020/5eb44dfb38b6a006ae1579b1/html5/thumbnails/114.jpg)
Vielen Dank für Ihre Aufmerksamkeit!