Tweet
Tweet

Slide 1

Slide 1 text

What's next in Vue3 ! ! @ianaya89 What's next in Vue3? - @ianaya89 1

Slide 2

Slide 2 text

! Nacho Anaya ! @ianaya89 • JavaScript Engineer @BloqInc • Ambassador @Auth0 • Tech Speaker @MozTechSpeakers • Organizador @Vuenos_Aires What's next in Vue3? - @ianaya89 2

Slide 3

Slide 3 text

! What's next in Vue3? - @ianaya89 3

Slide 4

Slide 4 text

! What's next in Vue3? - @ianaya89 4

Slide 5

Slide 5 text

! Vue 3 What's next in Vue3? - @ianaya89 5

Slide 6

Slide 6 text

! Totalmente Re-escrito What's next in Vue3? - @ianaya89 6

Slide 7

Slide 7 text

! Simple y Explícito What's next in Vue3? - @ianaya89 7

Slide 8

Slide 8 text

! Performance What's next in Vue3? - @ianaya89 8

Slide 9

Slide 9 text

! Monorepo What's next in Vue3? - @ianaya89 9

Slide 10

Slide 10 text

! Paquetes Individuales What's next in Vue3? - @ianaya89 10

Slide 11

Slide 11 text

!" Facilita Contribuir What's next in Vue3? - @ianaya89 11

Slide 12

Slide 12 text

➕ Extensible What's next in Vue3? - @ianaya89 12

Slide 13

Slide 13 text

! Tree-Shakeable Global API What's next in Vue3? - @ianaya89 13

Slide 14

Slide 14 text

! 10 KB gzipped v2.x ~20 KB What's next in Vue3? - @ianaya89 14

Slide 15

Slide 15 text

! TypeScript What's next in Vue3? - @ianaya89 15

Slide 16

Slide 16 text

☢ Reactivity Engine What's next in Vue3? - @ianaya89 16

Slide 17

Slide 17 text

What's next in Vue3? - @ianaya89 17

Slide 18

Slide 18 text

What's next in Vue3? - @ianaya89 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

☢ " Antes (2.x)

{{ name }}

export default { data () { return { name: 'Nacho', foo: 'bar' } } } What's next in Vue3? - @ianaya89 20

Slide 21

Slide 21 text

☢ " Antes (2.x) 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') } } What's next in Vue3? - @ianaya89 21

Slide 22

Slide 22 text

☢ " Antes (2.x) 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') } } What's next in Vue3? - @ianaya89 22

Slide 23

Slide 23 text

☢ " Ahora (3.x) new Proxy(target, handler) What's next in Vue3? - @ianaya89 23

Slide 24

Slide 24 text

! 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

Slide 25

Slide 25 text

☢ " 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

Slide 26

Slide 26 text

☢ " Ahora (3.x) ! "Reactivity Caveats" What's next in Vue3? - @ianaya89 26

Slide 27

Slide 27 text

☢ " Ahora (3.x) Map - Set - WeakMap - WeakSet What's next in Vue3? - @ianaya89 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

! IE11 ! Build custom para IE11 (sin Proxy) What's next in Vue3? - @ianaya89 29

Slide 30

Slide 30 text

❓ Class API class App extends Vue { static template = `
{{ count }} {{ plusOne }}
` count = 0 created() { console.log(this.count) } get plusOne() { return this.count + 1 } increment() { this.count++ } } What's next in Vue3? - @ianaya89 30

Slide 31

Slide 31 text

⚰ Class API What's next in Vue3? - @ianaya89 31

Slide 32

Slide 32 text

What's next in Vue3? - @ianaya89 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

! 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

Slide 35

Slide 35 text

! 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

Slide 36

Slide 36 text

! 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

Slide 37

Slide 37 text

What's next in Vue3? - @ianaya89 37

Slide 38

Slide 38 text

! 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

Slide 39

Slide 39 text

♻ Dynamic Lifecycle Injection What's next in Vue3? - @ianaya89 39

Slide 40

Slide 40 text

♻ 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

Slide 41

Slide 41 text

♻ 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

Slide 42

Slide 42 text

♻ 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

Slide 43

Slide 43 text

♻ Dynamic LifeCycle Injection What's next in Vue3? - @ianaya89 43

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

λ Function API
count is {{ count }} plusOne is {{ plusOne }} count++
What's next in Vue3? - @ianaya89 45

Slide 46

Slide 46 text

λ Function API 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 } } } What's next in Vue3? - @ianaya89 46

Slide 47

Slide 47 text

λ Function API export default { props: { name: String }, setup(props, context) { console.log(props.name) context.attrs context.slots context.refs context.emit context.parent context.root } } What's next in Vue3? - @ianaya89 47

Slide 48

Slide 48 text

! Depreacados data - computed - methods - watch - inject - mixins - extends - hooks What's next in Vue3? - @ianaya89 48

Slide 49

Slide 49 text

What's next in Vue3? - @ianaya89 49

Slide 50

Slide 50 text

! Motivación • Inferencia de Tipos • Reducir el Bundle • Performance • ! Logic Composition " What's next in Vue3? - @ianaya89 50

Slide 51

Slide 51 text

! Reactivity API + ♻ Dynamic Lifecycle Injection + λ Function API = ! Composition Functions What's next in Vue3? - @ianaya89 51

Slide 52

Slide 52 text

Patrones Actuales • Mixins • HOC • Renderless Components What's next in Vue3? - @ianaya89 52

Slide 53

Slide 53 text

! 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

Slide 54

Slide 54 text

! Logic Composition
{{ x, y }}
import useMouse from './useMouse' export default { setup() { const { x, y } = useMouse() const { z } = useOtherLogic() return { x, y, z } } } What's next in Vue3? - @ianaya89 54

Slide 55

Slide 55 text

! SE ROMPE TODO! What's next in Vue3? - @ianaya89 55

Slide 56

Slide 56 text

What's next in Vue3? - @ianaya89 56

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

What's next in Vue3? - @ianaya89 58

Slide 59

Slide 59 text

! Builds • Standard Build • Compatibility Build (v2.x ) What's next in Vue3? - @ianaya89 59

Slide 60

Slide 60 text

What's next in Vue3? - @ianaya89 60

Slide 61

Slide 61 text

! 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

Slide 62

Slide 62 text

! Demo What's next in Vue3? - @ianaya89 62

Slide 63

Slide 63 text

What's next in Vue3? - @ianaya89 63

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Nacho: "When Vue 3.0 will be ready?" Evan: "When it’s ready" What's next in Vue3? - @ianaya89 66

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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