Breaking FrontEnd Paradigms with Vue.js 🇺🇸

Transcript

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