💉 Frontend on Steroids - With Vue.js

Transcript

1. ! Frontend on Steroids With Vue.js 1

2. Was ist Vue.js ? 2

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

   web. 1 Github Beschreibung 3

4. Warum? 4

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. ⚡ Quickstart 6

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. 2 Bestandteile 8

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

   message: 'Hello Vue!' } }) 9

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

11. Single File Components 11

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

    Endung 4 Template 4 Script 4 Styling 12

13. Hello.vue 13

14. ! Vorteile 14

15. 4 Kleine modulare Komponenten 4 Shareable 4 Saubere Kommunikation über

    props und events 4 Testbar 15

16. ! vue-cli 16

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

19. ! Demo 19

20. Weitere Features 4 Methods 4 Computed properties 4 Filters 4

    Mixins 4 Directives 4 Props 20

21. ! Code Splitting 21

22. 22

23. Integration In bestehende System 23

24. 24

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. Think Big 26

27. Große Projekte sind komplex 27

28. ! State Management 28

29. vuex 29

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

    4 Modules 30

31. ! 31

32. JSX 32

33. 33

34. ! Render functions 34

35. 35

36. redux typescript 36

37. Testing Jest Ava Karma 37

38. Community 38

39. ! Fragen? @apertureless jakub@posteo.de 39