Rapide historique, React c’est quoi ?
React est une bibliothèque logicielle créée en 2011 par Jordan Walke, un ingénieur au sein de Facebook. Pete Hunt, ingénieur chez Instagram l’assiste afin de finaliser le projet.
En 2013, la première version est publiée sous licence libre. La dernière version (18.1.0) est sortie en avril 2022, au moment où nous écrivons ces lignes.
Cette bibliothèque populaire est très souvent utilisée pour réaliser des Single Page Application (application monopage en français).
Modernes et fluides, les SPA sont donc importantes pour avoir une application optimisée. Et cela tombe bien, c’est un des points forts de React !
Aujourd’hui, avec Angular et Vue, React est la solution la plus répandue.
Il est open source, c’est à dire que le code est publique et consultable par tous ! (À l’instar des 2 autres outils évoqués ci-dessus.)
Il est peu probable de voir disparaitre ces librairies prochainement. Facebook et Google les soutiennent ! 2 poids lourds de l’informatique, donc.
De ce fait, React est très populaire auprès de la communauté du développement informatique.
Et justement, quels sont les points forts de React ?
Mature comme un bon cheddar
Si Angular est le plus mature à n’en pas douter, React se défend lui aussi !
Comment ? Par le soutien de Facebook, maison-mère ô combien puissante, mais aussi car il est Open-Source, et un très grand nombre de contributions existent.
Il existe donc un nombre conséquent de bibliothèques logicielles rattachées à React qui facilitent grandement le travail d’un développeur. Bien sûr, s’il n’existe pas de bibliothèque spécifique à la fonctionnalité que vous souhaitez, il est possible de la créer !
DOM Virtuel, le grand + de React
Avant de présenter ce qu’est un DOM virtuel, présentons déjà ce qu’est un DOM tout court !
Acronyme de Document Objet Model, le DOM est une interface de programmation qui représente visuellement le code HTML derrière une page web (et permet de la modifier avec du JavaScript).
Concrètement, cela ressemble à une arborescence (voir ci-dessous) qui détaille le contenu de votre future page, et vous permet d’accéder aux divers éléments de celle-ci et de les modifier à votre convenance grâce à JavaScript. (Police, taille, style, etc.)
Lorsque vous chargez une page web, c’est cette arborescence qui permet de naviguer “physiquement” sur les différentes pages et d’accéder aux contenus.
Or, dès que vous changez de page au cours de votre navigation, c’est l’intégralité de l’arbre qui est “rechargée” une nouvelle fois pour afficher les éléments suivants.
Le DOM Virtuel est donc une manière de court-circuiter cette problématique en permettant de recharger seulement un élément précis de la page (celui que vous souhaitez consulter) sans pour autant charger l’intégralité de la page. Si ce changement peut paraître anodin sur le papier, il est à l’origine d’un gain de temps considérable pour l’usager final !
En cela React répond parfaitement aux attentes modernes du développement : rapidité et fiabilité !
Une portabilité mobile de qualité !
Si vous connaissez React.js, vous avez peut-être entendu parler de React Native ? Il s’agit en effet de la bibliothèque open source pour le développement d’applications mobiles crossplatform (Android et iOS).
Depuis la première version publiée en 2015, cette solution est conçue pour adapter les développements Javascript à une application Native. L’excellente communication entre les 2 applications permet d’adapter les langages sans traduction du web au mobile !
TypeScript et React, une belle bromance.
TypeScript est un langage de programmation Open Source de Microsoft, il s’agit d’une sur-couche de JavaScript dont l’objectif premier est d’améliorer et sécuriser la production du code.
Or, cela tombe bien, TypeScript et React s’entendent comme deux bons copains !
En appliquant un typage fort aux différentes variables, TypeScript facilite la lecture et la compréhension de votre code. Il permet également un typage encore plus prononcé grâce au TSX.
Autre bonne nouvelle ? Si certains développeurs expérimentés lisent ces lignes, peut-être se souviennent-ils du chemin de croix nécessaire pour rechercher la prise en charge de TypeScript pour les bibliothèques tierces ? Or avec sa popularité croissante, la plupart des bibliothèques sont maintenant prises en charge par défaut !
Nos équipes conseillent d’ailleurs fortement l’utilisation de TS avec React, car les gains en non-régression et corrections d’anomalies sont très importants.
Enfin, il offre un support optimal pour les JSX, grâce aux TSX ! (voir ci-dessous).
Quelques freins ?
Trop gros pour React ?
Si votre future application a l’ambition de gérer un volume de données conséquent ou bien d’avoir un nombre important de pages et d’informations, React ne sera peut-être pas la meilleure solution. Très performant, React est cependant un peu limitée au niveau de la mémoire, ce qui pourrait l’empêcher d’exécuter fluidement des programmes lourds. Le DOM virtuel, gros point fort de React, consomme une grande quantité de mémoire si votre projet est volumineux et peut donc perdre de son efficacité.
Attention, tout n’est pas aussi absolu. Si cette situation est vraie, il existe cependant des solutions pour optimiser les performances des applis métiers, comme le lazy loading et le server-side rendering. Un projet initialement développé en React et qui devient de plus en plus volumineux pourra continuer à opérer efficacement en React grâce à ces techniques.
SSR et lazy loading, cest quoi ?
Ces termes désignent 2 manières d’améliorer les performances d’un site internet ou d’une application métier. Le lazy loading est une technique qui consiste à ne charger que les éléments qui apparaissent visuellement sur l’écran de l’utilisateur. En chargeant de nouvelles informations au fur et à mesure de la navigation, cela permet une économie de mémoire et de meilleures performances.
De son côté, le Server Side Rendering comme son nom l’indique, va confier aux serveurs le gros du travail d’affichage de vos données, le navigateur étant juste chargé d’afficher le résultat final (accompagné de quelques ressources).
Attention ! Ces 2 outils répandus ne sont pas spécifiques aux Single Page Application, et pourront se retrouver ailleurs !
Une courbe d’apprentissage un peu raide
Pour une personne débutant sur React, la courbe d’apprentissage initiale peut être assez ardue ! Il faut se familiariser avec quelques notions phares de React qui demandent un temps d’adaptation. Mais au final, c’est cette manière de fonctionner qui rend React si rapide et efficace !
À l’image de l’Atomic Design, React incorpore une notion de composants. Chaque bloc d’une page web (texte, images, liens…) est géré comme un composant à part entière, qui aura un cycle de vie et une hiérarchie à respecter sur la page.
Se familiariser avec la manière dont les composants s’interfacent ensemble, comment ils évoluent, se mettent à jour, comment ils communiquent avec l’architecture… Tel sera le défi à relever pour maîtriser React et profiter pleinement de ses forces !
Amiltone développe la majorité des projets internes en React, voilà un détail qui ne trompe pas !