Vue.js: Konzepte, Entwicklungswerkzeuge und Anwendungsszenarien

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.

5f528a3f6814d28b583f31842e3e8d9e?s=128

Alexander Schwartz

February 26, 2019
Tweet

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