Construyendo el VDOM de Vue 3 en el Escenario

Muy bien. Así que mi charla podría interrumpir un poco la sesión de preguntas y respuestas, por eso voy directo a la presentación.

Hoy vamos a construir un Virtual DOM, pero primero vamos a ver un poco qué es.

Así que primero un poco sobre mí. Mi nombre es Mark, y aquí es donde puedes encontrarme en Twitter. Ahí es donde soy más activo. Así que si después de esto todavía tienes preguntas que no puedo responder aquí o simplemente quieres hablar en general, contáctame allí. Soy DevRel Lead en WeAreDevelopers, donde ayudo a organizar conferencias como nuestro Congreso Mundial en julio, que es súper genial. Soy coorganizador del capítulo de Bellevue. Es el capítulo belga de Vue.js. Y recientemente soy estudiante piloto, lo cual ocupa todo mi tiempo que no paso trabajando. Así que si hay algún entusiasta de la aviación aquí, contáctame más tarde, podemos hablar durante horas sobre esto tema.

Muy bien, veamos el Virtual DOM. Bueno, ¿qué es? El Virtual DOM es un modelo de objeto de documento. Pero, ¿qué significa eso? Es una interfaz de programación para documentos HTML y XML. Y esto representa un documento como un árbol. Así que tienes un nodo y luego tienes uno o más hijos. Y luego esto podría tener uno o más hijos. Y hasta el final, no hay nada más que hacer que renderizar lo que sea. Ya sea renderizar una imagen, texto, lo que sea. Y se puede acceder y manipular a través de JavaScript. Y así es como se ve un DOM. El DOM que todos conocemos y amamos. Este es en realidad el DOM de view3.org. No, view3.org creo. Vue.js.org. Sí, lo siento. Sí, el sitio web oficial de Vue.js. Aquí puedes ver algunos contenedores, como la aplicación y la aplicación VP, que luego tienen hijos y así sucesivamente. Así que en eso nos vamos a basar.

De acuerdo, ahora tenemos una idea de qué es un DOM. Veamos qué es un Virtual DOM. En realidad, es lo que su nombre sugiere: una representación virtual del DOM real. Esto podría ser, por ejemplo, objetos en JavaScript, que es exactamente lo que haremos hoy. Este elemento vive en el navegador o en la memoria del navegador y está sincronizado con el DOM real. Esto es lo que utiliza Vue.js en su núcleo, al igual que otros frameworks. Sin embargo, por ejemplo, Petite View no utiliza un Virtual DOM, lo cual está bien.

Ahora, podrías preguntarte: `¿Por qué deberíamos usarlo o por qué tenemos un Virtual DOM?` Especialmente después de escuchar a Avenue decir que tiene cierta sobrecarga de rendimiento. Pero veamos. Lo genial aquí es que desacopla la lógica de renderizado del DOM real y es más fácil manipular y inspeccionar todo el conjunto de forma programática si queremos hacer algo personalizado. También es más fácil reutilizarlo fuera del navegador, por ejemplo, si haces una aplicación móvil nativa o un renderizador WebGL. Una vez escuché a Avenue responder a una pregunta en una entrevista donde dijo que alguien construyó un renderizador WebGL basado en el Virtual DOM de Vue 3, lo cual es bastante genial.

Bien, antes de comenzar a construir esto, echemos un vistazo al DOM real. ¿Qué necesitamos construir aquí? Veamos este marcado HTML muy simple. ¿Qué tenemos aquí? Tenemos estas cosas que llamamos etiquetas, ¿verdad? Necesitamos representar las etiquetas en nuestro Virtual DOM. Anotémoslo. Necesitamos etiquetas. ¿Qué más necesitamos aquí? Estos son atributos. También podría ser una función, como un evento onClick o algo así. Llamémoslo propiedades. Y luego tenemos la última parte, que es nuestro contenido, pero no lo llamaremos contenido porque es un árbol, así que simplemente el árbol tiene hijos. Llamémoslo hijos. Pero como puedes ver en este ejemplo, hijos no es la forma más intuitiva de llamarlo porque podría ser solo texto, podría ser solo un elemento allí o podría ser varios hijos. Por lo tanto, en la última parte tiene más sentido llamarlo hijos, pero así es como se llama.

Bien, para crear nodos tenemos esta función H o Hyperscript, que significa simplemente JavaScript que produce HTML. Veamos qué podemos crear con esto. Aquí represento tres cosas diferentes que podemos hacer. Aquí puedes ver en el tercer parámetro o tercer argumento, es un texto. Por lo tanto, nuestro Virtual DOM, nuestro DOM puede tener un texto. ¿Qué más puede tener? Puede tener otro nodo virtual que luego tiene, en este caso, otro texto. Pero podría ser hasta, como, puede tener tantos hijos como sea necesario o como desees. Y luego tenemos el tercer ejemplo, que es tener una matriz de estos nodos.

Así como listas, o simplemente varios elementos dentro de un contenedor. De acuerdo. Entonces, ¿qué necesitamos para construir nuestro propio Virtual DOM? Primero, necesitamos una función para crear nodos virtuales. Esta es la función H que vimos aquí. Necesitamos algo para montar esta cosa en el DOM. Esto simplemente significa crear un elemento DOM real y agregarlo al DOM real. Y la cosa inversa, simplemente eliminarlo, no solo ocultarlo, sino eliminarlo realmente del DOM. Y la última parte es algo llamado parche, cuando queremos actualizar algo. Y aquí es donde entra en juego la magia del Virtual DOM. Algo cambia, un valor cambia, y en todos los lugares donde se necesita, se actualiza aplicando estos cambios, por así decirlo.

Muy bien, es hora de codificación en vivo. Y sí. Ese chico lo entiende. Entonces, ¿todos pueden leer el texto? ¿Es lo suficientemente grande? Sí. De acuerdo, genial. En realidad puedo... ¿Fue esto? Sí. Un poco más grande. De acuerdo.

Así que, te mostraré rápidamente mi configuración aquí. No es nada... Solo vamos a cerrar esto. Ups. Entonces, tengo un archivo HTML irregular con un poco de código base aquí. Importo Tailwind solo porque es más fácil estilizar las cosas aquí. Y luego tenemos algo... Solo para centrar la cosa, para que sea un poco más atractiva. Y luego tenemos esta aplicación, este contenedor con el ID de la aplicación. Aquí es donde vamos a montar nuestra aplicación o nuestro DOM. Luego importamos la función hFunction, la función mount aquí, desde nuestro VDOM de vista. Veremos qué hay ahí en un segundo. Y luego simplemente buscamos nuestro elemento de la aplicación aquí, y luego montamos lo que sea el VDOM y en ese contenedor. Entonces, el VDOM aún no se ha creado. Y tengo algunos ejemplos. Pero primero veamos VDOM de vista. ¿Qué hay que importar allí? Bueno, nada por ahora, porque vamos a crear todo esto desde cero en un segundo.

¿Qué más tenemos en este proyecto? Entonces, tenemos ejemplos. Y esto, lo usaremos para ver paso a paso lo que necesitamos agregar a nuestro virtual DOM para, al final, terminar con una versión muy simplificada del Virtual DOM de Vue 3.0. Así que, hay muchas suposiciones que voy a hacer aquí que simplemente hacen que la cosa sea más simple. Pero el objetivo de esta charla es que veas qué es un Virtual DOM, cómo se ve, y simplemente desmitificar un poco todo este tema. Así que, tenemos algunos Virtual DOMs diferentes aquí, desde más fáciles hasta un poco más complejos. Y veremos, pasaremos por cada uno de ellos uno por uno. De acuerdo, así que comencemos creando nuestro virtual DOM.

Y este es un nuevo nodo virtual y esto es digamos un H1. No agregamos ninguna propiedad y decimos hello world. Y no pasará nada porque ya podemos ver que hay errores.

Pero comencemos a implementar nuestro virtual DOM. Tenemos una función llamada la función H. Esto es bueno. Y tenemos la función mount que mencionamos antes. Tenemos la función unmount y luego tenemos la función patch. De acuerdo.

Entonces, ya aprendimos las cosas que necesitamos para que esta función H cree un nodo virtual. Esto es una etiqueta, las propiedades como atributos y cosas, funciones y el contenido que llamamos hijos. Lo dejaré así. De acuerdo. Y luego montar. ¿Qué vamos a hacer? Bueno, queremos montar uno de estos nodos virtuales que la etiqueta H crea en el DOM real, así que esperamos un nodo virtual. Y llamo a este contenedor donde queremos montarlo. Entonces, en el ejemplo más simple que vimos antes, el contenedor, el div con el id app, eso va a ser en la primera ejecución nuestro contenedor en este caso.

Y cuando queremos desmontar algo, solo necesitamos el nodo virtual. No necesitamos un contenedor ni nada porque podemos deducirlo de nuestro nodo virtual. Veremos en un segundo cómo funciona esto. Y el parche es que queremos comparar un nodo virtual con otro nodo virtual. Y aplicamos cambios al DOM real, comparando el nodo virtual 1 con el nodo virtual 2.

Entonces, lo más fácil de hacer aquí probablemente sea escribir esta función H porque nuestro nodo virtual tiene una jerarquía muy plana que es así. Devuelve la etiqueta, las propiedades y los hijos. Y ya lo tenemos. Eso es todo lo que hay en esta función H. Simplemente crea un objeto al que más tarde agregaremos algunas cosas. En realidad, agregamos una cosa allí, que es un enlace hacia el elemento en el DOM real, que se llamará L, pero lo agregaremos más tarde. De acuerdo, hasta ahora todo bien, pero cuando lo guardamos, aún no sucede nada. No exporta el nombre aged.

Sí exporta. ¿No veo algo? De acuerdo, ahora funciona, lo que sea.

De acuerdo, bien. Ahora tenemos nuestro nodo virtual aquí y ahora queremos montarlo. Entonces, lo primero es que queremos crear un elemento aquí y simplemente usamos document.createElement, y esto sería como h1, y aquí el texto, ¿verdad? Pero sabemos qué etiqueta será porque la tenemos en nuestro nodo virtual. Recuerda que el nodo virtual aquí es el resultado de esta función h, así que tendremos acceso a la etiqueta aquí. Así que simplemente escribiremos vnode.tag. Y luego el contenido será vnode.... No, incorrecto. Así que simplemente creamos la etiqueta del elemento. Y luego montamos esto en el DOM real, en el contenedor, así que container.add, no, siempre incorrecto, append, child. Append, ¿qué vamos a agregar? Vamos a agregar nuestro elemento aquí. Veamos qué sucede. No se muestra nada, pero si inspeccionamos esto aquí, abrimos, da, da, da, da, da, da, y podemos ver que realmente se agregó la etiqueta que creamos. Simplemente aún no tiene un texto o contenido porque, bueno, no lo escribimos, así que hagámoslo. Digamos que aquí tenemos nuestro ejemplo, crear H1, con, simplemente ignoramos para este primer ejemplo las propiedades. Solo tendrá un texto. Supongamos por ahora, por el momento, que esto es un texto, así que vamos element.text, el contenido del texto es, y es Vno.children. Y ahí lo tenemos, hemos montado nuestro primer Virtual DOM, uno muy simple, en nuestro navegador. Hasta ahora todo bien.

Así que ahora tenemos, eliminaré esto aquí, e importaremos algunos, para cada ejemplo importaré esto desde nuestros archivos de ejemplos. Veamos el primer ejemplo de qué se trata. Así que esto es una prueba, y déjame abrir, no, de acuerdo, aquí, ejemplos. Entonces nuestro primer ejemplo es bastante similar a lo que teníamos antes. Es un H1, tiene un texto, pero también tiene propiedades aquí. Y esto queremos aplicarlo a este elemento. Así que queremos agregar una clase con texto azul, fuente más grande, y así sucesivamente. Entonces, ¿qué tenemos que hacer aquí? Tenemos que agregar o establecer un atributo. Así que simplemente vamos a element, set attribute, y va a ser algo como class, y luego va a ser el contenido aquí. Así que tenemos que iterar cinco minutos.

De acuerdo, tenemos que acelerar esto. Así que tenemos que iterar sobre las props, que será para la clave en vnode.props. Luego simplemente aplicamos esto aquí. Así que la clave, y luego tenemos vnode.props en el índice de la clave. Podemos ver aquí en el DOM real que esto funciona y también se aplica aquí en el navegador. Muy bien.

Veamos nuestro segundo ejemplo aquí. Virtual DeVDom2, que es un botón. Echemos un vistazo, los ejemplos. Es básicamente lo que ya tenemos. Es redondeado. Es gris. Así que esto funciona. Pero ahora hay una función de clic y cuando haces clic, queremos mostrar el signo de los cuernos. Pero cuando hacemos clic, no hay movimiento. Así que esto no está funcionando. Entonces, si inspeccionamos esto nuevamente, vemos que es on click y luego es solo una cadena aquí que no hace nada. Entonces, ¿por qué? Porque simplemente le dijimos que fuera una cadena. Así que intentemos, ¿cómo podríamos hacer esto? Así que supongamos que cuando hay un evento que deseas tener, simplemente comienza con on, on input, on click o algo así. Así que intentemos, si la clave comienza con on, entonces hacemos una cosa y si no, hacemos esto. Muy bien, ya vemos aquí, eliminamos el on click, porque entramos aquí y aún no está haciendo nada. Pero necesitamos hacer algo como esto, element.addEventListener, será algo como click, y luego la función.

Lo que tenemos aquí es on click, y queremos que sea así. ¿Esto contrasta bien? ¿Puedes leerlo? Puedo leerlo. De acuerdo, así que necesitamos hacer una transformación de texto aquí. Así que simplemente decimos que event.name es la clave. Queremos borrar los dos primeros caracteres. Así que simplemente lo cortamos en dos y lo convertimos a minúsculas. Así que esto debería ser suficiente. Simplemente reemplazamos esto, ¿y qué va a haber ahí? Bueno, simplemente será una función.

Entonces podemos usar lo mismo aquí. Guárdalo. Oh, escuchador de eventos. De acuerdo, ahí vamos. Gracias, y hacemos clic, y funciona. Así que esto es genial.

El siguiente, tenemos que acelerar un poco. Así que aquí tenemos un objeto. ¿Por qué es un objeto? Veamos qué queremos aquí. En los ejemplos. Bueno, porque literalmente es un objeto. Es solo un nodo virtual.

De acuerdo, ¿qué necesitamos hacer aquí en este caso? Bueno, necesitamos renderizarlo nuevamente, así que necesitamos montarlo nuevamente. Esto va a ser algo recursivo. Entonces, lo que hicimos aquí es... Simplemente copiemos esto aquí abajo. Así que asumimos que es un texto, pero no siempre va a ser un texto. También puede ser el tipo... Veamos. Si el tipo de los hijos del vnode es una cadena, entonces hagamos una sesión de preguntas y respuestas. Terminaré este ejemplo, te mostraré el código del siguiente y luego... 10 minutos. 10 minutos. De acuerdo. De acuerdo. Tenemos un poco más de tiempo. Entonces, si, digamos, asumimos que es una cadena, simplemente agregamos la cadena. Si no, asumamos que es un objeto. Y luego montamos el objeto. Entonces, ¿qué quieres hacer? Montar el nodo virtual en el elemento.

¿Tiene sentido esto? No. Realicemos una sesión de preguntas y respuestas. Sí, montar, VNode, hijos. Gracias.

De acuerdo. Entonces funciona. Ahora se renderiza de esta manera. Teníamos 10 más. Sí, haré otro ejemplo y luego seré un poco más rápido. De acuerdo. El siguiente es como una lista de objetos. Básicamente, lo que hicimos aquí es simplemente un array en lugar de un objeto, y solo necesitamos renderizar cada elemento. Carguemos esto aquí. Podemos ver que no funciona, pero si asumimos aquí más, si es un array, vamos a probar si es un array. Array.isArray, V-node, hijos. De acuerdo. De acuerdo, entonces, oh, algo ya cambió. Esto es bueno. Luego iteramos sobre todos los elementos y los renderizamos individualmente. Básicamente, lo mismo que hicimos aquí, pero para todos ellos porque es un array. Entonces, solo V-node, hijos.forEach. ¿Qué tenemos allí? Un hijo, y luego montamos este hijo en el elemento. Y luego podemos ver nuevamente que funciona. De acuerdo.

Nos estamos quedando sin tiempo. Solo te mostraré cómo sería. Entonces tenemos el siguiente. El siguiente hubiera sido divertido. Tenemos perros, monos y cabras. Y queremos eliminar esto aquí.

Queremos desmontar los monos. Y creo que he resuelto... bueno, es algo extendido aquí, pero básicamente lo que haríamos es pedirle a los padres del elemento DOM actual que eliminen al hijo. Y luego se eliminaría este elemento que decimos que se elimine. Por cierto, voy a poner el repositorio de GitHub. Así que todos pueden echarle un vistazo en casa.

El siguiente sería ya el último. El siguiente sería cómo parchear una función. Así que no lo codificaré ahora, porque no tenemos tiempo, pero básicamente lo que estamos haciendo es esta es la función más complicada que tenemos en nuestro virtual DOM. Así que verificamos qué es diferente. ¿El número de elementos, es más corto, es más largo? El número de atributos, tenemos que ver si cambió un atributo, si el contenido simplemente cambió de un cierto elemento, y luego hay muchos if else, if else, if else, hasta que descubramos la forma más óptima de volver a renderizar este virtual DOM.

Lo siento por pasarme de tiempo, pero básicamente eso es todo. Viste la parte más importante, que es simplemente crear un nodo virtual y luego paso a paso agregarlo, editarlo, agregarlo al DOM actual. Así que con eso, simplemente, gracias. Aquí está el repositorio. Muchas gracias por esto, Mark. Me encantó la sesión. Mi nombre en realidad es People Call Me Dom, porque mi nombre es Domagoj, y soy un ingeniero frontend, así que probablemente esté destinado a ser un ingeniero frontend. Siéntete libre, toma asiento. Pasemos a nuestra sesión de preguntas y respuestas. La primera no es una pregunta, pero alguien ha llamado y quiere encender el aire acondicionado, pero probablemente queremos apagarlo. Apaguemos el aire acondicionado para que la gente no se congele. Ahora tengo una pregunta, y es, ¿por qué debería declarar el virtual DOM de esta manera, en lugar de usar componentes regulares de Vue? No entiendo realmente la pregunta, porque cuando tienes un componente regular de Vue, supongo que hablas sobre la plantilla, y la plantilla se compila en una función de renderizado, que luego es tu virtual DOM. Así que no entiendo realmente. Creo que querían preguntar por qué usarías estos enfoques en lugar de simplemente usar el enfoque regular de Vue. Oh, okay, entiendo. Entonces esta charla fue más para mostrar cómo funciona detrás de escena. No codificarías esto en tu proyecto. Esto es para mostrar cómo funciona el virtual DOM detrás de escena, para desmitificarlo. Así que no lo usarías en ningún lugar. Esto es solo para jugar y descubrir cómo funciona en realidad.

De acuerdo. Genial. Gracias. La siguiente pregunta es, bueno, probablemente recibiste un emoji por programar de por vida. Genial. La siguiente pregunta es, ¿qué te gustaría mejorar o cambiar en cómo funciona actualmente el virtual DOM? Esa es una excelente pregunta, a la cual no tengo respuesta. Quiero decir, lo encontré, quiero decir, investigué cómo funciona. Así que no lo inventé. Solo descubrí cómo funciona. Y para mí, es muy elegante. Así que no sabría qué cambiarle realmente. Porque no trabajas directamente con él como tal. Porque funciona detrás de escena de esta manera. Así que sí, bueno, tienes tu función de renderizado. Una cosa que sé que se actualizó, o que cambió de Vue 2 a Vue 3, es simplemente que la jerarquía de estos nodos del virtual DOM es más plana y más fácil de navegar. Así que esa es una mejora que hicieron de Vue 2 a Vue 3. Pero lo que cambiaría ahora no tengo idea.

Sí, es realmente genial. Recuerdo cuando escuché por primera vez sobre el Virtual DOM, eso fue hace muchos años con React. Y sí, fue como magia. No necesitas hacer ninguna optimización. Tienes el Virtual DOM y todo funciona. Sí. Simplemente funciona, ¿verdad? Sí, simplemente funciona.

Pero tenemos otra pregunta interesante sobre si VaporMode eliminará el Virtual DOM. ¿Qué piensas al respecto? Quiero decir, las razones por las que tenemos un Virtual DOM, no sé si tal vez estos casos de uso ya no están presentes. Tal vez no es algo que los desarrolladores quieran hacer más o que queramos promover más. Entonces, en este caso, no habría un Virtual DOM, sino una manipulación directa del DOM. Esto en realidad lo haría más eficiente. Pero sí, me hubiera encantado verlo. Porque para mí, es como agregar algo encima de eso, que luego sería eliminado. Sí, no estoy seguro si tienen alguna nueva implementación porque no conocen los VaporModes. Pero sí, el Virtual DOM es una optimización de rendimiento y siempre tienen un costo adicional. Probablemente encontraron una mejor manera de hacerlo. Pero, sí, bueno, necesitamos investigar sobre los VaporModes. Quiero decir, cuando Evan habló en la mañana sobre, oh sí, el Virtual DOM es problemático, y yo pensé, oh hombre, estás pisando mi charla. Bueno, eso es otro bien hecho para la codificación en vivo. Gracias. Muy valiente.

Y hagamos una pregunta final. ¿Qué tan cerca está esto de cómo funciona el Virtual DOM de Vue? Bueno, creo que es bastante similar, quiero decir, el código es más legible, porque lo hice para entenderlo. Pero muchas de estas partes funcionan de esta manera, como iterar sobre las props. No estoy 100% seguro de si eso es cómo lo hacen. Creo que sí. Creo que lo vi en algún lugar. Y luego la función de parche que ni siquiera tocamos, eso hubiera sido, como, la mayor desviación de cómo realmente funciona, porque la función en realidad es, como, tan grande, y la mía hubiera sido, como, cinco líneas de código. Sí, pero corrígeme si me equivoco, pero, como, el Virtual DOM para Vue 3 está disponible en GitHub. Sí. Sí, sí. Así que, sí, siéntete libre de investigar más y ver cómo funciona. Pero, sí, eso fue todo. Hay muchas otras preguntas, así que siéntete libre de unirte a Mark arriba en el rincón de los oradores. Y Mark, muchas gracias por estas maravillosas presentaciones. Hagan ruido por Mark. Gracias.