Arquitectura de Vertical Slice para aplicaciones web modernas

Explora la arquitectura de vertical slice, un enfoque moderno para simplificar las bases de código y acelerar la entrega de funciones. Aprende a construir aplicaciones web más mantenibles.

Introducción

La arquitectura de vertical slice organiza tu código por funcionalidad de negocio en lugar de por capa técnica. Eso significa que cada función —como “Crear usuario” o “Enviar pedido”— contiene su UI, endpoint de API, lógica de negocio y acceso a datos en un mismo lugar. El resultado es una entrega de funciones más rápida, menos errores de integración y una experiencia de incorporación más sencilla para los desarrolladores nuevos.

Por qué las arquitecturas en capas ralentizan a los equipos

Durante años, muchos equipos usaron arquitecturas en capas o N-tier: una capa de presentación, una capa de lógica de negocio y una capa de acceso a datos. En el papel esto es claro, pero en la práctica a menudo conduce a un alto acoplamiento y baja cohesión. Un cambio en una sola función—por ejemplo, añadir un botón de “favorito”—puede requerir ediciones en la UI, la lógica de negocio y el código de la base de datos, creando una frágil red de dependencias.

El efecto dominó de los cambios

Los desarrolladores acaban rebotando entre partes no relacionadas de la base de código para completar una tarea, aumentando la carga cognitiva y el riesgo de regresiones. Una encuesta reciente a equipos empresariales reportó un acoplamiento generalizado entre capas, con cambios en un solo endpoint provocando fallos amplios en los tests de las suites¹.

Esto produce consecuencias reales para el desarrollo moderno:

• Entrega de funciones lenta — más tiempo navegando la base de código que entregando valor.
• Mayor riesgo de errores — pequeños cambios pueden desencadenar regresiones en áreas no relacionadas.
• Incorporación difícil — los nuevos deben entender todo el sistema antes de contribuir.
• Efectividad reducida de las herramientas de IA — el contexto disperso limita las sugerencias útiles.

Para una comparación de patrones de arquitectura de software, consulta nuestra guía sobre patrones de arquitectura de software.

¿Qué es la arquitectura de vertical slice?

La arquitectura de vertical slice invierte el modelo mental de preocupaciones horizontales y técnicas a slices verticales centrados en el negocio. Piensa en tu app más como una pizza: cada slice contiene todo lo necesario para soportar una función de extremo a extremo. Eso incluye componentes de UI, manejadores de API, lógica de negocio y código de acceso a datos.

Esta estructura agrupa el código por lo que consigue para el usuario, no por su rol técnico. El resultado es una cohesión de la función mucho mayor y una experiencia de desarrollador más simple.

Cohesión de la función y experiencia de desarrollador

Cuando todo el código de una función vive junto, los desarrolladores encuentran, cambian y prueban la funcionalidad más rápido. Un único directorio puede contener todo lo necesario para entender y modificar una función, reduciendo los cambios de contexto y la sobrecarga mental. Este enfoque se utiliza en producción en apps como Life Purpose App y MicroEstimates.

Agrupa el código que cambia junto. Organiza tu código alrededor de las funciones para alinear el trabajo de ingeniería con el valor de negocio.

Consulta nuestra publicación sobre el modelo de círculos concéntricos para un pensamiento relacionado sobre el diseño centrado en el dominio.

Vertical slices vs arquitectura en capas

Gestión de dependencias entre slices

Mantén las slices independientes y evita llamadas directas entre funciones. Si la funcionalidad debe compartirse, usa patrones deliberados y bien definidos en lugar de crear una red de dependencias ad hoc. Este aislamiento permite a los equipos trabajar en paralelo con menos conflictos de merge y un menor riesgo de roturas accidentales.

Impacto empresarial de las vertical slices

Adoptar slices verticales es una decisión empresarial tanto como técnica. Los equipos ven mejoras medibles en velocidad, calidad y mantenibilidad cuando organizan por funciones en lugar de por capas.

Entrega más rápida, menor gasto

Cuando cada función es autónoma, los equipos pueden construir, probar y lanzar sin coordinarse a través de múltiples capas horizontales. Un estudio citó mejoras en el tiempo de entrega, las tasas de errores y las fallas de integración para equipos que adoptaron vertical slices². Organizar el código de esta manera también reduce los costes de mantenimiento a largo plazo: es más fácil encontrar y corregir errores cuando el código relevante está co-localizado.

Organizar por función vincula los esfuerzos de ingeniería directamente al valor entregado. Cada slice es una unidad de producto testeable y desplegable.

Incorporación más rápida y autonomía del equipo

Las vertical slices aplanan la curva de aprendizaje para los nuevos incorporados. Dale a un nuevo desarrollador una slice pequeña y puede contribuir rápidamente sin entender toda la aplicación. Este modelo soporta equipos pequeños y cross-funcionales que poseen las funciones de extremo a extremo, mejorando la autonomía y la predictibilidad.

Bases de código amigables para IA

Los asistentes de codificación por IA funcionan mejor con contexto relevante y cerrado. Cuando una slice contiene la UI, la API y el código de datos para una función, las herramientas de IA pueden proporcionar sugerencias mucho más precisas porque la ventana de contexto es coherente y enfocada. En sistemas en capas, el contexto disperso a menudo produce sugerencias genéricas o incorrectas de herramientas de IA como GitHub Copilot³.

Cómo estructurar un proyecto TypeScript con vertical slices

A continuación hay un ejemplo práctico usando Next.js, React y Node.js. La idea clave es mantener cada función autocontenida para que los desarrolladores no necesiten saltar entre muchos directorios para seguir el flujo de una petición.

Carpeta de ejemplo para una función

Para una función “Crear entrada de blog” podrías tener:

• src/features/CreateBlogPost/
  • index.ts — exportación barrel
  • CreateBlogPost.tsx — componente React y formulario
  • CreateBlogPost.api.ts — manejador de ruta de API
  • CreateBlogPost.command.ts — lógica de negocio para crear una entrada
  • CreateBlogPost.types.ts — tipos TypeScript para la función
  • CreateBlogPost.repository.ts — código de la base de datos para las entradas

Este espejo de capacidades de negocio facilita encontrar el código que necesitas y razonar sobre los cambios en la función.

Comandos vs consultas

Separa archivos por intención: los comandos mutan el estado y manejan la validación, mientras que las consultas se centran en lecturas eficientes. Esta ligera separación está inspirada en CQRS pero mantiene las cosas pragmáticas y accesibles.

Manejo de código compartido sin crear nuevas capas

Usa un directorio disciplinado shared o core para preocupaciones genéricas y transversales únicamente — cosas como middleware de autenticación, utilidades de logging, primitivas de UI o un cliente de base de datos. Evita colocar lógica de negocio en shared, porque eso introduce acoplamiento oculto entre funciones. Si la lógica es específica del negocio, mantenla dentro de la slice correspondiente.

Pruebas de vertical slices

Las vertical slices cambian la forma en que pruebas. En lugar de muchas pruebas unitarias frágiles que dependen de mocks, prefiere pruebas de integración a nivel de función que ejerciten la slice de extremo a extremo. Esto da mayor confianza de que la función realmente funciona en conjunto.

Prueba la función, no las capas

Un flujo típico de prueba de integración para una slice CreateBlogPost:

1. Configurar un estado de base de datos predecible (BD en memoria o contenedor de test).
2. Hacer una petición HTTP al endpoint de API de la slice con una carga válida.
3. Afirmar el estado y cuerpo de la respuesta.
4. Verificar que el registro en la base de datos fue creado con los valores correctos.

Este enfoque reduce el número de pruebas unitarias frágiles y mejora la cobertura del comportamiento real. En la práctica, los equipos han visto mejoras medibles en la cobertura de extremo a extremo al pasar a pruebas por función⁴.

En el front end, usa React Testing Library para simular interacciones de usuario con la UI de la slice y afirmar la experiencia de usuario esperada después de que la llamada a la API se complete.

Errores comunes y cómo evitarlos

Las vertical slices aportan claridad, pero hay anti-patrones a tener en cuenta.

• La slice “gorda” — una slice crece hasta cubrir muchas funciones. Solución: dividirla en slices más pequeñas y con un solo propósito.
• Lógica de negocio que se filtra — reglas colocadas en la librería shared. Solución: mover las reglas de negocio de vuelta a la slice a la que pertenecen.
• Estructura de slice inconsistente — diferentes disposiciones de carpetas entre funciones. Solución: acordar convenciones del proyecto para nombres y estructura.

Evitar abstracciones prematuras

Prefiere la duplicación antes que la abstracción equivocada. Espera a un patrón estable a través de varias funciones antes de extraer código compartido. Las abstracciones prematuras a menudo añaden acoplamiento y complejidad ocultos.

Estrategia práctica de migración para aplicaciones legacy

No reescribas todo. Crea nuevas funciones como vertical slices, y refactoriza partes pequeñas y contenidas de la aplicación legacy en slices usando un enfoque de estrangulamiento (strangler). Esta vía incremental moderniza la base de código sin detener la entrega de funciones.

En Clean Code Guy, ayudamos a los equipos a adoptar patrones pragmáticos como las vertical slices para construir software que perdure. Nuestros Refactors Preparados para IA y Auditorías de Base de Código ofrecen orientación experta para modernizar tu aplicación con seguridad. Aprende más en https://cleancodeguy.com.

Preguntas frecuentes

P1 — ¿En qué se diferencia la arquitectura de vertical slice de los microservicios?

Las vertical slices organizan el código dentro de una única aplicación por función. Los microservicios dividen un sistema entero en servicios separados. Un monolito organizado en vertical slices es más fácil de transformar en microservicios después, ya que cada slice se mapea claramente a un servicio candidato.

P2 — ¿Está bien compartir código entre slices?

Sí, para preocupaciones técnicas verdaderamente genéricas en un folder disciplinado shared o core. Mantén la lógica de negocio dentro de las slices. Cuando dos slices necesitan reglas de negocio similares, prefiere la duplicación hasta que surja un patrón estable.

P3 — ¿Puedo introducir vertical slices en una app legacy?

Sí. Comienza construyendo nuevas funciones como slices y refactoriza funciones legacy pequeñas y autocontenidas en slices con el patrón de estrangulamiento.