Pasando de Onion Architecture a Vertical Slice

oniontovertical.png
Solucionex
16
Feb 23

Desde los inicios de la programación, se han visto propuestas varias arquitecturas con las que mejorar la creación de aplicaciones. Estas arquitecturas han sido usadas siempre que han sido convenientes. Una de las más asentadas es la Onion Architecture. Esta nos proporciona una mejor manera de crear aplicaciones con la que mejoramos su mantenibilidad y testing.

Como bien indica su nombre, esta arquitectura funciona por capas, manteniendo siempre la misma lógica a la hora de crear aplicaciones. Como ejemplo, podríamos imaginar la siguiente aplicación:

Onion Arquitecture

Con esta arquitectura podemos hacer un código limpio y con buenas prácticas pero, para atender a las features de la aplicación habría que saltar entre las diferentes capas, por lo tanto, a más capas saltamos, más problemas tendríamos en la aplicación y , ¿qué pasa cuando tenemos una aplicación bastante extensa en la que por ejemplo un método se empieza a utilizar en más de una feature?

Aquí es donde entra en juego la Vertical Slice Architecture. En otras palabras, vamos a trocear la cebolla 🧅🔪

Para entender mejor cómo funciona vamos a pensar que tenemos diversos cortes en esta cebolla. Cada corte sería una feature, la cual tenemos que hacerla totalmente independiente y así minimizar el acoplamiento entre todos los cortes.

 

Vertical Slice

 

Como podemos ver, esto nos aporta gran flexibilidad a la hora de diseñar los handlers de la aplicación, nos permite usar diferentes tecnologías en cada capa si fuera necesario (por ejemplo un ORM y un MicroORM). Y una de las cosas más importantes y que de vez en cuando nos dan algún dolor de cabeza, evitamos romper otras features. En otras palabras, simplificamos la arquitectura de la aplicación.

 

Para mostrar su funcionamiento de manera más detallada, pasemos a un ejemplo real.

 

Onion Arquitecture

 

Aquí podemos ver una arquitectura por capas, todas concéntricas. Para pasar a Vertical Slice procedemos a trocear esta arquitectura y a mantener las features independientes. Por lo que en un ejemplo real quedaría de la siguiente manera.

 

- Features
  -  Users
    - getAllUsers
      - getAllUsersController
      - getAllUsersCommand
      - getAllUsersResponse
      - getAllUsersCommandHandler
      - getAllUsersContainer.js
      - getAllUsers.js
      - getAllUsers.css
    - addUserLocation
      - addUserLocationController
      - addUserLocationCommand
      - addUserLocationResponse
      - addUserLocationCommandHandler
      - addUserLocationContainer.js
      - addUserLocation.js
      - addUserLocation.css

 

Ahora todas las features de la aplicación están bajo una misma carpeta y, por ejemplo en este caso, dentro de la feature getAllUsers tenemos toda la lógica, por lo que hemos conseguido separar esta feature de la Onion Arquitecture. Así logramos que todo el código de la feature esté en un mismo lugar y con esto ayudamos a que se pueda optimizar a nivel de feature y evitar romper otras.

Para ver más acerca de cómo pasar de Onion Architecture a Vertical Slice Arquitecture puede consultar el siguiente video: Receta para pasar de Onion-Clean Architecture a Vertical Slice Arquitecture - Josep Bocanegra

Fuentes:

 

Imagen principal del artículo generada mediante la IA Midjourney