Notez l'article 1 Star2 Stars3 Stars4 Stars5 Stars (Pas encore de vote)
Loading...

Structurer une application React

Je vous invite, après lecture, à me laisser un commentaire ou à noter cet article afin de m'aider à m'améliorer (ou me corriger si besoin). Je vous en serais très reconnaissant. De même n'hésitez pas à intervenir si vous avez des questions. Bonne Lecture !

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 :

documentation complète 

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.

Site d’illustration

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

J’espère que cet article à été clair et utile pour vous. Merci de noter cet article, et le must serait de me laisser un petit commentaire ! C’est toujours sympa de savoir ce qu’il y a de bien ou moins bien, et s’il y a une question ou une remarque discutons-en 😉

Notez l'article 1 Star2 Stars3 Stars4 Stars5 Stars (Pas encore de vote)
Loading...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Show Buttons
Hide Buttons