💉 Frontend on Steroids - With Vue.js

Transcript

1. 1.

   ! Frontend on Steroids With Vue.js 1

2. 2.

   Was ist Vue.js ? 2

3. 3.

   A progressive, incrementally-adoptable JavaScript framework for building UI on the

   web. 1 Github Beschreibung 3
4. 4.

   Warum? 4

5. 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
6. 6.

   ⚡ Quickstart 6

7. 7.

   Auch ohne Build Pipeline einsetzbar: <script src="https://unpkg.com/vue"></script> Ansonsten yarn add

   vue Besser yarn add -g vue-cli 7
8. 8.

   2 Bestandteile 8

9. 9.

   Script const app = new Vue({ el: '#app', data: {

   message: 'Hello Vue!' } }) 9
10. 10.

    Template: <div id="app"> {{ message }} </div> 10

11. 11.

    Single File Components 11

12. 12.

    Single File Components 4 Inspiriert von Web Components 4 *.vue

    Endung 4 Template 4 Script 4 Styling 12
13. 13.

    Hello.vue 13

14. 14.

    ! Vorteile 14

15. 15.

    4 Kleine modulare Komponenten 4 Shareable 4 Saubere Kommunikation über

    props und events 4 Testbar 15
16. 16.

    ! vue-cli 16

17. 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
18. 18.

    18

19. 19.

    ! Demo 19

20. 20.

    Weitere Features 4 Methods 4 Computed properties 4 Filters 4

    Mixins 4 Directives 4 Props 20
21. 21.

    ! Code Splitting 21

22. 22.

    22

23. 23.

    Integration In bestehende System 23

24. 24.

    24

25. 25.

    4 Weniger Code 4 Inkrementell erweiterbar 4 Kleine ersetzbare Komponenten1

    1 https://about.gitlab.com/2016/10/20/why-we-chose-vue/ 25
26. 26.

    Think Big 26

27. 27.

    Große Projekte sind komplex 27

28. 28.

    ! State Management 28

29. 29.

    vuex 29

30. 30.

    Besteht aus 4 State 4 Mutations 4 Actions 4 Getters

    4 Modules 30
31. 31.

    ! 31

32. 32.

    JSX 32

33. 33.

    33

34. 34.

    ! Render functions 34

35. 35.

    35

36. 36.

    redux typescript 36

37. 37.

    Testing Jest Ava Karma 37

38. 38.

    Community 38

39. 39.

    ! Fragen? @apertureless jakub@posteo.de 39