Chronologie React.js

Dans cet article, nous couvrirons l'évolution de React.js depuis sa création jusqu'à la sortie de différentes versions à ce jour, y compris ce qui est attendu dans React 18.

Avant que les bibliothèques et les frameworks de JavaScript ne deviennent populaires, les développeurs Web avaient faire les choses manuellement (ajouter des watchers pour chaque élément DOM et les lier à l'aide de JavaScript ou jQuery). Lorsque les données d'état changent ou sont mises à jour, ces observateurs rechargent l'intégralité du DOM et le mettent à jour. Ensuite, les navigateurs ont dû recalculer les positions de tout. C'était suffisant pour créer des applications non interactives.

Cependant, dans les applications Web avec des milliers d'interactions simultanées, la manipulation du DOM était coûteuse car de nombreux observateurs déclenchaient des mises à jour simultanément. Les navigateurs avaient également beaucoup de recalculs et d'impressions alignés, ce qui a conduit à une mise en page et ralenti le temps de chargement et les performances de l'application.

Dans cet article, nous nous concentrerons sur la façon dont l'introduction et l'évolution de React.js au fil du temps résout ces problèmes. problèmes et offre aux développeurs frontaux la possibilité et la simplicité de créer des interfaces conviviales. Il suit l'approche basée sur les composants et est utilisé pour gérer la couche de vue pour les applications Web et mobiles. . En interne, React crée un DOM virtuel (l'une des prétentions de React à la gloire) représentant une interface utilisateur stockée en mémoire et la compare à un instantané DOM virtuel pris lorsqu'un événement se produit (l'utilisateur clique sur un bouton). À l'aide d'un processus appelé diffing, React détermine quels objets DOM virtuels ont changé et quelles parties du DOM réel doivent changer en comparant le DOM virtuel actuel avec une version précédente (l'instantané DOM virtuel). Le DOM virtuel actuel est ensuite utilisé pour comparer et mettre à jour le DOM affiché par le navigateur (le « vrai » DOM).

Le fait que la comparaison se fasse sur le DOM virtuel et non sur le DOM réel est une grande abstraction qui rend React très rapide car les navigateurs n'ont pas à repeindre les objets DOM lorsqu'il n'y a aucune exigence de mise à jour.

Une autre fonctionnalité fantastique de React est la possibilité d'écrire JSX dans React. JSX (JavaScript Syntax Extension) est un bon moyen d'écrire des objets JavaScript simples décrivant les éléments React qui composent votre application. C'est une extension de type XML qui nous permet d'écrire du JavaScript qui ressemble à du balisage et de le renvoyer à partir d'un composant. JSX combine la beauté du HTML et la puissance de JavaScript. Pour en savoir plus sur ce qui se passe dans les coulisses lorsque vous écrivez JSX dans React, consultez ce post.

La conception de React

Cela a commencé avec un problème. En résumé, le problème a commencé en 2011 lorsque les développeurs de Facebook ont ​​commencé à rencontrer différents problèmes de maintenance du code lorsqu'ils travaillaient sur l'application Facebook Ads. Plus de fonctionnalités ont été ajoutées au fur et à mesure de sa croissance, et l'équipe avait besoin de mains supplémentaires pour continuer à le développer. la base de code ou même pour dire quels changements étaient à l'origine des mises à jour en cascade. Cela les a considérablement ralentis en tant qu'entreprise. Ils avaient besoin d'un moyen de résoudre leurs problèmes d'expérience utilisateur et à quel point c'était mauvais pour les performances.

Avant cela, les ingénieurs de Facebook avaient développé XHP – leur propre version de PHP – et l'avaient publié en tant que logiciel open source en 2010. XHP permis la création de composants composites. Il a été utilisé pour faciliter le développement frontal et sa protection XXS a également aidé à empêcher les scripts intersites (XSS).

Malheureusement, XHP a rencontré des problèmes, principalement lors de la création d'applications Web dynamiques, entraînant une expérience utilisateur et des performances médiocres. Cela provoquait le rendu de l'ensemble de l'application Web chaque fois qu'un changement d'état se produisait, ce qui entraînait finalement la perte de toutes les informations utilisateur précédemment enregistrées dans le DOM.

En 2011, Jordan Walkequi était un ingénieur chez Facebook, a créé FaxJS dans le but de proposer un prototype qui résoudrait le problème qu'ils rencontraient à l'époque. L'équipe a adoré travailler avec, et il s'est avéré être le premier prototype de React. Après quelques mois, l'équipe de Facebook a construit les fonctionnalités like et comment avec une version entièrement alimentée par React et Flux.

Facebook a acheté Instagram en 2012. Ils avaient de nombreux produits sur lesquels ils voulaient travailler, mais le site Web d'Instagram était en tête de liste. Ils ont examiné la pile de Facebook et ont décidé d'adopter la nouvelle technologie de Facebook (React) pour créer le site Web d'Instagram. C'était un problème car React était étroitement intégré à la pile logicielle de Facebook. Pete Hunt les a convaincus à l'époque que séparer React de Facebook serait bénéfique, et il a fait la plupart du travail nécessaire pour le découpler, ce qui a permis à React de devenir un logiciel open source.

The Grand Debut[19659011] Lors de la JSConf 2013, Jordan Walke a annoncé React comme un projet open source. Dans ses mots, "L'une des choses pour lesquelles nous nous sommes efforcés lors de la construction de notre framework de composants est que nous voulons minimiser le nombre de développeurs confrontés à des mutations auxquelles les développeurs sont exposés." Les premières impressions étaient assez sceptiques. Les gens pensaient que React représentait un recul important en termes de maintenabilité du code, car HTML était intégré à JavaScript. et aidez-les à comprendre que React est fait pour les innovateurs. Pendant ce temps, React Developer Tools est également devenu une extension des outils de développement Chrome. La même année, React Hot Loaderun plugin qui permet aux composants React d'être rechargés en direct sans perte d'état, a été publié.

Au cours d'une conférence technique à la conférence React.js en janvier 2015, Facebook a annoncé la première version de React Native, permettant un développement facile avec le développement Android et iOS. classes, qui permettent aux développeurs d'avoir plus de flexibilité lors de l'écriture de composants. Dan Abramov et Andrew Clark ont publié Reduxet la première version stable de React Developer Tools a également été lancée.

React v0.14 a été publié en octobre 2015, et des changements importants sont intervenus avec cette version. Le package de réaction principal a été divisé en react et react-dom,ce qui a rendu possible l'écriture de composants partagés entre la version Web de React et React Native. En outre, refs ont été exposés aux composants DOM en tant que nœud DOM lui-même.

À cette époque, React commençait également à être largement accepté et était utilisé par certaines des entreprises les plus importantes au monde, comme Netflix et Airbnb.

En avril 2016, React est passé de la version 0.14.7 à une version stable majeure. version—React v15.0—démontrant un engagement envers la stabilité ainsi que la capacité d'introduire de nouvelles fonctionnalités rétrocompatibles dans les versions mineures et la progression continue de React. Certains des changements importants dans la version ont amélioré la façon dont nous interagissons avec le DOM :

• Utiliser document.createElement lors du montage de composants au lieu de définir innerHTML. Ils considéraient cela plus rapidement dans les navigateurs modernes, et cela corrigeait également certains cas extrêmes.
• Les composants fonctionnels pouvaient désormais renvoyer null.
• Meilleure prise en charge de SVG. La prise en charge de tous les attributs SVG reconnus par les navigateurs actuels a été ajoutée.

React v16.0 est sorti en septembre 2017 et comprenait plusieurs modifications et nouvelles fonctionnalités, dont certaines :

• Erreur améliorée gestion avec l'introduction des limites d'erreur, qui sont des composants React spéciaux qui fournissent un moyen propre de gérer les erreurs dans leurs composants enfants, de consigner ces erreurs et d'afficher une interface utilisateur de secours à leur place.
• Vous permettant de renvoyer plusieurs éléments à partir d'un composant. méthode de rendu, telle que les tableaux et les chaînes.
• Rendu côté serveur amélioré, qui serait à peu près trois fois plus rapide que React 15.

React v17.0 a été publié en Octobre 2020, après deux ans et demi depuis la précédente version majeure. Cette version visait principalement à simplifier la mise à jour de React à partir des versions précédentes, car elle n'incluait aucune nouvelle fonctionnalité destinée aux développeurs. Avant cette version, la mise à niveau d'une version antérieure de React vers une nouvelle nécessitait la mise à niveau de l'ensemble de votre application en une seule fois. Avec React 17, vous avez la possibilité de mettre à niveau l'intégralité de votre application à la fois ou de mettre à niveau votre application pièce par pièce comme bon vous semble. intentions pour React 18, qui devrait être leur prochaine version majeure. Selon eux, les mises à jour de React 18 sont principalement destinées aux mainteneurs de bibliothèques tierces. Ils ont également publié React 18 Alpha afin que les auteurs de bibliothèques puissent l'essayer et fournir des commentaires. , posez des questions et collaborez à la sortie pour préparer la communauté à l'adoption progressive de ces nouvelles fonctionnalités. Cependant, la discussion du groupe de travail est accessible au public si cela vous intéresse.

Conclusion

Depuis le début du développement de React, la bibliothèque a connu une croissance constante. par la sortie de différentes versions. React vise à simplifier au maximum la vie des entreprises et des développeurs qui l'utilisent. Vous pouvez trouver des informations sur toutes les différentes versions des versions de React ici. Pour plus d'informations sur la mise à niveau vers React 18 ou des ressources supplémentaires sur la version, consultez la documentation React.