Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

6c3e7ef20801b4b967dc1643f63d6233?s=128

Ignacio Anaya

June 27, 2019
Tweet

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. ☢ Reactivity Engine What's next in Vue3? - @ianaya89 16

  17. What's next in Vue3? - @ianaya89 17

  18. What's next in Vue3? - @ianaya89 18

  19. ☢ " Antes (2.x) Object.defineProperty() What's next in Vue3? -

    @ianaya89 19
  20. ☢ " Antes (2.x) <template> <h1>{{ name }}</h1> </template> <script>

    export default { data () { return { name: 'Nacho', foo: 'bar' } } } </script> What's next in Vue3? - @ianaya89 20
  21. ☢ " 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 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. ☢ " Ahora (3.x) new Proxy(target, handler) What's next in

    Vue3? - @ianaya89 23
  24. ! 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 24
  25. ☢ " 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 25
  26. ☢ " Ahora (3.x) ! "Reactivity Caveats" What's next in

    Vue3? - @ianaya89 26
  27. ☢ " Ahora (3.x) Map - Set - WeakMap -

    WeakSet What's next in Vue3? - @ianaya89 27
  28. ! IE11 What's next in Vue3? - @ianaya89 28

  29. ! IE11 ! Build custom para IE11 (sin Proxy) What's

    next in Vue3? - @ianaya89 29
  30. ❓ 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 30
  31. ⚰ Class API What's next in Vue3? - @ianaya89 31

  32. What's next in Vue3? - @ianaya89 32

  33. ! Reactivity API @vue/observer What's next in Vue3? - @ianaya89

    33
  34. ! Reactivity API import { state } from '@vue/observer' //

    crea un objeto reactivo const store = state({ counter: 1 }) console.log(store.counter) What's next in Vue3? - @ianaya89 34
  35. ! Reactivity API import { value, watch } from '@vue/observer'

    // crea un objeto reactivo sobre un valor primitivo const counter = value(0) // crea un watcher a una propiedad reactiva watch( counter, value => console.log('Counter changed', value) ) What's next in Vue3? - @ianaya89 35
  36. ! Reactivity API import { value, computed } from '@vue/observer'

    // crea un valor/estado reactivo const counter = value(0) // crea una computed sobre una propiedad reactiva const plusOne = computed(() => counter.value + 1) What's next in Vue3? - @ianaya89 36
  37. What's next in Vue3? - @ianaya89 37

  38. ! Por qué? • Cambiar paradigmas para crear Plugins/Librerias •

    Mejorar la integración SDK's • Mejorar la integración con librerías • Crear alternativas para Vuex What's next in Vue3? - @ianaya89 38
  39. ♻ Dynamic Lifecycle Injection What's next in Vue3? - @ianaya89

    39
  40. ♻ Dynamic Lifecycle Injection import { onMounted, onUpdated } from

    'vue' export default { setup () { onMounted(() => console.log('Mounted')) onUpdated(() => console.log('Updated')) } } What's next in Vue3? - @ianaya89 40
  41. ♻ Dynamic Lifecycle Injection import { onMounted, onUpdated } from

    'vue' export default { setup () { // updated hook que se ejecuta solo una vez const remove = onUpdated(() => { console.log('Updated') remove() }) } } What's next in Vue3? - @ianaya89 41
  42. ♻ Dynamic LifeCycle Injection 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 42
  43. ♻ Dynamic LifeCycle Injection <child-component @hook:update="myUpdateHook" /> What's next in

    Vue3? - @ianaya89 43
  44. λ Function API ! What's next in Vue3? - @ianaya89

    44
  45. λ Function API <template> <div> <span>count is {{ count }}</span>

    <span>plusOne is {{ plusOne }}</span> <button @click="increment">count++</button> </div> </template> What's next in Vue3? - @ianaya89 45
  46. λ Function API <script> import { value, computed, onMounted }

    from 'vue' export default { setup() { const count = value(0) const plusOne = computed(() => count.value + 1) const increment = () => { count.value += 1 } onMounted(() => { console.log('mounted') }) return { count, plusOne, increment } } } </script> What's next in Vue3? - @ianaya89 46
  47. λ Function API <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. What's next in Vue3? - @ianaya89 49

  50. ! Motivación • Inferencia de Tipos • Reducir el Bundle

    • Performance • ! Logic Composition " What's next in Vue3? - @ianaya89 50
  51. ! Reactivity API + ♻ Dynamic Lifecycle Injection + λ

    Function API = ! Composition Functions What's next in Vue3? - @ianaya89 51
  52. Patrones Actuales • Mixins • HOC • Renderless Components What's

    next in Vue3? - @ianaya89 52
  53. ! Composition Functions import { onMounted, onUnmounted } from 'vue'

    import { state } from '@vue/observer' export default function useMouse() { const mousePos = state({ x: 0, y: 0 }) const update = e => { x.value = e.pageX y.value = e.pageY } onMounted(() => { window.addEventListener('mousemove', update) }) onUnmounted(() => { window.removeEventListener('mousemove', update) }) return mousePos } What's next in Vue3? - @ianaya89 53
  54. ! Logic Composition <template> <div>{{ x, y }}</div> </template> <script>

    import useMouse from './useMouse' export default { setup() { const { x, y } = useMouse() const { z } = useOtherLogic() return { x, y, z } } } </script> What's next in Vue3? - @ianaya89 54
  55. ! SE ROMPE TODO! What's next in Vue3? - @ianaya89

    55
  56. What's next in Vue3? - @ianaya89 56

  57. ! Se rompe todo? What's next in Vue3? - @ianaya89

    57
  58. What's next in Vue3? - @ianaya89 58

  59. ! Builds • Standard Build • Compatibility Build (v2.x )

    What's next in Vue3? - @ianaya89 59
  60. What's next in Vue3? - @ianaya89 60

  61. ! Más! • Multiples root elements • v-model automágico (y

    multiple) • Propagación de atributos • Herramienta de migración (~5min) • Sintaxis de slots What's next in Vue3? - @ianaya89 61
  62. ! Demo What's next in Vue3? - @ianaya89 62

  63. What's next in Vue3? - @ianaya89 63

  64. ! github.com/vuejs/rfcs What's next in Vue3? - @ianaya89 64

  65. ! What's next in Vue3? - @ianaya89 65

  66. Nacho: "When Vue 3.0 will be ready?" Evan: "When it’s

    ready" What's next in Vue3? - @ianaya89 66
  67. ! Q4 2019 (?) What's next in Vue3? - @ianaya89

    67
  68. Gracias! ! @ianaya89 What's next in Vue3? - @ianaya89 68

  69. ! Preguntas? ! @ianaya89 What's next in Vue3? - @ianaya89

    69