clean architecture front end
1.0.0
Bonjour, voici un référentiel pour vous envoyer ma vision de l'architecture propre (d'abord sur le devant, puis plus tard) dans différentes versions.
J'ai écrit un article pour soutenir les exemples de ce projet: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end pour comprendre l'architecture propre, vous pouvez également lire mon article sur l'inversion de la dépendance à Front-end: https://www.hexa-web.fr/blog/dependency-inversion-front-front-front-front-web.fr/blog/dependency-inversion-front-front-end-end
Pour ces exemples, j'ai choisi d'utiliser Next.js basé sur React, mais l'intérêt de cette architecture est de pouvoir l'utiliser indépendamment des cadres et des bibliothèques utilisés (dépendances externes).
Afin d'avoir un exemple simple, j'ai choisi un sujet simple: une liste de TODO!
Pour voir les tâches qui doivent encore être effectuées sur le projet, accédez au fichier /docs/todo.md
Si vous avez des questions, des suggestions ou autre chose, n'hésitez pas à me contacter! Et si ce référentiel vous a aidé, envisagez de le partager avec vos connaissances.
Tout d'abord, installez les dépendances:
npm install
# or
yarn install-
Ensuite, exécutez le serveur de développement:
npm run dev
# or
yarn devOuvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.
-
Pour démarrer les tests unitaires:
jest-
Pour tester l'application en ligne: https://front-end-clean-architecture.netlify.app/
L'architecture hexagonale, ou architecture basée sur les ports et les adaptateurs, est un modèle architectural utilisé dans le domaine de la conception de logiciels. Il vise à créer des systèmes basés sur des composants d'application qui sont de manière lâche et qui peuvent être facilement connectés à leur environnement logiciel au moyen de ports et d'adaptateurs. Ces composants sont modulaires et interchangeables, ce qui renforce la cohérence du traitement et facilite l'automatisation des tests.
Il y a trois parties dans l'architecture propre: la partie de l'application (les ports et adaptateurs principaux), le domaine (les cas d'utilisation, les modèles de domaine, etc.) et la partie d'infrastructure (les ports et adaptateurs secondaires).
Cette architecture est basée sur le modèle de port / adaptateur et du principe d'inversion de dépendance.
En vous documentant sur une architecture propre (ou une architecture hexagonale). Vous trouverez différents noms pour ces pièces. Les noms choisis ici sont personnels, le but étant qu'ils sont compréhensibles.
Les cas d'utilisation définissent les actions de vos utilisateurs. L'objectif n'est pas d'utiliser aucun cadre ou bibliothèque dans ces éléments (afin de garder une logique non couplée à ces outils).
Sur le devant, ils peuvent être représentés par la fonction, par classe écrite en JS ou TS. Avec React, il est possible d'utiliser Redux pour cette partie.
Dans le cas où Redux est utilisé, les actions sont les cas d'utilisation, l'état est l'un des modèles et les sélecteurs sont utilisés pour cartographier.
Le port principal est utilisé pour établir un contrat entre l'adaptateur principal et les cas d'utilisation. Pour cela, une interface peut être créée. En pratique, le cas d'utilisation est également considéré comme un port principal.
Ensuite, l'implémentation de ces interfaces est utilisée pour dialoguer avec le domaine: le premier est ce que nous appelons les adaptateurs principaux. Leur objectif est de déclencher l'exécution des cas d'utilisation. Par exemple, sur le devant, ces adaptateurs peuvent être les composants de réaction qui effectuent des déclencheurs une action (redux ou non).
Le port secondaire est utilisé pour établir un contrat entre l'adaptateur secondaire et les cas d'utilisation. Pour cela, nous créons généralement une interface. Cette interface est utilisée directement dans le cas d'utilisation.
Conseils: Vous pouvez utiliser l'injection de dépendance pour cela, certaines bibliothèques de gestion de l'État vous permettent de le faire. Par exemple, avec Redux-Thunk et Redux-observable, il est possible de passer des "extra-arguments" qui seront directement disponibles dans les actions Redux. Dans "Vanilla", il y a aussi inversifyjs.
La deuxième implémentation des interfaces (ports) est appelée adaptateurs secondaires. Ils sont appelés par les cas d'utilisation. Par exemple devant, ces adaptateurs peuvent être les demandes HTTP, l'accès aux données présentes dans le stockage local, etc.
En anglais :
En français:
