• Arnaud Mauduit

REACT et Virtual DOM, une nouvelle manière de déplacer l'application


React est un framework front-end (dans le navigateur) que l’on peut aussi considérer comme une bibliothèque JavaScript.


Il a été déployé par Facebook en 2013 pour répondre à un problème récurrent : créer des interfaces réutilisables et stateful.


Comment fonctionne React ?

La fonctionnalité principale de React est de créer des “composants”, ses composants correspondants à des éléments visibles et manipulables de votre page HTML.


Par exemple, un formulaire de contact peut être un composant React qui est en attente dans votre navigateur et qui est activé à la demande par la page en cours.


L’intérêt d’avoir un composant est de pouvoir garder la possibilité de le mettre à jour sans devoir toucher à d’autres éléments de notre application WEB.


Ce Framework utilise le langage JSX (JavaScript + XML), cela nous permet de gérer le rendu de notre composant en y injectant directement le HTML que nous voulons faire apparaitre et les données nécessaires à l’affichage.


Le Virtual DOM c’est quoi ?


Tout d’abord, l’utilité du Virtual DOM dans notre Framework React est de rafraichir uniquement les composants qui ont été modifiés et non pas toute la page.


Au départ il n’y avait pas énormément de contenu dans nos pages HTML, mettre à jour les éléments de nos pages était relativement simple mais plus le contenu de nos pages augmentait, plus il devennait important de sélectionner avec exactitude des éléments spécifiques à mettre à jour.


Le virtual DOM répond à ce problème, c’est une nouvelle façon de communiquer avec le DOM.


Il peut être considéré comme une copie du DOM original mais, cette copie peut être manipulée et mis à jour comme bon nous semble sans utiliser les API DOM.


Lorsque les changements sont effectués sur cette copie, une comparaison entre le DOM original et le Virtual DOM est effectuée pour ne prendre en compte que les différences et les mettre à jour de manière optimisée et ciblée.


Le Virtual DOM permet donc d’éviter les modifications inutiles du DOM, qui sont coûteuses du point de vue des performances, car les modifications apportées au DOM entraînent généralement un nouveau rendu de la page.


Différence entre le Virtual DOM et le Shadow DOM


Le Virtual DOM est souvent confondu avec le Shadow DOM, il est donc important de bien spécifier leur différence.


Le Shadow DOM fonctionne sur le principe de l’encapsulation de l’implémentation, un seul élément personnalisé peut implémenter une logique plus ou moins complexe combinée avec un DOM lui aussi plus ou moins complexe.


Les problématiques rencontrées


Si les performances et le confort du coté utilisateurs sont amélioré, l’usage de code permettant de compter et analyser l’expérience utilisateur devient plus complexe. En effet les outils de User Expérience déposent un .JS dans le navigateur et ce dernier fait mal la différence entre le DOM et le Virtual DOM. Les éditeurs de ce type de monitoring nécessitent une certaine amélioration de leurs sondes pour cela.

34 vues

Posts récents

Voir tout