Worldlex Wiki Un DOM virtuel est une représentation JavaScript légère du modèle objet de document (DOM), utilisée dans les frameworks web déclaratifs tels que React , Vue.js et Elm . La génération d'un DOM virtuel étant relativement rapide, n'importe quel framework peut le redessiner autant de fois que nécessaire à moindre coût. Le framework peut ensuite identifier les différences entre le DOM virtuel précédent et le DOM actuel (comparaison) et n'apporter que les modifications nécessaires au DOM réel (réconciliation). Bien que techniquement plus lent que l'utilisation de JavaScript pur, ce modèle simplifie considérablement le développement de sites web riches en contenu dynamique, car le balisage est directement lié à l'état.
Des techniques similaires incluent Glimmer d' Ember.js et le DOM incrémental d' Angular .
Histoire
L' API DOM de JavaScript a toujours été incohérente d'un navigateur à l'autre, complexe à utiliser et difficile à adapter aux grands projets. Bien que des bibliothèques comme jQuery visaient à améliorer la cohérence et l'ergonomie des interactions avec le HTML , elles souffraient elles aussi de code répétitif qui ne décrivait pas clairement la nature des modifications apportées et découplait la logique du balisage.
La sortie d' AngularJS en 2010 a marqué un tournant majeur dans l'interaction entre JavaScript et HTML grâce au concept de React a été la première bibliothèque majeure à adopter un DOM virtuel en 2013, ce qui a permis de supprimer à la fois les goulots d'étranglement en termes de performance (puisque la comparaison et la réconciliation du DOM étaient relativement peu coûteuses) et la difficulté de lier les données (puisque les composants étaient en réalité de simples objets). Parmi les autres avantages d'un DOM virtuel, on peut citer une sécurité améliorée, les attaques XSS étant pratiquement impossibles, et une meilleure extensibilité , l'état d'un composant étant entièrement encapsulé. Sa sortie a également coïncidé avec l'avènement de JSX , qui a encore davantage couplé HTML et JavaScript grâce à une extension de syntaxe de type XML.
Suite au succès de React, de nombreux autres frameworks web ont copié l'idée générale d'une représentation DOM idéale en mémoire, comme Vue.js en 2014, qui utilisait un compilateur de modèles au lieu de JSX et disposait d'une réactivité fine intégrée au framework.
Récemment, le DOM virtuel a été critiqué pour sa lenteur, due au temps supplémentaire requis pour comparer et réconcilier les nœuds DOM. Ceci a conduit au développement de frameworks sans DOM virtuel, tels que Svelte , et de frameworks qui modifient le DOM directement, tels qu'Angular 2 .
Mises en œuvre
Réagir
React a été pionnier dans l'utilisation d'un DOM virtuel pour créer des composants de manière déclarative. Les nœuds du DOM virtuel sont construits à l'aide de la createElement()fonction `construct`, mais sont souvent transpilés depuis JSX afin de rendre l'écriture des composants plus ergonomique. Dans React basé sur les classes, les nœuds du DOM virtuel sont renvoyés par la render()fonction `construct`, tandis que dans les composants fonctionnels basés sur des hooks, la valeur de retour de la fonction elle-même sert de balisage de la page.
Vue.js
Vue.js utilise un DOM virtuel pour gérer les changements d'état, mais on n'interagit généralement pas directement avec lui ; un compilateur est utilisé pour transformer les modèles HTML en nœuds du DOM virtuel, ce qui constitue un détail d'implémentation. Bien que Vue prenne en charge l'écriture de JSX et de fonctions de rendu personnalisées, il est plus courant d'utiliser le compilateur de modèles, car cela évite une étape de compilation.
Svelte
Svelte ne possède pas de DOM virtuel, son créateur Rich Harris qualifiant ce dernier de « surcharge inutile » . Au lieu de comparer et de réconcilier les nœuds DOM à l’exécution, Svelte utilise la réactivité à la compilation pour analyser le balisage et générer du code JavaScript qui manipule directement le DOM, ce qui améliore considérablement les performances