Tweet
Tweet

Slide 1

Slide 1 text

Diving into Reac-vity !"# Diving into Reac-vity - @ianaya89

Slide 2

Slide 2 text

Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Ambassador @Auth0 • Ambassador Na>veScript • Organizador @Vuenos_Aires Diving into Reac-vity - @ianaya89

Slide 3

Slide 3 text

! na$vescript-vue.org ! Diving into Reac-vity - @ianaya89

Slide 4

Slide 4 text

! Vue.js Diving into Reac-vity - @ianaya89

Slide 5

Slide 5 text

new Vue({ data () { return { hi: 'Hi ! ' } }, template: `

{{ hi }}

` }) Diving into Reac-vity - @ianaya89

Slide 6

Slide 6 text

Diving into Reac-vity - @ianaya89

Slide 7

Slide 7 text

! Que es Reac)vidad? Diving into Reac-vity - @ianaya89

Slide 8

Slide 8 text

! No es solo RxJS Diving into Reac-vity - @ianaya89

Slide 9

Slide 9 text

! Accionar ante un es-mulo Diving into Reac-vity - @ianaya89

Slide 10

Slide 10 text

let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89

Slide 11

Slide 11 text

let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 value = 2 console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89

Slide 12

Slide 12 text

let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 value = 2 doubleValue = value * 2 console.log(doubleValue) // 4 Diving into Reac-vity - @ianaya89

Slide 13

Slide 13 text

Diving into Reac-vity - @ianaya89

Slide 14

Slide 14 text

Diving into Reac-vity - @ianaya89

Slide 15

Slide 15 text

! Reac&vidad en Frameworks: • Angular: Dirty checking • React: setState • Vue: Ge6ers y Se6ers Diving into Reac-vity - @ianaya89

Slide 16

Slide 16 text

☠ BiuSheiEs Diving into Reac-vity - @ianaya89

Slide 17

Slide 17 text

⚠ Diving into Reac-vity - @ianaya89

Slide 18

Slide 18 text

Diving into Reac-vity - @ianaya89

Slide 19

Slide 19 text

!" Ge$ers y Se$ers Diving into Reac-vity - @ianaya89

Slide 20

Slide 20 text

! Object.defineProperty Diving into Reac-vity - @ianaya89

Slide 21

Slide 21 text

! r() Diving into Reac-vity - @ianaya89

Slide 22

Slide 22 text

function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89

Slide 23

Slide 23 text

function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89

Slide 24

Slide 24 text

function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } const reactiveData = r({ foo: 1 }) reactiveData.foo++ console.log(reactiveData.foo) Diving into Reac-vity - @ianaya89

Slide 25

Slide 25 text

Diving into Reac-vity - @ianaya89

Slide 26

Slide 26 text

! component Diving into Reac-vity - @ianaya89

Slide 27

Slide 27 text

const component = { el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `

${this.data.hi}

` } } component.render() Diving into Reac-vity - @ianaya89

Slide 28

Slide 28 text

const component = { el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `

${this.data.hi}

` } } component.render() Diving into Reac-vity - @ianaya89

Slide 29

Slide 29 text

Diving into Reac-vity - @ianaya89

Slide 30

Slide 30 text

! r() + component Diving into Reac-vity - @ianaya89

Slide 31

Slide 31 text

const component = { el: document.getElementById('app'), data: r({ hi: 'Hi ! '}), render () { this.el.innerHTML = `

${this.data.hi}

` } } Diving into Reac-vity - @ianaya89

Slide 32

Slide 32 text

const component = { el: document.getElementById('app'), data: r({ hi: 'Hi ! '}), render () { this.el.innerHTML = `

${this.data.hi}

` } } component.render() component.data.hi = 'Bye ✌ ' component.render() Diving into Reac-vity - @ianaya89

Slide 33

Slide 33 text

Diving into Reac-vity - @ianaya89

Slide 34

Slide 34 text

! r() + subscriber Diving into Reac-vity - @ianaya89

Slide 35

Slide 35 text

function r(obj, cb) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89

Slide 36

Slide 36 text

const component = { el: document.getElementById('app'), render () { this.el.innerHTML = `

${this.data.hi}

` } } component.data = r({ hi: 'Hi ' }, component.render.bind(component)) Diving into Reac-vity - @ianaya89

Slide 37

Slide 37 text

Diving into Reac-vity - @ianaya89

Slide 38

Slide 38 text

! new BiuSheiEs() Diving into Reac-vity - @ianaya89

Slide 39

Slide 39 text

function BiuSheiEs (vm) { const data = vm.data || {} const render = vm.render.bind(vm) vm.data = r(data, render) return vm } Diving into Reac-vity - @ianaya89

Slide 40

Slide 40 text

const component = new BiuSheiEs({ el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `

${this.data.hi}

` } }) Diving into Reac-vity - @ianaya89

Slide 41

Slide 41 text

Diving into Reac-vity - @ianaya89

Slide 42

Slide 42 text

! data anidada Diving into Reac-vity - @ianaya89

Slide 43

Slide 43 text

function r(obj, cb) { const wrapped = {} for (let k in obj) { let value = obj[k] if (typeof value === 'object' && !Array.isArray(value)) { value = r(value, cb) } Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89

Slide 44

Slide 44 text

const component = new BiuSheiEs({ el: document.getElementById('app'), data: { user: { name: '@ianaya89' } }, render () { this.el.innerHTML = `

Welcome ${this.data.user.name}

` } }) Diving into Reac-vity - @ianaya89

Slide 45

Slide 45 text

Diving into Reac-vity - @ianaya89

Slide 46

Slide 46 text

! ~ 50 líneas de código Diving into Reac-vity - @ianaya89

Slide 47

Slide 47 text

Diving into Reac-vity - @ianaya89

Slide 48

Slide 48 text

! Reac&vity Caveats vuejs.org/v2/guide/reac0vity.html Diving into Reac-vity - @ianaya89

Slide 49

Slide 49 text

! Vue 3 Proxy Diving into Reac-vity - @ianaya89

Slide 50

Slide 50 text

Diving into Reac-vity - @ianaya89

Slide 51

Slide 51 text

Gracias! @ianaya89 Diving into Reac-vity - @ianaya89

Slide 52

Slide 52 text

! Diving into Reac-vity - @ianaya89

Slide 53

Slide 53 text

⁉ Preguntas? Diving into Reac-vity - @ianaya89

Slide 54

Slide 54 text

! Links bit.ly/diving-vue bit.ly/diving-vue-demo Diving into Reac-vity - @ianaya89