Qu'est-ce que vdom ?

Le VDOM (Virtual DOM) est un concept utilisé dans le développement d'applications web pour optimiser les performances et améliorer l'expérience utilisateur. Il a été popularisé par des bibliothèques JavaScript telles que React.

Le VDOM est une représentation virtuelle de l'arborescence des éléments DOM (Document Object Model) d'une application. Plutôt que de mettre à jour directement les éléments réels sur la page, le VDOM permet de stocker les modifications dans une structure de données légère et ensuite de mettre à jour seulement les parties de l'arborescence nécessaires.

Le fonctionnement du VDOM repose sur trois étapes :

1. Initialisation du VDOM : Au démarrage de l'application, le VDOM est créé en copiant initialement la structure DOM existante. Cette copie est appelée Virtual DOM.

2. Mise à jour du VDOM : Lorsqu'une modification est effectuée dans l'application, le VDOM est mis à jour en modifiant uniquement les parties nécessaires. Cette mise à jour ne manipule que des objets JavaScript légers, ce qui rend l'opération plus rapide et moins coûteuse en ressources.

3. Diffusion des modifications vers le DOM réel : Après avoir mis à jour le VDOM, une étape de comparaison est effectuée entre le VDOM modifié et le VDOM précédent. Cette comparaison permet de déterminer les éléments qui ont changé et les mettre à jour uniquement sur le DOM réel. Cette étape permet d'éviter des opérations coûteuses sur l'ensemble du DOM.

Grâce au VDOM, les mises à jour de l'interface utilisateur deviennent plus efficaces, ce qui améliore les performances de l'application. De plus, le VDOM permet également de simplifier la gestion des états et de rendre le code plus maintenable.

En résumé, le VDOM est une technique qui permet de manipuler une représentation virtuelle légère de l'arborescence DOM d'une application web, en mettant à jour uniquement les parties nécessaires pour améliorer les performances et l'expérience utilisateur.