💉 Frontend on Steroids - With Vue.js

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

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

23. Integration
    In bestehende System
    23
    

    View Slide

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

34. ! Render functions
    34
    

    View Slide

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
    jakub@posteo.de
    39
    

    View Slide