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