React : fluidité et rapidité

Rapide historique, React c’est quoi ?

Remontons le temps, d’où vient React ?

React est une bibliothèque logicielle créée en 2011 par Jordan Walke, un ingénieur au sein de Meta (anciennement Facebook). Pete Hunt, ingénieur chez Instagram l’assiste afin de finaliser le projet.

La dernière version (18.3.1) est sortie en avril 2024, 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).

Qu’est-ce qu’une Single Page Application ?

Il s’agit d’une technique afin de fluidifier la navigation sur un site ou une application !

Au lieu de demander au serveur sur lequel est stocké l’information d’afficher directement la page web, l’application SPA va utiliser le navigateur web de l’utilisateur pour afficher l’information. Cela permet de naviguer sur la totalité de l’application sans avoir à afficher à chaque fois une page différente depuis le serveur. D’où un gain de temps et d’efficacité. 

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. Meta et Google les soutiennent ! 2 poids lourds de l’informatique, donc.

Soutenu par les poids lourds Meta et Google, React n’est pas menacé

De ce fait, React est très populaire auprès de la communauté du développement informatique.

ATTENTION !

Si ces 3 technologies sont en « concurrence » il n’y en a pas une qui est supérieure aux autres en tout point.

Chacune dispose de points forts et de points faibles ! Elles seront plus ou moins adaptées selon la nature de votre projet !

Si vous avez un projet et que vous vous demandez quel outil de développement serait le plus approprié, nos experts sont à votre écoute !

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 Meta, 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é ! 

Attention !  Ne pas confondre DOM Virtuel et Shadow DOM !

Peut-être avez-vous déjà entendu le terme de Shadow DOM ? Il ne doit pas être confondu avec le DOM virtuel ! 

Qu’est-ce que le Shadow DOM ?
Il s’agit d’une technologie native aux navigateurs qu’il est possible d’activer sur un élément. Son objectif ? Isoler un nœud précis de l’arbre d’éléments du reste du DOM. Ce faisant, vous pourrez appliquer des exceptions par rapport au reste des éléments du DOM.
Il n’y a donc pas de concurrence entre les deux concepts qui pourraient même théoriquement se combiner. 

Il n’y a, à priori aucun rapport entre le Shadow DOM et le Shadow Realm

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 ! 

TypeScript et React s’entendent très bien.

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).

JSX, c’est quoi ?

JSX est un facilitateur de syntaxe pour les développeurs, il permet notamment d’insérer facilement des balises HTML dans le JavaScript.

Techniquement ? Ce facilitateur vous permet de stocker un bloc de code HTML directement dans une variable. Plus besoin donc de modifier votre index en HTML de votre appli, tous les éléments et inputs pourront être directement codés en JSX. Si cela peut entraîner quelques contraintes au début, l’usage du JSX est un argument majeur en faveur de React, tant les gains finaux sont conséquents ! 

Autre avantage ? Il est possible d’utiliser les composants React comme des balises HTML ! Il est ainsi facile d’écrire directement en HTML avec des balises “custom” contenant déjà les composants React !

Pour la culture : JSX est l’acronyme de JavaScript XML 

Et donc TSX, c’est quoi ?

Exactement la même chose que les JSX mais pour TypeScript ! Les TSX permettent un typage encore plus avancé. 

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 ! 

La courbe d’apprentissage est certes un peu raide, mais rien d’insurmontable. 

À 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 !