🔎🖖OverVue

Una recorrida por Vue.js, su historia, comunidad, funcionalidades y todo su ecosistema.

Transcript

1. !" OverVue @ianaya89 ! " OverVue - @ianaya89 1
2. ! Ignacio Anaya @ianaya89 • Full Stack Developer, Tech Trainer & Speaker • @Auth0 Ambassador • Organizador @Vuenos_Aires ! " OverVue - @ianaya89 2
3. ! Si, otro Framework MV* ! " OverVue - @ianaya89 3
4. ! " OverVue - @ianaya89 4
5. ! " OverVue - @ianaya89 5
6. ! " OverVue - @ianaya89 6
7. ! v2.5.16 ! " OverVue - @ianaya89 7
8. ⬇ ~375K / semanales ! " OverVue - @ianaya89 8
9. ⭐ ~ 87K ! " OverVue - @ianaya89 9
10. !" ~ 410K ! " OverVue - @ianaya89 10
11. ! 82 Repositorios ! " OverVue - @ianaya89 11
12. ! Empresas ! " OverVue - @ianaya89 12
13. ! Comunidad ! " OverVue - @ianaya89 13
14. ! Filosofia Vue.js ! " OverVue - @ianaya89 14
15. ! Complejidad Inherente vs. Instrumental ! " OverVue - @ianaya89 15
16. ! Inherente El Proyecto ! " OverVue - @ianaya89 16
17. ! Instrumental El Precio ! " OverVue - @ianaya89 17
18. ! ! ! " OverVue - @ianaya89 18
19. ❌ ! ! ! " OverVue - @ianaya89 19
20. ✅ ! ! ! " OverVue - @ianaya89 20
21. ! El Framework Progresivo • Vista • Core • VDOM • Reac0vo • Web Components ! " OverVue - @ianaya89 21
22. ! " OverVue - @ianaya89 22
23. ! Declara(ve Rendering ! " OverVue - @ianaya89 23
24. !" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script> new Vue({ el: '#app', data: function () { return { hello: 'Hola @PHPBaires!' } } }); </script> ! " OverVue - @ianaya89 24
25. !" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script> new Vue({ el: '#app', data: function () { return { hello: 'Hola @PHPBaires!' } } }); </script> ! " OverVue - @ianaya89 25
26. ! render() new Vue({ el: '#app', data: function () { return { hello: 'Hola @PHPBaires!' } } render: function () { return ( <h1>{this.hello}</h1> ) } }) ! " OverVue - @ianaya89 26
27. ! Demo ! " OverVue - @ianaya89 27
28. ! Component System ! " OverVue - @ianaya89 28
29. ! Seman'ca <main> <top-bar></top-bar> <container> <login-form></login-form> </container> <annoying-banners></annoying-banners> <bottom-bar></bottom-bar> </main> ! " OverVue - @ianaya89 29
30. ! .vue ! " OverVue - @ianaya89 30
31. ♻ Life Cycle Hooks new Vue({ created: function () { console.log('I am alive ') }, mounted: function () { console.log('I am mounted ') }, }); ! " OverVue - @ianaya89 31
32. ♻ Life Cycle Hooks new Vue({ created: function () { console.log('I am alive ') }, mounted: function () { console.log('I am mounted ') }, }); ! " OverVue - @ianaya89 32
33. ☎ Comunicación • ⬇ Propiedades Abajo • ⬆ Eventos Arriba ! " OverVue - @ianaya89 33
34. ! DX ! " OverVue - @ianaya89 34
35. ! vue-cli ! " OverVue - @ianaya89 35
36. ⚙ Dev Tools ! " OverVue - @ianaya89 36
37. ! Demo II ! " OverVue - @ianaya89 37
38. ! vue-router Single Page Applica-ons ! " OverVue - @ianaya89 38
39. ! vuex State Management (Flux) ! " OverVue - @ianaya89 39
40. ! vue-authen*cate & vue-auth Authen'ca'on & JTW ! " OverVue - @ianaya89 40
41. ! Na$ve & Nuxt.js Server Side Rendering ! " OverVue - @ianaya89 41
42. ! Na$ve Script & Weex Mobile Na*ve Rendering ! " OverVue - @ianaya89 42
43. ! Take Away • ! Progresivo (Simple y Complejo) • " Declara7ve Rendering • # Component System • $ Ecosistema Completo • % Gran Community ! " OverVue - @ianaya89 43
44. ! " OverVue - @ianaya89 44
45. ! Workshop Vue.js ! github.com/ianaya89/workshop-vuejs ! " OverVue - @ianaya89 45
46. ! " OverVue - @ianaya89 46
47. ! Vuenos Aires ! vuenosair.es ! " OverVue - @ianaya89 47
48. Gracias! @ianaya89 ! " OverVue - @ianaya89 48
49. ⁉ Preguntas? ! " OverVue - @ianaya89 49
50. ! Links bit.ly/ln-vue bit.ly/ln-demo bit.ly/ln-demo2 ! " OverVue - @ianaya89 50