$30 off During Our Annual Pro Sale. View Details »

💉 Frontend on Steroids - With Vue.js

Jakub
June 28, 2017

💉 Frontend on Steroids - With Vue.js

A brief introduction to Vue.js and how to incrementally enchant your UI.

Jakub

June 28, 2017
Tweet

More Decks by Jakub

Other Decks in Programming

Transcript

  1. ! Frontend on Steroids
    With Vue.js
    1

    View Slide

  2. Was ist Vue.js ?
    2

    View Slide

  3. A progressive,
    incrementally-adoptable
    JavaScript framework for
    building UI on the web.
    1
    Github Beschreibung
    3

    View Slide

  4. Warum?
    4

    View Slide

  5. Vorteile
    4 Sehr einfach zu erlernen
    4 Starten ohne viel Konfiguration
    4 Flexibel einsetzbar
    4 Modular
    4 "Choice driven"
    4 Klein & schnell (28.03kb min+gzip)
    5

    View Slide

  6. ⚡ Quickstart
    6

    View Slide

  7. Auch ohne Build Pipeline einsetzbar:

    Ansonsten
    yarn add vue
    Besser
    yarn add -g vue-cli
    7

    View Slide

  8. 2 Bestandteile
    8

    View Slide

  9. Script
    const app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
    })
    9

    View Slide

  10. Template:

    {{ message }}

    10

    View Slide

  11. Single File Components
    11

    View Slide

  12. Single File Components
    4 Inspiriert von Web Components
    4 *.vue Endung
    4 Template
    4 Script
    4 Styling
    12

    View Slide

  13. Hello.vue
    13

    View Slide

  14. ! Vorteile
    14

    View Slide

  15. 4 Kleine modulare Komponenten
    4 Shareable
    4 Saubere Kommunikation über props und events
    4 Testbar
    15

    View Slide

  16. ! vue-cli
    16

    View Slide

  17. 4 Scaffold für Vue Projekte
    4 Optionen für
    4 vue-router
    4 eslint
    4 Unit Tests mit karma
    4 E2E Tests mit nightwatch
    17

    View Slide

  18. 18

    View Slide

  19. ! Demo
    19

    View Slide

  20. Weitere Features
    4 Methods
    4 Computed properties
    4 Filters
    4 Mixins
    4 Directives
    4 Props
    20

    View Slide

  21. ! Code Splitting
    21

    View Slide

  22. 22

    View Slide

  23. Integration
    In bestehende System
    23

    View Slide

  24. 24

    View Slide

  25. 4 Weniger Code
    4 Inkrementell erweiterbar
    4 Kleine ersetzbare Komponenten1
    1 https://about.gitlab.com/2016/10/20/why-we-chose-vue/
    25

    View Slide

  26. Think Big
    26

    View Slide

  27. Große Projekte
    sind komplex
    27

    View Slide

  28. ! State Management
    28

    View Slide

  29. vuex
    29

    View Slide

  30. Besteht aus
    4 State
    4 Mutations
    4 Actions
    4 Getters
    4 Modules
    30

    View Slide

  31. !
    31

    View Slide

  32. JSX
    32

    View Slide

  33. 33

    View Slide

  34. ! Render functions
    34

    View Slide

  35. 35

    View Slide

  36. redux
    typescript
    36

    View Slide

  37. Testing
    Jest
    Ava
    Karma
    37

    View Slide

  38. Community
    38

    View Slide

  39. ! Fragen?
    @apertureless
    [email protected]
    39

    View Slide