Vue.js - klare Konzepte, vielseitig, performant

Vue.js ist ein clientseitiges JavaScript-Framework, das entwicklerfreundlich ist: eine Kommandozeile um neue Projekte anzulegen, einfach zu erlernende Konzepte, sehr gute Online-Dokumentation und ausgereifte Entwicklungswerkzeuge. Alles, was man benötigt, um modulare und wartbare Anwendung zu erstellen! Unter der Haube arbeitet eine schnelle, state-of-the-art Rendering-Engine, die manuelle Optimierungen überflüssig macht. Animationen sind bereits Teil des Frameworks, so dass ansprechende Benutzeroberflächen ohne zusätzliche Bibliotheken umgesetzt werden können.

Dieser Vortrag gibt einen Einstieg in einfache und fortgeschrittene Anwendungsentwicklung mit Vue.js und einen kurzen Überblick über das Ökosystem. Wir nutzen Vue.js seit Anfang 2016 und dieser Vortrag basiert auf unseren Erfahrungen.

Transcript

1. .consulting .solutions .partnership Vue.js Klare Konzepte, vielseitig, performant Alexander Schwartz, Principal IT Consultant IT Tage Frankfurt – 13. Dezember 2018
2. Vue.js – Klare Konzepte, vielseitig, performant 3 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
3. Über mich – Principal IT Consultant @ msg Travel & Logistics © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 4 15+ Jahre Java 7 Jahre PL/SQL 7 Jahre Absatzfinanzierung 3,5 Jahre Online-Banking 7 Jahre IT-Consulting 600+ Geocaches @ahus1de
4. Vue.js User Group Frankfurt © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 5 @vuejsfrankfurt https://www.meetup.com/vuejsfrankfurt
5. Vue.js – Klare Konzepte, vielseitig, performant 9 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
6. Erwartungen – Tools, Ökosystem, Optionen Warum langweilig gut für die Gesundheit ist © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 10 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/ Der Einstieg © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 11 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 | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 12 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.) • 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 | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 13 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 – Klare Konzepte, vielseitig, performant 14 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
11. Basics – der Einstieg Initialisierung von Vue.js © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 15 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. • View-, Input- und Event-Bindung • Conditionals Basics – der Einstieg Minimales Beispiel © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 16 <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 – Klare Konzepte, vielseitig, performant 17 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
14. Projekte – Komponenten und Struktur Standard Projektstruktur (CLI v3) © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 18 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 | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 19 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 | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 20 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 | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 21 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 Eltern-Kind-Beziehungen bei Komponenten © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 22 Die Parent-Komponente übergibt Props. Sie kann auf Custom-Events des Childs hören. <template> <child v-bind:label="'click here'" v-on:clickedbutton="processevent"> </child> </template> <script> import Child from '@/components/Child' export default { name: 'parent', components: { 'child': Child } /* ... */ } </script> <script> export default { name: 'child', props: { label: String }, methods: { clickedbutton: function () { this.$emit('clickedbutton') } } /* ... */ } </script>
19. Projekte – Komponenten und Struktur Slots zum Überschreiben von Default-Sub-Templates © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 23 Die Parent-Komponente übergibt Slots, die vorher definierte Teile im Child überschreiben können. Die Child Komponente definiert Props, die im überschreibenden Template genutzt werden können. <template> <span> <dt> <slot name="term" :term="term"> {{term}} </slot> </dt> <dd> <slot name="description" :description="description"> {{description}} </slot> </dd> </span> </template> <definition term="term two" description="description 2"> <template scope="props" slot="term"> T: {{ props.term }} </template> </definition>
20. Vue.js – Klare Konzepte, vielseitig, performant 24 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
21. Performance – was heißt das eigentlich Performance bei der Entwicklung © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 25 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
22. Performance – was heißt das eigentlich 1. http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html Performance in Produktion © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 26 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
23. Vue.js – Klare Konzepte, vielseitig, performant 27 © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz Erwartungen – Tools, Ökosystem, Optionen 1 Basics – der Einstieg 2 Projekte – Komponenten und Struktur 3 Performance – was heißt das eigentlich 4 Erfahrungen – ein Rückblick 5
24. Erfahrungen – ein Rückblick Erwartungen erfüllt © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 28 • 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. • Eigene Komponente für Tabellen und Navigation entwickelt. Update von Vue.js 1.x auf Vue.js 2.x: • Minimale Vue.js Anpassungen gemäß Upgrade-Guide und Migration Helper (teilweise konnten sie auch vorgezogen werden) • Vorteile: schnelleres Rendering, verbesserte Warnungen und Fehlerbehandlungen insbesondere während der Entwicklung • Mittlerer Aufwand für Webpack-Update inkl. Skripte
25. Links © msg | Dezember 2018 | Vue.js – Klare Konzepte, vielseitig, performant | IT Tage Frankfurt | Alexander Schwartz 29 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 Awesome Vue.js https://github.com/vuejs/awesome-vue @ahus1de Vue Dev Tools for Google Chrome https://github.com/vuejs/vue-devtools Sarah Drasner @ Software Engineering Daily https://softwareengineeringdaily.com/2017/12 /01/animating-vuejs-with-sarah-drasner/ Dukecon PWA https://github.com/dukecon/dukecon_pwa Vue.js Trainings and Talks https://www.ahus1.de/post/vuejs-tainings- and-talks
26. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171 5625767 alexander.schwartz@msg-systems.com @ahus1de msg systems ag (Headquarters) Robert-Buerkle-Str. 1, 85737 Ismaning Germany www.msg-systems.com