Intégration d’interface utilisateur avec React

Aujourd’hui, présentation de la bibliothèque Javascript React, avec laquelle j’ai eu l’occasion de travailler récemment pour la première fois en travaillant sur le projet Open Business Labs. En tant que développeur front-end/intégrateur web. je présente ici la partie intégration d’interface graphique et utilisation de composants.

Présentation

React est une bibliothèque Javascript sous licence libre (licence BSD) qui a été développé par Facebook et qui est désormais utilisée par d’autres applications très connues sur le web (Air BnB, Net Flix, Instagram…). La principale particularité de React est que la bibliothèque utilise un DOM virtuel qui lui permet de ne “mettre à jour le rendu dans le navigateur qu’en cas de nécessité” (Wikipédia). C’est-à-dire que seulement la partie de la page qui change (une nouvelle donnée apparaît ou est modifiée) est mise à jour côté utilisateur. L’exemple le plus commun serait les commentaires dans Facebook. Quand un nouveau commentaire est postée, seule la zone commentaire est modifiée, le reste de la page ne bouge pas.

Composants

React est basé sur un système de composants réutilisables, chaque composant est une fonction ou un élément d’interface utilisateur. Cela permet une modularité et une réutilisation des éléments dans toute l’application que l’on développe. L’application est en fait elle-même un composant, qui contient d’autres sous-composants, qui contiennent eux aussi des composants, etc…

Par exemple, la zone commentaire de notre application serait un composant Zone commentaire qui contiendrait elle-même des sous-composants Commentaire (pour l’affichage d’un commentaire individuel) et un composant Nouveau commentaire (pour l’affichage du champ de saisie du nouveau commentaire).

Ce “découpage” en composants de l’application est très efficace, et côté, développement, il permet une maintenance simplifiée de l’application, puisqu’une fois notre composant modifié, il est mis à jour automatiquement partout dans l’appli.

Il faut aussi savoir que React propose par défaut de nombreux composants génériques à réutiliser lors de développements (sidebar, panneaux d’administration, formulaires, gestion d’authentification…)

La mise en place d’une architecture d’application web avec React nécessite toutefois d’être développeur et d’avoir une forte connaissance de Javascript et de la programmation orientée objet (les composants sont en fait des Classes qu’on réutilise). Mais l’utilisation des composants et leur mise en forme font partie des choses que j’ai pu expérimenté en travaillant sur Open Business Labs.

Pour info, Facebook à l’origine de la création de la bibliothèque propose des tutoriels de découverte très bien faits sur https://facebook.github.io/react/

Mise en place d’interface graphique

C’est le cœur du sujet, pour moi intégrateur web. J’ai donc travaillé sur une architecture technique déjà en place, j’ai dû travailler sur l’interface de l’application et la mettre totalement en forme. C’est-à-dire qu’on part de pages blanches avec des données écrites en noires sans aucune (ou presque) mise en forme.

Comme dit plus haut, un composant React est une classe. Donc, on le déclare, on lui donne des propriétés qui peuvent aussi être modifiée, et, il retourne quelque chose. Dans le cas de React, c’est un render, soit une parcelle de code qui apparaîtra dans notre page.

Avec une peu de connaissances en Javascript et de POO (savoir lire des classes), on se retrouve facilement dans l’arborescence des composants et on peux alors aller modifier les render et le code HTML qu’ils génèrent. On lie simplement les feuilles de styles à notre page HTML racine de l’appli et on peux alors utiliser les classes CSS dans tous les composants.

Une des particularités est que, React étant programmé en Javascript, il est déconseillé d’utiliser d’autre librairies Javascript par-dessus (jQuery par exemple) pour éviter les conflits. Si on veut d’autre fonctions ou animations, elle doivent être recréées avec React, ou alors on peux les retrouver dans la large bibliothèque de composants existant et mise à jour par la communauté de développeurs.

Ce fut le cas pour le projet Open Business Labs. En effet, l’interface graphique était basée sur un thème Bootstrap. Donc, plutôt que de relier “à la main” les fichiers nécessaires à Bootstrap (CSS et JS) et de ré-écrire le HTML nécessaire à Boostrap dans les composants notre appli, on a plus simplement ré-utilisé React Boostrap, une librairie proposant les composants Boostrap, mais ré-écrits pour React, donc plus simple d’utilisation.

Conclusion

J’ai vraiment apprécié travailler avec cette nouvelle bibliothèque, très efficace et très facile à maintenir (pour le côté rendu graphique). En tant que développeur front-end/intégrateur web, une fois que l’architecture technique est en place et que les composants ont été déclarés, c’est plutôt simple d’utilisation. Il suffit d’aller modifier dans les différents composants le code que l’on veut voir apparaître sur la page, ou de réutiliser les composants existants, et le tour est joué !

Archives