DOM + Frameworks = VDOM (Virtual DOM)
El Virtual DOM (VDOM) és un concepte de programació utilitzat per frameworks de JavaScript moderns com React, Vue.js i Svelte per millorar el rendiment i l'eficiència de les actualitzacions del DOM (Document Object Model) real.
Què és i com funciona el VDOM?
El VDOM és essencialment una còpia abstracta i lleugera de l'estructura del DOM real, emmagatzemada en la memòria del navegador. No és el DOM real, sinó un objecte JavaScript que representa el DOM. El procés d'actualització mitjançant el VDOM segueix tres passos fonamentals:
1. Creació i renderitzat inicial
Quan es carrega l'aplicació per primera vegada, el framework construeix l'arbre del VDOM basant-se en els components de la interfície d'usuari (UI). Aquest VDOM es sincronitza immediatament amb el DOM real per mostrar la UI.
2. Actualització de l'estat i re-renderitzat del VDOM
Quan l'estat de l'aplicació canvia (p. ex., l'usuari fa clic a un botó, o arriba una nova dada del servidor), el framework no actualitza el DOM real directament. En lloc d'això, crea un nou arbre VDOM que reflecteix l'estat actualitzat.
3. El procés de diffing i patching (Detecció de diferències)
Aquesta és la part més important:
-
Algoritme de Diffing: El framework compara l'arbre VDOM nou amb l'arbre VDOM antic. Aquesta comparació és molt ràpida perquè es fa amb objectes JavaScript a la memòria (no amb el DOM lent).
-
Càlcul de Patch: El resultat d'aquesta comparació és un llistat mínim dels canvis exactes (el patch) que s'han de fer. Per exemple, si només ha canviat el text d'un
<p>dins d'un<div>gran, el patch només inclourà l'actualització d'aquest text. -
Actualització del DOM Real: Finalment, el framework aplica aquest petit patch de canvis directament al DOM real.
Avantatges del virtual DOM
L'ús d'aquesta capa d'abstracció proporciona beneficis significatius:
-
Rendiment millorat: La manipulació del DOM real és l'operació més lenta en una aplicació web. El VDOM minimitza el nombre de vegades que s'ha de tocar el DOM real, garantint que només es fan les operacions estrictament necessàries.
-
Simplicitat per al desenvolupador: El desenvolupador ja no ha de preocupar-se per manipular manualment el DOM (
getElementById,appendChild, etc.). Simplement ha de declarar com ha de ser la UI en funció de l'estat, i el framework s'encarrega d'aplicar els canvis de manera eficient. -
Desenvolupament isomòrfic (SSR): Permet que el mateix codi de la UI s'executi en entorns diferents, com el servidor (Node.js) per generar HTML inicial (Server-Side Rendering), ja que el VDOM és una representació abstracta.
El Virtual DOM actua com un mediador intel·ligent entre l'estat de la vostra aplicació i l'arbre del DOM real, optimitzant les actualitzacions per oferir una experiència d'usuari més fluida i ràpida.