Technologies que nous utilisons : React

Introduction

De nos jours, de nombreux logiciels sont développés pour le web : Skype, Discord, Visual Studio Code, Microsoft Office... Même lorsque l'un d'eux est installé sur votre ordinateur, c'est souvent une technologie web qui opère en coulisses. En effet, le web est un moyen multiplateforme, facilement accessible et puissant de distribuer des logiciels à moindre coût tout en offrant une expérience utilisateur moderne.

Chez The QA Company, nous utilisons souvent React pour développer nos interfaces web. Ainsi, QAnswer est construit avec cette technologie, et nous allons voir pourquoi elle est parfaitement adaptée à ce type de système.

‍

Qu'est-ce que React ?

React est un framework web créé par Jordan Walke, ingénieur logiciel chez Facebook, et est open source depuis 2013. Il permet aux développeurs d'écrire le code de l'interface d'une manière particulière, et React le compile en HTML, JavaScript et CSS pour être lu par n'importe quel navigateur.

Lorsqu'un développeur utilise React, il crée des composants. Pratiquement tout ce qui est rendu via React est un composant, et ceux-ci sont conçus pour être réutilisables. De plus, React s'est avéré être un outil très puissant, ce qui a engendré l'émergence d'une communauté qui est devenue l'une des plus grandes parmi les plateformes de partage pour les développeurs, comme StackOverflow où React occupait la deuxième place dans l'enquête développeurs 2020 dans la catégorie "Frameworks web".

Les composants React sont composés de plusieurs éléments :

• Un template : souvent créé avec un langage personnalisé appelé JSX, qui est un mélange de HTML et de JavaScript. Les templates constituent le squelette de l'application web.
• Des états (States) : un état est comme une variable, mais React les gère de manière efficace. Par exemple, un état peut être utilisé dans un template et, lorsqu'il est mis à jour, le template sera automatiquement re-rendu en conséquence.
• Autres : il existe de nombreux autres éléments tels que les effets de bord (side-effects), les callbacks et les contextes, mais pour simplifier, nous pouvons les regrouper sous l'étiquette "logique de l'interface". Leur rôle est de connecter l'UI aux serveurs, de gérer les interactions utilisateurs, etc.

‍

React pour QAnswer

Comme je l'ai mentionné précédemment, nous utilisons React dans l'application web QAnswer, et ce choix n'est pas anodin. QAnswer est bien plus qu'une page web : c'est une application à page unique (SPA) qui maintient un état tout au long de la navigation. Cet état contient principalement les informations du compte utilisateur (nom d'utilisateur, datasets, ...) et l'état de l'interface (sur quelle page se trouve l'utilisateur, quel dataset est affiché, ...). Ainsi, nous offrons une expérience fluide et rapide en évitant au navigateur de se recharger pendant la navigation entre les pages ou lors des requêtes vers les serveurs. React nous aide à maintenir l'interface connectée à l'état courant de l'application tout en préservant cette bonne expérience utilisateur.

‍

Conclusion

Nous avons vu ce qu'est React et pourquoi il contribue à la bonne expérience utilisateur sur les applications web comme QAnswer. Si vous souhaitez en savoir plus sur React et son écosystème, vous pouvez consulter le site officiel de React : https://reactjs.org/ — la documentation est de qualité et les ressources d'apprentissage sont nombreuses.

‍

Merci de votre lecture. Nous espérons que cet article vous a été utile !

‍