Breaking the Binary World with Vue.js

Transcript

1. Breaking the Binary World with Vue.js !" @ianaya89 Breaking the Binary World with Vue.js ! " - @ianaya89 1
2. Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer & Speaker > Ambassador @Auth0 > Organizer @Vuenos_Aires Breaking the Binary World with Vue.js ! " - @ianaya89 2
3. Breaking the Binary World with Vue.js ! " - @ianaya89 3
4. Breaking the Binary World with Vue.js ! " - @ianaya89 4
5. ⬇ ~780K / month Breaking the Binary World with Vue.js ! " - @ianaya89 5
6. ✨ ~ 68K Breaking the Binary World with Vue.js ! " - @ianaya89 6
7. !" ~ 250K Breaking the Binary World with Vue.js ! " - @ianaya89 7
8. ! Companies Breaking the Binary World with Vue.js ! " - @ianaya89 8
9. ! Community Breaking the Binary World with Vue.js ! " - @ianaya89 9
10. ! Why Vue.js? Breaking the Binary World with Vue.js ! " - @ianaya89 10
11. ! Complexity Inherent vs. Instrumental Breaking the Binary World with Vue.js ! " - @ianaya89 11
12. ! Inherent The Project Breaking the Binary World with Vue.js ! " - @ianaya89 12
13. ! Instrumental The Price Breaking the Binary World with Vue.js ! " - @ianaya89 13
14. ! " ! " Breaking the Binary World with Vue.js ! " - @ianaya89 14
15. ! " ! " Breaking the Binary World with Vue.js ! " - @ianaya89 15
16. ! The Progressive Framework • View focused • Core based • VDOM • Reactive • Components Oriented Breaking the Binary World with Vue.js ! " - @ianaya89 16
17. Breaking the Binary World with Vue.js ! " - @ianaya89 17
18. ! Declarative Rendering Breaking the Binary World with Vue.js ! " - @ianaya89 18
19. !" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script> new Vue({ el: '#app', data: function() { return { hello: 'Hello Warsaw ! ! } } }); </script> Breaking the Binary World with Vue.js ! " - @ianaya89 19
20. ! render() new Vue({ el: '#app', data() { return { hello: 'Hello Warsaw ! !' } }, render(h) { return ( <h1>{this.hello}</h1> ) } }) Breaking the Binary World with Vue.js ! " - @ianaya89 20
21. ! Component System Breaking the Binary World with Vue.js ! " - @ianaya89 21
22. ! Semantic <main> <top-bar></top-bar> <container> <login-form></login-form> </container> <annoying-banners></annoying-banners> <bottom-bar></bottom-bar> </main> Breaking the Binary World with Vue.js ! " - @ianaya89 22
23. ! .vue Breaking the Binary World with Vue.js ! " - @ianaya89 23
24. ♻ Life Cycle Hooks new Vue({ created: function() { console.log('I am alive !') } }); Breaking the Binary World with Vue.js ! " - @ianaya89 24
25. ☎ Communication • ⬇ Properties Down • ⬆ Events Up Breaking the Binary World with Vue.js ! " - @ianaya89 25
26. ! DX Breaking the Binary World with Vue.js ! " - @ianaya89 26
27. ! vue-cli Breaking the Binary World with Vue.js ! " - @ianaya89 27
28. ! Dev Tools Breaking the Binary World with Vue.js ! " - @ianaya89 28
29. ! Breaking the Binary World with Vue.js ! " - @ianaya89 29
30. ! vue-router Single Page Applications Breaking the Binary World with Vue.js ! " - @ianaya89 30
31. ! vuex State Management (Flux) Breaking the Binary World with Vue.js ! " - @ianaya89 31
32. ! Native & Nuxt.js Server Side Rendering Breaking the Binary World with Vue.js ! " - @ianaya89 32
33. ! Native Script & Weex Mobile Native Rendering Breaking the Binary World with Vue.js ! " - @ianaya89 33
34. ! Take Away • ! Progressive (Simple & Complex) • " Declarative Rendering • # Component System • $ Great Ecosystem • % Awesome Community Breaking the Binary World with Vue.js ! " - @ianaya89 34
35. Breaking the Binary World with Vue.js ! " - @ianaya89 35
36. Thanks! ! @ianaya89 Breaking the Binary World with Vue.js ! " - @ianaya89 36