Structurer une application React
Problématique
Développer une application React volumineuse ou du moins évolutive, nécessite de se poser la question de l’organisation du code.
React étant une librairie basée composant, il est vite possible d’arriver à des dizaines de composants ayant plus ou moins d’inter-dépendances, ce qui peut devenir difficile à maintenir. React ne met à disposition aucune « fonctionnalité » de base ni de squelette d’application prêt à l’emploi permettant d’architecturer une application.
Le problème est donc d’essayer de diviser les responsabilités et de gérer les inter-dépendances de chaque partie de l’application en dynamisant et en automatisant le plus possible certains fonctionnements (comme le routing, la génération de menus etc…). Tout cela, si possible, de manière lisible, maintenable et facilement configurable.
Pour faire cela, j’ai tenté de créer une trame, un boilerplate, basé sur create-react-app, enrichi de fonctionnements spécifiques. Cette trame pourrais largement être améliorée, mais peut être une base (utilisable en l’état ou comme piste de réflexion), pour architecturer de manière modulaire et évolutive une application React.
Principe
Le principe est assez simple :
Chaque partie de l’application est considérée comme un « bundle », ou plugin, avec sa propre configuration. L’application dispose d’un bundle de base, le « core », qui contiendra les fonctions nécessaires à l’enregistrement, la récupération des autres bundles et la gestion des dépendances entre eux.
Chaque bundle va donc venir se « brancher » au « core » via un fichier de configuration déclaratif qui sera lu au démarrage de l’application afin d’enregistrer les plugins présents et actifs et de les rendre disponibles via des accésseurs spécialisés.
Chaque plugin quand à lui pourras également référencer ses propres modules et dépendances via ce même fichier de configuration. Cela permet une granularité intéressante dans la composition de l’application.
Documentation
Pour compléter et comprendre peut-être un peu plus en détail ce que j’ai voulu réaliser veuillez consulter le lien ci-dessous :
Cette documentation technique vous guidera dans l’installation et l’utilisation des principales fonctions et composants.
Les sources sont accessibles ICI ou avec git :
git clone https://zb2oby@bitbucket.org/zb2oby/react-mini-fk.git
Les sources sont « livrées » comme une application d’exemple, avec deux bundles de base. (boilerplate basé sur create-react-app et enrichi des fonctionnalités présentées).
Ci-dessous le lien pour accéder à cette application d’exemple si toutefois vous vouliez voir avant de cloner les sources.
Liens
En écrivant cet article, je suis tombé sur un projet qui ressemble de très près à ce que j’ai réalisé. Je vous conseille donc d’aller voir cette approche très similaire mais avec une implémentation légèrement différente.
https://github.com/linkmesrl/react-redux-plugin
De même, cette petite lecture est intéressante si l’on veut comprendre pourquoi il est intéressant de modulariser une application React.
Pourquoi les développeurs React devraient modulariser leurs applications
