clean architecture front end
1.0.0
Hola, aquí hay un repositorio para enviarle mi visión de la arquitectura limpia (en primer lugar en el frente, luego más tarde) en diferentes versiones.
I wrote an article to support the examples of this project: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end To understand the clean architecture, you can also read my article on dependency inversion in front-end: https://www.hexa-web.fr/blog/dependency-inversion-front-end
Para estos ejemplos, elegí usar Next.js basado en React, pero el objetivo de esta arquitectura es poder usarlo independientemente de los marcos y las bibliotecas utilizadas (dependencias externas).
Para tener un ejemplo simple, elegí un tema simple: ¡una lista de tareas!
Para ver las tareas que aún deben realizarse en el proyecto, vaya al archivo /docs/todo.md
Si tiene alguna pregunta, sugerencia o cualquier otra cosa, ¡no dude en contactarme! Y si este repositorio lo ha ayudado, considere compartirlo con sus conocidos.
Primero, instale las dependencias:
npm install
# or
yarn install-
Luego ejecute el servidor de desarrollo:
npm run dev
# or
yarn devAbra http: // localhost: 3000 con su navegador para ver el resultado.
-
Para comenzar las pruebas unitarias:
jest-
Para probar la aplicación en línea: https://front-end-clean-architecture.netlify.app/
La arquitectura hexagonal, o arquitectura basada en puertos y adaptadores, es un patrón arquitectónico utilizado en el campo del diseño de software. Su objetivo es crear sistemas basados en componentes de la aplicación que se acoplen libremente y que se pueden conectar fácilmente a su entorno de software mediante puertos y adaptadores. Estos componentes son modulares e intercambiables, lo que refuerza la consistencia del procesamiento y facilita la automatización de las pruebas.
Hay tres partes en la arquitectura limpia: la parte de aplicación (los puertos primarios y los adaptadores), el dominio (los casos de uso, los modelos de dominio, etc.) y la parte de infraestructura (los puertos y adaptadores secundarios).
Esta arquitectura se basa en el patrón de puerto / adaptador y el principio de inversión de dependencia.
Documentándole la arquitectura limpia (o arquitectura hexagonal). Encontrará diferentes nombres para estas partes. Los nombres elegidos aquí son personales, el objetivo es que son comprensibles.
Los casos de usos definen las acciones de sus usuarios. El objetivo no es utilizar ningún marco o bibliotecas en estos elementos (para mantener una lógica no acoplada a estas herramientas).
En el frente, pueden representarse por función, por clase escrita en JS o TS. Con React, es posible usar Redux para esta parte.
En caso de que se use Redux, las acciones son los casos de uso, el estado es uno de los modelos y los selectores se utilizan para mapear.
El puerto primario se utiliza para establecer un contrato entre el adaptador primario y los casos de uso. Para esto, se puede crear una interfaz. En la práctica, el caso de uso también se considera un puerto primario.
Luego, la implementación de estas interfaces se usa para dialogar con el dominio: el primero es lo que llamamos los adaptadores principales. Su objetivo es activar la ejecución de casos de uso. Por ejemplo, en la parte delantera, estos adaptadores pueden ser los componentes React que realizan desencadenantes una acción (Redux o no).
El puerto secundario se utiliza para establecer un contrato entre el adaptador secundario y los casos de uso. Para esto, generalmente creamos una interfaz. Esta interfaz se usa directamente en el caso de uso.
Consejos: puede usar la inyección de dependencia para eso, algunas bibliotecas de gestión estatales le permiten hacerlo. Por ejemplo, con Redux-Thunk y Redux-Observable, es posible pasar "Extraargumentos" que estarán directamente disponibles en las acciones de Redux. En "Vanilla", también hay inversificaciones.
La segunda implementación de interfaces (puertos) se llama adaptadores secundarios. Los llaman los casos de uso. Por ejemplo, en frente, estos adaptadores pueden ser las solicitudes HTTP, el acceso a los datos presentes en el almacenamiento local, etc.
En Inglés :
En francés:
