What's next in Vue 3? 🖖 3️⃣

Transcript

1. What's next in Vue3 ! ! @ianaya89 What's next in Vue3? - @ianaya89 1
2. ! Nacho Anaya ! @ianaya89 • JavaScript Engineer @BloqInc • Ambassador @Auth0 • Tech Speaker @MozTechSpeakers • Organizador @Vuenos_Aires What's next in Vue3? - @ianaya89 2
3. ! What's next in Vue3? - @ianaya89 3
4. ! What's next in Vue3? - @ianaya89 4
5. ! Vue 3 What's next in Vue3? - @ianaya89 5
6. ! Totalmente Re-escrito What's next in Vue3? - @ianaya89 6
7. ! Simple y Explícito What's next in Vue3? - @ianaya89 7
8. ! Performance What's next in Vue3? - @ianaya89 8
9. ! Monorepo What's next in Vue3? - @ianaya89 9
10. ! Paquetes Individuales What's next in Vue3? - @ianaya89 10
11. !" Facilita Contribuir What's next in Vue3? - @ianaya89 11
12. ➕ Extensible What's next in Vue3? - @ianaya89 12
13. ! Tree-Shakeable Global API What's next in Vue3? - @ianaya89 13
14. ! 10 KB gzipped v2.x ~20 KB What's next in Vue3? - @ianaya89 14
15. ! TypeScript What's next in Vue3? - @ianaya89 15
16. ☢ Reac&vity Engine What's next in Vue3? - @ianaya89 16
17. ☢ Que es Reac)vidad? What's next in Vue3? - @ianaya89 17
18. What's next in Vue3? - @ianaya89 18
19. What's next in Vue3? - @ianaya89 19
20. ☢ " Antes (2.x) Object.defineProperty() What's next in Vue3? - @ianaya89 20
21. ☢ " Antes (2.x) <template> <h1>{{ name }}</h1> </template> <script> export default { data () { return { name: 'Nacho', foo: 'bar' } } } </script> What's next in Vue3? - @ianaya89 21
22. ☢ " Antes (2.x) <script> export default { data () { return { object: { name: 'Nacho' }, array: ['string'] } }, created () { this.$set(this.object, 'lastName', 'Anaya') this.$delete(this.object, 'lastName') this.$set(this.array, 1, 'new string') } } </script> What's next in Vue3? - @ianaya89 22
23. ☢ " Antes (2.x) <script> export default { data () { return { object: { name: 'Nacho' }, array: ['string'] } }, created () { this.$set(this.object, 'lastName', 'Anaya') this.$delete(this.object, 'lastName') this.$set(this.array, 1, 'new string') } } </script> What's next in Vue3? - @ianaya89 23
24. ☢ " Ahora (3.x) new Proxy(target, handler) What's next in Vue3? - @ianaya89 24
25. ! Proxy const handler = { get: (object, property) => object[property] || 'Default Value' } const p = new Proxy({}, handler) p.a = 1 p.b = undefined console.log(p.a, p.b) // 1, 'Default Value' What's next in Vue3? - @ianaya89 25
26. ☢ " Ahora (3.x) // this.$set(this.object, 'lastName', 'Anaya') // this.$delete(this.object, 'lastName') // this.$set(this.array, 1, 'new string' this.object.lastName = 'Anaya' delete this.object.lastName this.array[1] = 'new string' What's next in Vue3? - @ianaya89 26
27. ☢ " Ahora (3.x) ! "Reac'vity Caveats" What's next in Vue3? - @ianaya89 27
28. ☢ " Ahora (3.x) Map - Set - WeakMap - WeakSet What's next in Vue3? - @ianaya89 28
29. ! IE11 What's next in Vue3? - @ianaya89 29
30. ! Build custom para IE11 (sin Proxy) What's next in Vue3? - @ianaya89 30
31. What's next in Vue3? - @ianaya89 31
32. ❓ Class API class App extends Vue { static template = ` <div @click="increment"> {{ count }} {{ plusOne }} </div> ` count = 0 created() { console.log(this.count) } get plusOne() { return this.count + 1 } increment() { this.count++ } } What's next in Vue3? - @ianaya89 32
33. ⚰ Class API What's next in Vue3? - @ianaya89 33
34. What's next in Vue3? - @ianaya89 34
35. What's next in Vue3? - @ianaya89 35
36. ! Hace dos dias... What's next in Vue3? - @ianaya89 36
37. ! Func&on API What's next in Vue3? - @ianaya89 37
38. What's next in Vue3? - @ianaya89 38
39. ! Composi(on API Composicion flexible basada en funciones What's next in Vue3? - @ianaya89 39
40. ! Reac&vity API import { reactive } from vue What's next in Vue3? - @ianaya89 40
41. ! Reac&vity API import { reactive } from 'vue' const state = state({ count: 0 }) console.log(state.count) What's next in Vue3? - @ianaya89 41
42. ! Reac&vity API import { reactive, watch } from 'vue' const state = reactive({ count: 0 }) watch(() => { document.body.innerHTML = `count is ${state.count}` }) What's next in Vue3? - @ianaya89 42
43. ! Reac&vity API import { reactive, watch, computed } from 'vue' const state = reactive({ count: 0, double: computed(() => state.count * 2) }) watch(() => { document.body.innerHTML = `count is ${state.double}` }) What's next in Vue3? - @ianaya89 43
44. ! Reac&vity API import { reactive } from 'vue' const state = reactive({ count: 0 }) function increment() { state.count += 1 } document.body.addEventListener('click', increment) What's next in Vue3? - @ianaya89 44
45. ! Hello Vue3! setup(props, context) What's next in Vue3? - @ianaya89 45
46. <template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count += 1 } return { state, increment } } } </script> What's next in Vue3? - @ianaya89 46
47. <script> export default { props: { name: String }, setup(props, context) { console.log(props.name) context.attrs context.slots context.refs context.emit context.parent context.root } } </script> What's next in Vue3? - @ianaya89 47
48. ! Depreacados data - computed - methods - watch - inject - mixins - extends - hooks What's next in Vue3? - @ianaya89 48
49. ♻ Dynamic Lifecycle Injec/on What's next in Vue3? - @ianaya89 49
50. ♻ Dynamic Lifecycle Injec/on import { onMounted, onUpdated } from 'vue' export default { setup () { onMounted(() => console.log('Mounted')) onUpdated(() => console.log('Updated')) } } What's next in Vue3? - @ianaya89 50
51. ♻ Dynamic LifeCycle Injec0on import { onMounted, onUpdated } from 'vue' export default { setup () { // attachar un hook para otro componente onMounted(() => console.log('Mounted...'), otherComponent) } } What's next in Vue3? - @ianaya89 51
52. ♻ Dynamic LifeCycle Injec0on <child-component @hook:update="myUpdateHook" /> What's next in Vue3? - @ianaya89 52
53. What's next in Vue3? - @ianaya89 53
54. ! Mo$vación • Escalabilidad • Inferencia de Tipos • Organizacion • Performance • ! Logic Composi+on " What's next in Vue3? - @ianaya89 54
55. ! Reac&vity API + ♻ Dynamic Lifecycle Injec/on + λ Composi)on API = ! Logic Composi+on What's next in Vue3? - @ianaya89 55
56. ! Patrones Actuales • Mixins • HOC • Renderless Components What's next in Vue3? - @ianaya89 56
57. ! Composi(on Func(ons import { reactive, onMounted, onUnmounted } from 'vue' export default function useMousePosition() { const position = reactive({ x: 0, y: 0 }) function updatePosition(e) { position.x = e.pageX position.y = e.pageY } onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) return position } What's next in Vue3? - @ianaya89 57
58. ! Logic Composi+on <template> <div>{{ position.x, position.y }}</div> </template> <script> import useMousePosition from './useMousePosition' import useOtherLogic from './useOtherLogic' export default { setup() { const position = useMousePosition() const other = useOtherLogic() return { position, other } } } </script> What's next in Vue3? - @ianaya89 58
59. ! SE ROMPE TODO! What's next in Vue3? - @ianaya89 59
60. What's next in Vue3? - @ianaya89 60
61. ! Se rompe todo? What's next in Vue3? - @ianaya89 61
62. What's next in Vue3? - @ianaya89 62
63. ! Builds • Standard Build • Compa1bility Build (v2.x ! ) What's next in Vue3? - @ianaya89 63
64. What's next in Vue3? - @ianaya89 64
65. ! Más! • Mul%ples root elements • v-model automágico (y mul%ple) • Propagación de atributos • Herramienta de migración (~5min) • Sintaxis de slots What's next in Vue3? - @ianaya89 65
66. ! Demo What's next in Vue3? - @ianaya89 66
67. What's next in Vue3? - @ianaya89 67
68. ! github.com/vuejs/rfcs What's next in Vue3? - @ianaya89 68
69. ! What's next in Vue3? - @ianaya89 69
70. Nacho: "When Vue 3.0 will be ready?" Evan: "When it’s ready" What's next in Vue3? - @ianaya89 70
71. ! Q4 2019 (?) What's next in Vue3? - @ianaya89 71
72. Gracias! ! @ianaya89 What's next in Vue3? - @ianaya89 72
73. ! Preguntas? ! @ianaya89 What's next in Vue3? - @ianaya89 73