Let's build a Virtual DOM 🌈!

Transcript

1. Let’s build a Virtual DOM! JSDayUY ~ 2017
2. Hola! Soy Karen " Developer en Wingu (@desdewingu) => Trabajando en Nilus (@nilusorg) @keyserfaty
3. Alguna vez hicieron una app sin usar ningún framework? ✋
4. Y sin usar jQuery tampoco? ✋
5. Digamos que queremos hacer que un input cambie el texto en un div
7. Cómo hacemos esto en vanilla JS?
8. // Crea los nodos const $input = document.createElement('input') $input.setAttribute('type', 'text') $input.setAttribute('value', '') const $textContainer = document.createElement('div') $textContainer.setAttribute('class', 'text-container') const $container = document.createElement('div') $container.setAttribute('class', 'container') $container.appendChild($input) $container.appendChild($textContainer) const $root = document.querySelector('#root') $root.appendChild($container)
9. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
10. Qué acaba de pasar?
11. (the real DOM)
12. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
13. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
14. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
15. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
16. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
17. // Appendea eventos al input $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
18. Qué está pasando por atrás mientras hacemos todo esto?
19. (WebKit)
20. Y qué problema tiene esto?
21. 1. El proceso de repainting del browser es lento
22. 2. Si tenemos 200 nodos podríamos tener potencialmente 200 re-renders
23. Sería mejor si pudiéramos hacer todos los cambios en el DOM en grupo en vez de individualmente
24. Digamos que queremos hacer nuestra ““app”” de nuevo pero usando la API del DOM lo menos posible
25. Podemos empezar por no crear todos los nodos al principio
26. Podemos probar creando una representación de esos nodos y después crearlos todos juntos al final
27. const container = { type: 'div', props: { class: 'container' }, children: [ // input & text-container ] }
28. Como crear estos objetos es una experiencia horrible podemos crear una función que los cree por nosotros
29. const h = (type, props, ...children) => ({ type, props, children })
30. const element = ( h('div', { className: 'container' }, h('input', { type: 'text', onKeyUp: () => {} }), h('div', { className: 'text-container' }, ‘Un texto!’) ) )
31. const element = ( h('div', { className: 'container' }, h('input', { type: 'text', onKeyUp: () => {} }), h('div', { className: 'text-container' }, ‘Un texto!’) ) ) => const element = ( { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: () => {} } }, { type: 'div', props: { className: 'text-container' }, children: [ ‘Un texto!’ ] } ] } )
32. 1- Crear una representación de los nodos del DOM
33. Ahora necesitamos convertir a esos nodos en elementos del DOM posta
34. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } return document.createElement(node.type) }
36. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } const $el = document.createElement(node.type) node.children .map(child => createElement(child)) .forEach(childNode => $el.appendChild(childNode)) return $el }
37. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } const $el = document.createElement(node.type) node.children .map(child => createElement(child)) .forEach(childNode => $el.appendChild(childNode)) return $el }
38. Qué pasa con las props?
39. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } const $el = document.createElement(node.type) setProps($el, node.props) setEvents($el, node.props) node.children .map(child => createElement(child)) .forEach(childNode => $el.appendChild(childNode)) return $el }
40. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } const $el = document.createElement(node.type) setProps($el, node.props) setEvents($el, node.props) node.children .map(child => createElement(child)) .forEach(childNode => $el.appendChild(childNode)) return $el }
41. const setProp = ($el, name, value) => { if (isEventProp(name)) { return } else if (name === 'className') { $el.setAttribute('class', value) } else { $el.setAttribute(name, value) } } const setProps = ($el, props) => { Object.keys(props) .forEach(prop => setProp($el, prop, props[prop])) }
42. const setEvent = ($el, name, value) => { $el.addEventListener(extractName(name), value) } const setEvents = ($el, props) => { Object.keys(props) .forEach(prop => isEventProp(prop) ? setEvent($el, prop, props[prop]) : null ) }
43. const createElement = node => { if (typeof node === 'string') { return document.createTextNode(node) } const $el = document.createElement(node.type) setProps($el, node.props) setEvents($el, node.props) node.children .map(child => createElement(child)) .forEach(childNode => $el.appendChild(childNode)) return $el }
44. const $root = document.getElementById('root') $root.appendChild(createElement(element))
45. 2- Crear todos los nodos juntos y appendearlos al DOM
46. Antes de seguir vamos a hacer una suposición:
47. Supongamos que estamos guardando nuestro state de alguna forma (con Redux, por ejemplo)
48. Si queremos que nuestra app cambie cuando hay un cambio en el state no podemos hacer los cambios en el eventListener
49. $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
50. Tenemos que hacer algo más declarativo y menos imperativo
51. Por qué mejor no armamos una función a la que le pasemos nuestro árbol de nodos
52. Y que haga los cambios que necesita comparándolo con el árbol anterior
53. Esta función va a hacer algo parecido a esto:
54. $input.addEventListener('keyup', function (e) { const text = e.target.value const $textNode = document.createTextNode(text) const $oldTextNode = $textContainer.childNodes[0] if (!$oldTextNode) { $textContainer.appendChild($textNode) } else { $textContainer.replaceChild($textNode, $oldTextNode) } })
55. Pero va a ser genérica y va a funcionar para cualquier cambio que se produzca en el árbol de nodos
56. Tenemos nuestros dos árboles de nodos:
57. Momento 0: No tenemos nodos en el DOM Momento 1: Hacemos el primer rendering de los nodos
58. Árbol 1: Árbol 2: (nada) { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: updateText } }, { type: 'div', props: { className: 'text-container' }, children: [] } ] }
59. CASO 1: Hay que renderizar el nodo en el DOM
60. const updateElement = ($parent, newNode, oldNode) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } }
61. const updateElement = ($parent, newNode, oldNode) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } }
62. Momento 0: el div está vacío Momento 1: el div tiene un textElement adentro con el texto ‘TEXTO!’
63. Árbol 1: Árbol 2: { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: updateText } }, { type: 'div', props: { className: 'text-container' }, children: [‘TEXTO!’] } ] } { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: updateText } }, { type: 'div', props: { className: 'text-container' }, children: [] } ] }
64. CASO 2: El contenido de uno de los children cambió y hay que actualizarlo
65. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } }
66. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } }
67. Momento 0: el div tiene contenido Momento 1: el div está vacío
68. Árbol 1: Árbol 2: { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: updateText } }, { type: 'div', props: { className: 'text-container' }, children: [‘TEXTO!’] } ] } { type: 'div', props: { className: 'container' }, children: [ { type: 'input', props: { type: 'text', onKeyUp: updateText } }, { type: 'div', props: { className: 'text-container' }, children: [] } ] }
69. CASO 3: Uno de los children tenía un nodo que ya no tiene más
70. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (!newNode) { $parent.removeChild($parent.childNodes[index]) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } }
71. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (!newNode) { $parent.removeChild($parent.childNodes[index]) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } }
72. Esto nos va a servir para un elemento pero necesitamos que la función recorra todo el árbol
73. La función completa se ve así:
74. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (!newNode) { $parent.removeChild($parent.childNodes[index]) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } else if (newNode.type) { const newLength = newNode.children.length const oldLength = oldNode.childNodes.length for (let i = 0; i < newLength || i < oldLength; i++) { updateElement($parent.childNodes[index], newNode.children[i], oldNode.children[i], i) } } }
75. const updateElement = ($parent, newNode, oldNode, index = 0) => { if (!oldNode) { $parent.appendChild(createElement(newNode)) } else if (!newNode) { $parent.removeChild($parent.childNodes[index]) } else if (nodeChanged(newNode, oldNode)) { $parent.replaceChild(createElement(newNode), $parent.childNodes[index]) } else if (newNode.type) { const newLength = newNode.children.length const oldLength = oldNode.childNodes.length for (let i = 0; i < newLength || i < oldLength; i++) { updateElement($parent.childNodes[index], newNode.children[i], oldNode.children[i], i) } } }
76. 3- Hacer cambios en el árbol de nodos cuando se produzca algún evento
77. Hasta ahora no mencionamos al virtual DOM
78. Ni dijimos diffing algorithm
79. Ni blockchain
81. Recapitulando: Nuestra función updateElement es nuestro diffing algorithm
82. Compara dos árboles de nodos (del virtual DOM) y actualiza solo las partes que cambiaron
83. Internamente React (y otros) tienen un proceso que es más o menos así:
84. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
85. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
86. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
87. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
88. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
89. Crea nodos en el vDOM => Crea los nodos en el DOM => (Cambios / eventos) => Aplica el diffing algorithm => Hace patching en el DOM
91. Entonces: 1- Creamos un virtual DOM (`h`) 2- Creamos los elementos en el DOM (`createElement`) 3- Aplicamos los cambios necesarios (`updateElement`)
92. Muy interesante todo Karen. A dónde puedo ir a leer más sobre esto?
93. krn.sh/jsdayuy => slides / repo / links
94. Gracias! @keyserfaty