Construyendo el VDOM de Vue 3 en el Escenario

Rate this content
Bookmark

Esta charla está diseñada para mostrar a las personas qué es un virtual DOM y para qué se utiliza. Veremos un poco de teoría al respecto y luego construiremos una versión simplificada del VDOM de Vue 3 en el escenario desde cero, paso a paso. ¡Después de la charla, las personas tendrán más familiaridad con la caja negra que a veces es el "VDOM".

31 min
15 May, 2023

Video Summary and Transcription

Hoy construiremos un virtual DOM, que es una interfaz de programación para documentos HTML y XML. El virtual DOM desacopla la lógica de renderizado del DOM real, lo que facilita su manipulación e inspección. Crearemos nuestro propio virtual DOM implementando funciones para crear, montar, desmontar y parchear nodos virtuales. También exploraremos el manejo de eventos, la renderización de listas de objetos y el desmontaje de nodos. El virtual DOM en Vue 3 tiene una jerarquía más plana y puede ser reemplazado por la manipulación directa del DOM para obtener un mejor rendimiento.

Available in English

1. Introducción al Virtual DOM

Short description:

Hoy vamos a construir un Virtual DOM. El Virtual DOM es una interfaz de programación para documentos HTML y XML. Representa un documento como un árbol, con nodos e hijos. Se puede acceder y manipular a través de JavaScript. Vamos a basarnos en el DOM del sitio web oficial de Vue.js.

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.

2. Comprendiendo el Virtual DOM

Short description:

El Virtual DOM es una representación virtual del DOM real. Desacopla la lógica de renderizado del DOM real, lo que facilita su manipulación e inspección. Se puede utilizar fuera del navegador, como en aplicaciones móviles nativas o renderizadores WebGL. En el Virtual DOM, las etiquetas se representan como nodos, los atributos como propiedades y el contenido como hijos. La función H en JavaScript se puede utilizar para crear nodos con diversas estructuras.

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.

3. Construyendo un Virtual DOM

Short description:

Para construir nuestro propio Virtual DOM, necesitamos una función para crear nodos virtuales, una forma de montarlos en el DOM y una función de parche para actualizar el DOM cuando sea necesario.

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.

4. Creando el Virtual DOM

Short description:

Es hora de codificación en vivo. Te mostraré mi configuración. Tenemos un archivo HTML con código base. Importamos Tailwind para el estilo. Tenemos un contenedor de la aplicación donde montaremos nuestro DOM. Importamos la función hFunction y la función mount. Crearemos el VDOM desde cero. Tenemos ejemplos para guiarnos. Comencemos creando nuestro virtual DOM.

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.

5. Implementando el Virtual DOM

Short description:

Y este es un nuevo nodo virtual, una etiqueta H1 sin propiedades y el contenido 'hello world'. Implementaremos la función H, la función mount, la función unmount y la función patch. La función H crea un nodo virtual con una etiqueta, propiedades e hijos. La función mount monta un nodo virtual en el DOM real. La función unmount elimina un nodo virtual. La función patch compara y actualiza nodos virtuales. La función H crea un objeto que representa un nodo virtual. Agregaremos un enlace al elemento DOM real más adelante.

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.

6. Montando el Virtual DOM

Short description:

Creamos un elemento usando document.createElement y establecemos su etiqueta en vnode.tag. Luego, montamos el elemento en el contenedor usando appendChild. Agregamos el contenido de texto al elemento usando element.textContent. Finalmente, importamos ejemplos desde nuestros archivos y aplicamos propiedades al elemento usando element.setAttribute.

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.

7. Implementando Manejo de Eventos

Short description:

Iteramos sobre las props y las aplicamos al vnode. Inspeccionamos el segundo ejemplo, un botón, y encontramos que la función de clic no está funcionando. Determinamos que la clave debe comenzar con 'on' para el manejo de eventos. Quitamos el 'on' de la clave y lo convertimos a minúsculas. Finalmente, reemplazamos la cadena con una función.

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.

8. Montando Nodos Virtuales

Short description:

Podemos reutilizar lo mismo aquí y funciona. A continuación, tenemos un objeto, que es simplemente un nodo virtual. Necesitamos renderizarlo nuevamente montándolo de forma recursiva. Si los hijos del vnode son una cadena, la agregamos como una cadena. De lo contrario, asumimos que es un objeto y lo montamos en el elemento.

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.

9. Renderizando una Lista de Objetos

Short description:

Teníamos 10 más. El siguiente es como una lista de objetos. Iteramos sobre todos los elementos y los renderizamos individualmente. Nos estamos quedando sin tiempo. El siguiente hubiera sido divertido. Tenemos perros, monos y cabras.

¿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í.

QnA

Desmontando Monos y Funciones de Parcheo

Short description:

Queremos desmontar los monos. Le pedimos a los padres del elemento DOM actual que eliminen al hijo. A continuación, discutiremos la función de parcheo, la función más complicada en el virtual DOM. Verificamos las diferencias en los elementos, atributos y contenido. Gracias por asistir. Pasemos a nuestra sesión de preguntas y respuestas.

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.

Mejoras y Cambios en el Virtual DOM

Short description:

El virtual DOM es muy elegante y funciona detrás de escena. La jerarquía de nodos del virtual DOM en Vue 3 es más plana y más fácil de navegar.

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.

Virtual DOM y Vue 3

Short description:

El Virtual DOM es una optimización de rendimiento que tiene un costo adicional. VaporModes puede eliminar el Virtual DOM y utilizar la manipulación directa del DOM para obtener un mejor rendimiento. El código presentado es similar a cómo funciona el Virtual DOM de Vue, con algunas desviaciones menores. El Virtual DOM de Vue 3 está disponible en GitHub para una investigación más detallada.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.