Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien

Vue.js ist ein JavaScript-Web-Framework, das einen leichten Einstieg verspricht. Mit wenigen einfachen Konzepten erstellen Entwickler wart- und testbare JavaScript-Anwendungen. Bei Bedarf können zusätzliche Konzepte wie zum Beispiel Client-seitiges State Management, Server-Side-Rending und Features für Progressive Web Apps genutzt werden.
Der Vortrag stellt Vue.js und die dazugehörigen Konzepte und Entwicklungswerkzeuge vor. Anwendungsszenarien erläutern, wann welche Konzepte zum Einsatz kommen.

Transcript

1. .consulting .solutions .partnership Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien Alexander Schwartz, Principal IT Consultant Bitkom AK Software Engineering – 26. Februar 2019
2. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 2 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
3. Über mich – Principal IT Consultant @ msg Travel & Logistics © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 3 15+ Jahre Java und JavaScript 7 Jahre PL/SQL 7 Jahre Absatzfinanzierung 3,5 Jahre Online-Banking 6 Jahre IT-Consulting 600+ Geocaches @ahus1de
4. Vue.js User Group Frankfurt © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 4 @vuejsfrankfurt vuejsfrankfurt.de
5. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 6 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
6. Erwartungen – Tools, Ökosystem, Optionen Warum langweilig gut für die Gesundheit ist © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 7 JavaScript Fatigue Fatigue: • Es gibt (zu) viele JavaScript Frameworks. • Ohne JavaScript ist eine gute User Experience nicht umsetzbar. • Die Lebensdauer meiner Anwendung ist länger als der Hype-Cycle der Framework(-Version). Was wir gesucht und mit Vue.js gefunden haben: • Einfach zu erlernendes Framework – auch für JavaScript Neulinge • Produktivität im Alltag • Keine Ecken und Kanten, die im Projekt zu Problemen führen • Stabile APIs
7. Erwartungen – Tools, Ökosystem, Optionen 1. https://github.com/vuejs/awesome-vue 2. https://vuejs.org/v2/guide/ 3. https://leanpub.com/vuejs2 4. https://vueschool.io/ 5. https://www.vuemastery.com/ Der Einstieg © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 8 Online-Dokumentation Buch (Leanpub) Awesome Vue.js Liste
8. Erwartungen – Tools, Ökosystem, Optionen 1. https://github.com/vuejs/vue-cli 2. https://plugins.jetbrains.com/plugin/9442-vue-js 3. https://github.com/vuejs/vue-devtools Die Werkzeuge © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 9 vue-cli: Starter-Projekte für komplette Integration der Build-Kette • Webpack, JavaScript vs. TypeScript • hot-reload, linting, testing, progressive web app Plugins: • Für IDEs, z. B. Jetbrains Suite (IntelliJ, PHPStorm, WebStorm etc.) oder Vetur Plugin für VS Code • Für Chrome: Vue.js devtools
9. Erwartungen – Tools, Ökosystem, Optionen 1. https://ssr.vuejs.org/en/ 2. https://vuejs.org/v2/guide/typescript.html 3. https://github.com/vuejs/babel-plugin-transform-vue-jsx 4. https://vuex.vuejs.org/en/ Kernfunktionen und Erweiterungen © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 10 Kernfunktionen u.a.: • View-, Input-, Event-Binding • Templates, Components, Mixins • Transitions, Lifecycle Hooks, Computed Zusätzliche Pakete (aber Teil des „offiziellen“ Vue.js Projekts) u.a.: • Routing • Streaming Server Side Rendering mit Client Side Hydration • TypeScript als typsichere Alternative zu JavaScript • JSX-Templates als Alternative zu HTML-Templates • Flux/React Style Anwendungen mit vuex
10. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 11 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
11. Basics – der Einstieg Initialisierung von Vue.js © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 12 1. DOM-Bereich definieren 2. Vue.js laden 3. Vue.js initialisieren <div id="app"> {{ message }} </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
12. Basics – der Einstieg Minimales Beispiel © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 13 • View-, Input- und Event-Bindung • Conditionals <div id="app"> <p>{{ message }}</p> <p v-if="message === ''"> Please enter a Message!</p> <p> <input v-model="message"> </p> <button v-on:click="reverseMessage"> Reverse Message </button> </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message .split('') .reverse().join('') } } })
13. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 14 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
14. Projekte – Komponenten und Struktur Standard Projektstruktur (CLI v3) © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 15 Die Standard-Projektstruktur kann mit npm install -g @vue/cli vue create ... erzeugt werden. Anschließend kann das Projekt für die Entwicklung mit npm serve inkl. Hot Reload gestartet werden.
15. Projekte – Komponenten und Struktur Single File Components © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 16 Für jede Komponente HTML, JavaScript und CSS in einer Datei. Damit sind alle Ressourcen im Überblick. Die IDE liefert Syntax-Highlighting für alle drei Bereiche. Navigation zwischen den Bereichen über die IDE. <template> <div class="hello"> <!-- ... --> </div> </template> <script> export default { /* ... */ } </script> <style scoped> h1, h2 { font-weight: normal; } </style>
16. Projekte – Komponenten und Struktur Router wechselt zwischen Components © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 17 Verschiedenen Routen wird jeweils genau ein Component zugeordnet. Wechselt die URL, so wechselt auch das angezeigte Component. Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello }, { path: '/counter', name: 'Counter', component: Counter } ] }) <template> <div id="app"> <router-view></router-view> </div> </template>
17. Projekte – Komponenten und Struktur Transitions zwischen Zuständen und Views © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 18 Transition Effekte möglich mit Bezug auf den View oder auch in Bezug auf die Inhalte. <template> <div id="app"> <transition name="slide-fade" mode="out-in"> <router-view></router-view> </transition> </div> </template> <style> .slide-fade-enter-active { transition: all .3s ease; } /* ... */ </style>
18. Projekte – Komponenten und Struktur 1. https://vuejs.org/v2/guide/components.html Eltern-Kind-Beziehungen bei Komponenten © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 19 Komposition von Komponenten • Anwendung bestehend aus einer Baum-Struktur von Komponenten • Komponenten können klein, wiederverwendbar und isoliert testbar sein <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
19. Projekte – Komponenten und Struktur 1. https://vuejs.org/v2/guide/components.html State Management mit Vuex © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 20 • Globaler Status außerhalb der Komponenten • Kapselung über Actions und Mutations • Komponenten binden sich (lesen) an den State • Logik und Visualisierung separat testbar • Integration von Vuex in den Vue Developer Tools • Time Travel Debugging möglich
20. Performance – was heißt das eigentlich Performance bei der Entwicklung © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 21 Erlernbarkeit • Online-Ressourcen, wenige einfache Konzepte Zurechtfinden im Code von anderen • Dank einfacher Projektstruktur und den Single-File-Components Round-Trip beim Entwickeln neuer Funktionalität • Dank Hot-Reload im Development Modus • Komponenten und Zustand einsehen dank Vue Developer Tools in Chrome
21. Performance – was heißt das eigentlich 1. http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html Performance in Produktion © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 22 Stolpersteine • Neue Properties im Model müssen mit Vue.set gesetzt werden, damit das Change Tracking greift. Performance-Optimierung Ladezeit und Rendering • Geringe Datenmenge: Vue.js selbst hat 20k min+gzip (keine weiteren Abhängigkeiten notwendig, ohne Template Compiler) • Optimierung für Rendering nicht notwendig, auch nicht bei großen/breiten Tabellen • Performance-Benchmarks sehr gut
22. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 23 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
23. Szenarien – einfach bis fortgeschritten Progressive Enhancement © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 24 Ziel • Funktionalität soll unabhängig von JavaScript zur Verfügung stehen • Komfort-Funktionen oder erweitere UX durch JavaScript Verwendung • Einsatz von Vue.js als Bibliothek (z. B. statt jQuery) Vorteile • Entwicklungsunterstützung durch Vue.js Developer Tools • Weniger Boiler-Plate-Code, bessere Wartbarkeit
24. Szenarien – einfach bis fortgeschritten Experten-Frontends © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 25 Ziel • Hohe Interaktivität • Asynchrone Aktualisierung des Frontends Verwendung • Einsatz von Vue.js als Single-Page App (SPA) • Optional: Mehrere SPAs über Links und Single-Sign-On gekoppelt • Optional: State-Management im Frontend über Vuex Vorteile • Build-Prozess via vue-cli standardisiert • Hot-Reload-Funktionalität während der Entwicklung
25. Szenarien – einfach bis fortgeschritten Frontend-Integration – Variante Links mit Single-Sign-On © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 26 • Nutzer melden sich via Single-Sign-On an • Je ein Web-Frontend pro Komponente im gemeinsamen Corporate Design und mit übergreifender Navigation • Benutzerfreundliches HTML5 Web-Frontend mit Stateless REST-Services • Deployment der Komponenten als Container (Frontend und Backend) mit Rolling-Update Funktionalität • Komponenten sind unabhängig voneinander skalierbar
26. Szenarien – einfach bis fortgeschritten 1. https://nuxtjs.org/ Schnell und für Suchmaschinen und Social Media optimiert © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 27 Ziel • Schnelle Website („first meaningful paint“) • Meta-Informationen für Suchmaschinen und Social Media Verwendung • Erste Seite wird serverseitig gerendert (via Nuxt) • Anschließend JavaScript nachladen für Single Page Application Vorteile • Meta-Information für Suchmaschinen und Social Media • Wartezeit beim Start entfällt • Volle Interaktivität einer SPA vorhanden
27. Szenarien – einfach bis fortgeschritten 1. PWA details: https://developers.google.com/web/progressive-web-apps/ 2. Logo: https://webmaxru.github.io/progressive-web-apps-logo/ Mobile Anwendungen – Leichtgewichtig © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 28 Ziel • Offline-Fähigkeit • Minimierung von Server-Round-Trips Verwendung • Erweiterung der SPA um Progressive-Web-App Funktionen (PWA) als Plugin in vue-cli • Homescreen-Icons und Push-Notifications möglich Vorteile • Keine App-Stores und veraltete Versionen • automatische Aktualisierung der App beim nächsten Besuch
28. Szenarien – einfach bis fortgeschritten 1. https://nativescript-vue.org/ 2. https://www.nativescript.org/ Mobile Anwendungen – Nativ und Single Source © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 29 Ziel • Tiefe Integration mit Zugriff auf iOS/Android APIs Verwendung • Nativescript mit Vue.js • Single-Source für iOS und Android App Vorteile • Vertrieb über App Stores • Zugriff auf APIs des Betriebssystems • Möglicherweise Wiederverwendung
29. Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 30 Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Szenarien – einfach bis fortgeschritten 4 Erfahrungen – ein Rückblick 5
30. Erfahrungen – ein Rückblick Erwartungen erfüllt © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 31 • Neulinge in der JavaScript-Entwicklung konnten sich gut einarbeiten. • Komplexe GUI konnte in Bezug auf Performance und wartbare Struktur umgesetzt werden. • Komponenten helfen bei der Strukturierung der Anwendung. • Vielseitig einsetzbar, Konzepte für fortgeschrittene Szenarien sind vorhanden.
31. Links © msg | Februar 2019 | Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien | Bitkom AK Software Engineering | Alexander Schwartz 32 Vue.js https://vuejs.org The Majesty of Vue.js 2 https://leanpub.com/vuejs2 Awesome Vue.js https://github.com/vuejs/awesome-vue Vue Dev Tools für Google Chrome https://github.com/vuejs/vue-devtools Vorträge, Trainings und Artikel über Vue https://www.ahus1.de/post/vuejs-tainings-and-talks @ahus1de Vuex https://vuex.vuejs.org Nativescript https://www.nativescript.org Nuxt.js https://nuxtjs.org Vue.js Cheat Sheet https://www.vuemastery.com/pdf/Vue- Essentials-Cheat-Sheet.pdf
32. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171 5625767 alexander.schwartz@msg.group @ahus1de msg systems ag (Headquarters) Robert-Buerkle-Str. 1, 85737 Ismaning Germany www.msg.group