Arquitectura hexagonal

Vertical slicing

[WIP]

Teniendo todo esto en cuenta, nuestra arquitectura de carpetas en un proyecto de frontend (en este caso usando React como biblioteca de UI) quedaría de la siguiente forma:

• Directorysrc

  • Directorymodules

    • Directoryproducts

      • Directorydomain

        • Product.ts
      • Directoryapplication

        • get-product.ts
      • Directoryinfrastructure

        • product-rest-client.ts
      • Directoryrepresentation

        • ProductCard.tsx
        • ProductPriceLabel.tsx
    • Directorycategories

      • Directorydomain

        • Category.ts
      • Directoryapplication

        • get-all-categories.ts
        • get-category.ts
      • Directoryinfrastructure

        • categories-rest-client.ts
      • Directoryrepresentation

        • CategoryGrid.tsx
        • CategoryFilters.tsx
  • Directorypages

    • ProductPage.tsx
    • CategoryPage.tsx
• package.json

Aunque está representado usando la jerarquía de un poryecto típico de React, se puede ajustar para llevar a cualquier otro framework o librería de UI.

Nota

¿Qué hacemos con frameworks que tienen sistemas de enrutado basados en la jerarquía de carpetas como NextJS? En ese caso siempre respetar al máximo posible el framework para asegurarnos de que vamos a escalar lo mejor posible. Sin embargo, el concepto de carpeta modules con el vertical slicing dentro lo podemos seguir teniendo fuera de la carpeta a partir de la cual NextJS infiere las rutas de la aplicación.

Dominio

Más información en el artículo sobre Domain Driven Design.

Aplicación

Infrastructura

Representación

En multitud de ocasiones se me ha ocurrido introducir la carpeta de presentación dentro de la infrastructura. Al final, se trata de código generalmente acoplado a un framework o a una librería de UI, por lo que se escapa del dominio puro de la aplicación. Siguiendo el concepto de dominio, nos gustaría ser capaces de poder desacoplar la lógica de negocio que tengamos en el frontal de la forma en la que esta se representa en la pantalla. Sin embarbo, en el caso de las aplicaciones web, la capa de representación tiene un peso demasiado importante como para no estar separada del resto.