Quel est le rôle du DOM virtuel dans les applications…

Le DOM virtuel (VDOM) est une conception de programmation dans laquelle la représentation virtuelle de l’interface utilisateur est stockée en mémoire et synchronisée avec le DOM "réel" à l’aide d’une bibliothèque comme React, Vue ou Preact.

Principales rôles du VDOM :

Optimisation des mises à jour. Au lieu de modifier directement le DOM réel à chaque changement d’état, le VDOM crée une copie légère en mémoire. Lorsqu’un changement d’état se produit, il compare le nouvel état avec l’état précédent, calcule le minimum de modifications nécessaires pour mettre à jour le DOM réel (processus appelé "diffing") et applique ces changements en lot (processus appelé "patching"). Cela est beaucoup plus rapide que de manipuler directement le DOM réel, car les opérations avec celui-ci sont plus coûteuses.
Portabilité. Le VDOM abstrait la logique de rendu de l’implémentation concrète du DOM. Cela permet d’utiliser les mêmes composants et la même logique pour le rendu sur différentes plateformes, telles que le web (en utilisant le DOM du navigateur), les applications mobiles (avec des composants UI natifs, par exemple, dans React Native) ou le serveur (pour le rendu côté serveur).
Simplification du développement. En travaillant avec le VDOM, le développeur n’a pas besoin de se soucier directement des opérations complexes et potentiellement lentes avec le DOM. Il décrit l’état souhaité de l’UI à l’aide d’une syntaxe déclarative (par exemple, JSX), et la bibliothèque VDOM se charge de mettre à jour efficacement le DOM réel.

Le processus de mise à jour avec le VDOM est généralement le suivant :

L’état de l’application change.
Un nouvel objet VDOM est créé, représentant le nouvel état de l’UI.
L’objet VDOM existant (représentant l’état actuel de l’UI) est comparé au nouveau VDOM (diffing).
La liste des changements (objet de patch) nécessaires pour transformer l’ancien VDOM en le nouveau est calculée.
Ces changements sont appliqués au DOM réel (patching).

Exemple (pseudo-code conceptuel) :

// Exemple d’arbre VDOM
const oldVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Bonjour'] }
  ]
};

// Nouveau état
const newVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Bonjour, le monde!'] }
  ]
};

// Diffing (comparaison de l’ancien et du nouveau VDOM pour trouver des changements)
const changes = diff(oldVDOM, newVDOM);
// changes peut ressembler à une liste d’instructions :
// [{ type: 'TEXT_UPDATE', target: 'p', value: 'Bonjour, le monde!' }]

// Patching (application des changements au DOM réel)
patch(realDOMElement, changes);

Malgré ses avantages, le VDOM n’est pas toujours une panacée et peut avoir une légère surcharge pour des applications très simples. Cependant, pour la majorité des applications modernes et interactives du frontend, il offre des performances importantes et une grande facilité pour le développeur.

Quel est le rôle du DOM virtuel dans les applications frontend modernes?