๐Ÿ’‰ Frontend on Steroids - With Vue.js

A297a5edc76d3041eb63ef6b7b4eba42?s=47 Jakub
June 28, 2017

๐Ÿ’‰ Frontend on Steroids - Withย Vue.js

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

A297a5edc76d3041eb63ef6b7b4eba42?s=128

Jakub

June 28, 2017
Tweet

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