Le framework React et la réalisation d'applications web

Dans le milieu des années 2000, la partie frontend des sites web commença à ne plus être considérée comme quelque chose de secondaire, à faire “plus tard” après le backend, mais bien comme une brique majeure d’un projet web.

Des concepts comme le responsive design, Ajax et bien d’autres commencèrent à émerger. Dans cette logique sont nés par la suite les frameworks web modernes comme Angular, Vue ou encore React.

Les origines de React

React (aussi appelé ReactJS) est une bibliothèque JavaScript initialement créée par Facebook en 2013 et plus précisément par Jordan Walke. Cette bibliothèque est aujourd’hui open source, c'est-à-dire que la communauté peut accéder au code librement et contribuer à l’évolution de celle-ci.

C’est bien ce qui caractérise React : une communauté forte et engagée, dans le but de faire évoluer une technologie utile et puissante pour tous.

React se positionne comme un concurrent direct et légitime à d'autres bibliothèques JS tel que Angular ou Vue. Faire un comparatif pour trouver lequel est le meilleur ou le moins bien n’a pas véritablement de sens, tant les technologies ont évolué dans leurs sens et ont chacune leurs avantages et leurs inconvénients.

React semble tout de même plus mature que Vue car soutenue par une grosse compagnie et une forte communauté. Bien que Vue soit certes en pleine croissance, mais peut être encore un peu jeune. Angular est présent depuis plus longtemps, mais les pratiques de développement ont évolué et des technologies semblant être plus novatrices peuvent être des alternatives plus intéressantes aujourd’hui.

Les concepts clés de React

Paradigme de l'orienté composant

React se base sur le paradigme de l’orienté composant, en partie opposé à l'orienté objet, qui permet de découper une interface en plusieurs éléments indépendants et réutilisables. Un composant peut être une fonction ou une Class, qui contient des méthodes et des comportements propres caractérisant un élément.

JSX, création du composant avec un State et des Props

Le JSX est un des premiers aspects de React qui le différencie de ses concurrents. Il s’agit d’une syntaxe, qui n’est ni une chaîne de caractères ni du html, mais qui permet de décrire le rendu visuel d’un composant. Son comportement est très proche du HTML ce qui au final ne gênera pas les utilisateurs aguerris de HTML. Un élément JSX prend des attributs et du contenu en paramètres. Cette syntaxe a pour but de simplifier la syntaxe verbeuse de création d'éléments.

A cela s'ajoutent deux types d’objets qui permettent d’enrichir et de rendre le composant dynamique :

• State : Objet géré à l’intérieur du composant. Une mise à jour de cet objet entraîne un nouveau rendu du composant.
• Props : Éléments passés au composant de par son composant parent. Cela permet de personnaliser le composant à sa guise.

Exemple de composant qui affiche du texte, basé sur un prop.

L’écriture de nos composants et la modification de leurs états entraîne une mise à jour du DOM Virtuel. L’idée est qu’ici, un DOM Virtuel soit ce que React manipule directement et non pas le véritable DOM qui permet d’afficher la page web. Ce concept permet une meilleure abstraction de la manipulation du DOM car simplifié via un principe de “réconciliation” qui permet de mettre à jour uniquement le DOM lorsqu’il est différent du VDOM, et donc un gain potentiel en performance.

Redux

React est un framework très efficace dans sa gestion de données. Les States et les Props permettent un échange de données suffisant dans une hiérarchie simple de composants. Cependant, des hiérarchies plus complexes, par exemple entre deux composants éloignés (ex: le header d’une page, avec un composant plus profond dans le corps de la page), montre les limites de ce système.

C'est là qu'intervient Redux avec un système de centralisation de données et d’actions. Le principe repose sur un système de magasin de données ou de “store” où chaque composant de l’application peut utiliser et modifier ses données. Grâce à cela, n’importe quels composants peuvent interagir entre eux via une interface commune.

Le “store” est donc un objet qui contient les données. Ces données sont accessibles directement par les composants qui le souhaitent en se connectant au store.

Pour modifier ce store, deux éléments sont nécessaires : les “dispatcher” et les “reducer”. Un dispatcher est une fonction qui peut prendre différents paramètres et qui retourne une action et un objet. La résolution de cette fonction entraîne un appel aux différents reducer. Le reducer est en charge, selon l’action, d’appliquer une mise à jour du store via les données présentes dans la fonction de dispatch.

Schéma du fonctionnement de Redux

La force de Redux est donc de venir compléter React sur cet aspect. En revanche, cet outil est très verbeux, ce qui peut le rendre parfois redondant à manipuler. C’est dans l’objectif d’améliorer cela, notamment en faisant en partie abstraction de la séparation des actions et des fonctions de dispatch, que Redux Toolkit a été pensé.

Bibliothèque de composants Microsoft UI

Dans plusieurs produits de leurs catalogues d’applications web, Microsoft a fait le choix de se baser sur React. La politique de Microsoft évoluant progressivement de plus en plus vers l’Open Source, c’est dans cette optique que l’entreprise a décidé de partager avec la communauté des composants techniques poussés développés pour React.

Pour les développeurs, il s’agit d’une véritable chance d’avoir accès à ces éléments, et ce pour plusieurs raisons. Cela comprend un gain de temps de développement, une sérénité sur la fiabilité des composants et tout simplement sur la mise en place d’une interface à la charte graphique évidemment proche du Fluent UI de Microsoft, qui s'intègrera parfaitement pour des clients disposant d'environnements sous Azure.

Le futur de React

React est une technologie riche et fortement soutenue par sa communauté. Ainsi, de nombreuses bibliothèques gravitent autour pour venir enrichir l’expérience de base. De nouvelles fonctionnalités natives à React apparaissent également au fur et à mesure. C’est notamment le cas des Hooks qui permettent de faire abstraction de certaines contraintes qui pouvaient rendre le code plus verbeux, moins compréhensible car moins segmenté.

Fin 2020, React annonçait l'arrivée des "React Server Components". L’idée est, comme le propose déjà NextJs par exemple, de proposer des composants dont le rendu serait géré par le serveur et non plus le client, ce qui engendrerait un gain en performance et en poids de dépendances sur le client. Cela n’est encore qu'à l'état de prototype mais promet un avenir intéressant.

C’est dans tout ce contexte de performance et d’évolution permanente que s'inscrit Next Decision pour répondre à vos besoins métier via des interfaces dédiées innovantes.

Retour page précédente Retour au Wiki

Un projet Business Apps ? Nos développeurs Business Apps sont à votre écoute ! Contactez-nous !