📱Pourquoi React est si rapide ?

De nos jours, les utilisateurs s’attendent à des applications Web performantes et performantes qui se comportent de plus en plus comme des applications natives.

Des techniques ont été conçues pour diminuer le temps d’attente lorsqu’un site Web est téléchargé lors de la première visite de l’utilisateur. Cependant, dans les applications Web qui exposent beaucoup d’interactivité, le temps écoulé entre une action de l’utilisateur et la réponse de l’application est également important. Les applications natives sont très réactives, et les applications Web devraient se comporter de la même manière, même avec des connexions Internet moins qu’idéales.

Un certain nombre de Frameworks JavaScript moderne ont vu le jour, ce qui peut être très efficace pour résoudre ce problème. React JS peut être considéré parmi les libraires JavaScript les plus populaires et robustes que vous pouvez utiliser pour créer des interfaces utilisateur interactives rapides pour les applications Web.

C’est un projet open source qui, à ce jour, attise plus de 68 000 étoiles sur GitHub.

Le DOM virtuel est au coeur de ce qui rend React rapidement pour rendre les éléments de l’interface utilisateur et leurs modifications. Regardons de plus près son mécanisme.

Chaque fois que vous souhaitez modifier une partie d’une page Web, vous devez modifier le DOM. En fonction de la complexité et de la taille du document, le déplacement du DOM et la mise à jour peuvent prendre plus de temps que les utilisateurs peuvent être prêts à accepter. En fait, chaque fois que le DOM est mis à jour, les navigateurs doivent recalculer le CSS et effectuer des opérations de mises en page et de repeintes sur la page Web.

React JS permet aux développeurs d’apporter des modifications à la page Web sans avoir à traiter directement avec le DOM. Cela se fait via Virtual DOM.

Chaque fois qu’il y a des modifications aux données sous-jacentes dans une application React, React crée une nouvelle représentation DOM virtuelle de l’interface utilisateur.

En ce qui concerne la mise à jour du DOM du navigateur, réagir suit approximativement les étapes ci-dessous:

On pourrait penser qu’un tel processus, qui consiste à conserver deux représentations du DOM virtuel en mémoire et à les comparer, pourrait être plus lent que traiter directement le DOM actuel. C’est là que les algorithmes de diff efficace, les opérations de lecture / écriture de DOS par lots et la limitation des modifications de DOM au minimum nécessaire, font de React JS et de son DOM virtuel un excellent choix pour créer des applications performantes.

Comme le nom lui-même le suggère, React est idéal pour créer des interfaces utilisateur super réactives, c’est-à-dire des IU qui sont très rapides pour répondre aux événements et les changements de données conséquents. Ce commentaire sur le nom React réalisé par Jordan Walke, ingénieur chez Facebook, est éclairant :

Bien que certains soutiendront que tous les projets ont besoin de React JS, je pense qu’il est incontestable de dire que React serait très adapté aux applications Web où vous devez conserver une interface utilisateur interactive complexe et synchronisée avec des changements fréquents dans le modèle de données sous-jacent.

React JS est conçu pour traiter les énormes composants d’une manière efficace (ce qui ne signifie pas que les développeurs n’ont pas besoin d’optimiser leur code), donc les projets qui bénéficieront de cette capacité peuvent être considérés comme de bons candidats pour React.

Si vous êtes curieux de savoir comment React JS et son DOM virtuel fonctionnent, voici où vous pouvez en apprendre plus :

React JS et d’autres librairies JavaScript similaires facilitent le développement d’interfaces utilisateur simples et événementielles qui répondent rapidement aux changements d’état. Un but sous-jacent peut être identifié dans la volonté de combler le fossé entre les applications Web et les applications natives : les utilisateurs s’attendent à ce que les applications Web agissent comme des applications natives.

C’est la direction vers laquelle se dirige le développement web moderne. Ce n’est pas par hasard que la dernière mise à jour de Create React App, un projet qui rend possible la création d’applications React JS avec configuration zéro, est livrée avec la fonctionnalité de création d’applications Web progressives (PWA) par défaut. Ce sont des applications qui tirent parti de la première mise en cache hors ligne pour minimiser la latence et rendre les applications Web en mode hors connexion.

Est-ce également la direction que vous faites de votre travail de développement ? Les librairies JavaScript réactives font-elles partie de votre boîte à outils ?