El DOM o Document Object Model es el árbol de nodos que generan los navegadores para entender nuestro código HTML. Y el Virtual DOM es un falso DOM, una copia que nos permite hacer cálculos pesados sin afectar el rendimiento del verdadero DOM.
JavaScript puede manipular el DOM para interactuar con los usuarios de nuestra página web. Usar el Virtual DOM podría reducir el trabajo del DOM y mejorar su rendimiento, pero también podría ser un paso innecesario que solo consume tiempo y memoria RAM. Ahí la discusión.
En este blogspot quiero mostrarte diferentes argumentos alrededor de usar o no el Virtual DOM para manipular el DOM con JavaScript.
Los navegadores nos proporcionan diferentes APIs para manipular el DOM con JavaScript.
Algunas APIs como document.getElementByID o document.querySelector nos permiten leer el contenido de nuestro documento HTML, incluso valores escritos por cada usuario. Otras funciones como innerHTML o appendChild nos permiten cambiar el HTML que ven nuestros usuarios.
Pero el secreto de la manipulación del DOM son los eventos. Escuchar las acciones de los usuarios desde JavaScript y dependiendo de lo que hagan ejecutar nuestro código (leer y/o actualizar el documento HTML).
El Virtual DOM es una representación del DOM.
Actualizar el DOM es una operación muy costosa para el navegador. Muchas veces no necesitamos actualizar absolutamente todas nuestra aplicación, sino únicamente secciones específicas del contenido.
Pero hacer estos cálculos también es costoso para el navegador. Leer el DOM y hacer comparaciones para analizar qué debe actualizarse y qué no también puede consumir bastante tiempo.
El virtual DOM es una representación del DOM en la memoria del navegador, un intermediario entre el DOM y nosotros para hacer comparaciones sin afectar al DOM real de la aplicación. Así cuando interactuamos con el verdadero DOM le pedimos únicamente los cambios que realmente necesitamos, nada más.
Pero no todo es color de rosas. ⚠️
Muchas personas y herramientas importantes de JavaScript consideran que el virtual dom es un paso innecesario al renderizar aplicaciones. Explican que manipular el DOM, así sea costoso, no afecta tan exagerada y drásticamente el rendimiento de las aplicaciones web. Por lo que solo agrega complejidad, redundancia y gasto sin sentido de la memoria.
Los frameworks y librerías más importantes de JavaScript tienen opiniones muy fuertes entre manipular directamente el DOM o usar como intermediario al Virtual DOM.
React.js y Vue.js apostaron por el Virtual DOM. Confían en que crear una copia del DOM para hacer sus cálculos y procesos de optimización les ayudará a ofrecer un mejor rendimiento para nuestras aplicaciones.
Pero Angular y Svelte apuestan por manipular el DOM directamente. Se oponen a crear y mantener copias completas del DOM. Incluso prefieren optar por estrategias como crear un “mini virtual dom” para cada componente en específico que deban renderizar.
Pero, Juan, no entendí. ¿Entonces uso o no uso el Virtual DOM?
Todas las herramientas se esforzarán por ofrecer el mejor rendimiento con su estrategia de render preferida, pero los resultados cambiarán con cada distinto caso de uso, actualización de versiones o nuevas características a soportar.
El veredicto final es que no hay una respuesta definitiva. Usar o no el Virtual DOM depende completamente de tu proyecto, las herramientas con las que decidas construirlo y el rendimiento que te ofrezcan para cada caso en particular.
Mi recomendación es que estudies constantemente las mejores prácticas de optimización para tu aplicación web, ya sea aplicando diferentes paradigmas en tu código o mejorando la configuración de tus empaquetadores web.
Si quieres conocer mucho más sobre la reactividad y las estrategias de render de los frameworks o librerías más populares de JavaScript, te recomiendo tomar el Curso de Frameworks y Librerías de JavaScript y profundizar en el ecosistema completo del desarrollo frontend moderno.
#NuncaParesDeAprender 🤓💚
Like si pensaste en Doom Eternal
laik
Fan de Juandc. Gracias por compartir tu pasión con todos!
Muy buen post, gracias! 😉
Excelente post, prontito estare sacando los respectivos cursos 😃
Hoy por hoy la respuesta es usar el que mejor experiencia brinde, a usuarios y clientes!
En cuanto a React se refiere podemos aprender métodos que quiten carga y peso a nuestras aplicaciones, podemos mejorar el performance de diversas maneras.
“Quiero ser como tu cuando sea grande”. Gracias Juan!
Buen post acerca del Dom y el virtual Dom!
Gracias por el aporte estoy haciendo el curso de manipulación del DOM
Super buen post!
Gracias por aclararmelo bro 😄
Yo lo que considero es que para que la aplicación puede ser mas efectiva el dejar una parte para que cargue mas fácil el DOM como esta, y en parte tener el DOM falso para hacer cosas mas importantes. Aunque si tengo que repasar lo de DOM porque ya ni me acordaba de el. XD