Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Alexander Schwartz

February 26, 2019
Tweet

More Decks by Alexander Schwartz

Other Decks in Technology

Transcript

  1. .consulting .solutions .partnership
    Vue.js: Konzepte, Entwicklungswerkzeuge
    und Anwendungsszenarien
    Alexander Schwartz, Principal IT Consultant
    Bitkom AK Software Engineering – 26. Februar 2019

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    {{ message }}


    <br/>var app = new Vue({<br/>el: '#app',<br/>data: {<br/>message: 'Hello Vue.js!'<br/>}<br/>})<br/>

    View full-size slide

  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

    {{ message }}

    Please enter a Message!



    v-on:click="reverseMessage">
    Reverse Message


    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    },
    methods: {
    reverseMessage: function () {
    this.message =
    this.message
    .split('')
    .reverse().join('')
    }
    }
    })

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.





    <br/>export default {<br/>/* ... */<br/>}<br/>
    <br/>h1, h2 {<br/>font-weight: normal;<br/>}<br/>

    View full-size slide

  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
    }
    ]
    })





    View full-size slide

  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.


    mode="out-in">




    <br/>.slide-fade-enter-active {<br/>transition: all .3s ease;<br/>}<br/>/* ... */<br/>

    View full-size slide

  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







    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  32. .consulting .solutions .partnership
    Alexander Schwartz
    Principal IT Consultant
    +49 171 5625767
    [email protected]
    @ahus1de
    msg systems ag (Headquarters)
    Robert-Buerkle-Str. 1, 85737 Ismaning
    Germany
    www.msg.group

    View full-size slide