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

Vue.js - klare Konzepte, vielseitig, performant

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.

Alexander Schwartz

December 13, 2018
Tweet

More Decks by Alexander Schwartz

Other Decks in Technology

Transcript

  1. .consulting .solutions .partnership
    Vue.js
    Klare Konzepte, vielseitig, performant
    Alexander Schwartz, Principal IT Consultant
    IT Tage Frankfurt – 13. Dezember 2018

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View 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/
    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

    View 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 | 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

    View 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 | 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

    View Slide

  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

    View Slide

  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

    {{ message }}


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

    View Slide

  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

    {{ 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 Slide

  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

    View Slide

  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.

    View Slide

  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.


    View Slide

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





    View Slide

  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.


    mode="out-in">




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

    View Slide

  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.

    v-on:clickedbutton="processevent">


    <br/>import Child from '@/components/Child'<br/>export default {<br/>name: 'parent',<br/>components: {<br/>'child': Child<br/>}<br/>/* ... */<br/>}<br/>
    <br/>export default {<br/>name: 'child',<br/>props: {<br/>label: String<br/>},<br/>methods: {<br/>clickedbutton: function () {<br/>this.$emit('clickedbutton')<br/>}<br/>}<br/>/* ... */<br/>}<br/>

    View Slide

  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.



    :term="term">
    {{term}}



    :description="description">
    {{description}}




    description="description 2">
    slot="term">
    T: {{ props.term }}


    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  26. .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-systems.com

    View Slide