Frontend on Patrones — Exeal

Arquitectura en capas para frontend React

Thu, 24 Sep 2026 00:00:00 +0000

Problema

En una SPA React sin fronteras internas, todo tiende a mezclarse dentro del componente que renderiza la pantalla: la llamada a la API, el estado de carga/error, la lógica de negocio (qué pedir, cómo combinar resultados, cuándo revalidar) y el JSX que lo pinta. El resultado es un componente que solo se puede testear montándolo entero — con mocks de fetch, de router, de lo que haga falta — y donde no hay forma de reutilizar la lógica en otro sitio ni de darle una historia de Storybook sin resolver antes media aplicación.

One build, many deploys para imágenes de frontend

Thu, 24 Sep 2026 00:00:00 +0000

Problema

Un frontend construido con Vite lee sus variables de entorno (VITE_*) en tiempo de build: Vite las sustituye literalmente en el bundle. Eso significa que la URL de la API, el authority OIDC o el DSN de Sentry quedan “planchados” dentro del JavaScript compilado. Si quieres desplegar la misma app en staging y en production con distinta configuración, te ves obligado a construir una imagen por entorno — un pipeline de CI que hace build, build y build otra vez, cada uno con sus --build-arg, solo para cambiar cuatro strings.

Snapshot de contrato OpenAPI aceptado explícitamente

Thu, 24 Sep 2026 00:00:00 +0000

Problema

Cuando el contrato HTTP de una API se genera automáticamente a partir del código (controladores, DTOs, atributos), nadie lo “escribe” a mano — y por eso nadie lo revisa a propósito tampoco. Un refactor interno que renombra un campo, cambia su tipo, o hace opcional algo que antes era obligatorio, cambia el contrato público como efecto secundario silencioso: compila, los tests unitarios pasan, y el PR se fusiona sin que nadie haya mirado el swagger. El consumidor de esa API (un frontend, otro servicio, un cliente externo) se entera cuando algo se rompe en producción, no en la revisión del cambio.

Tests de aceptación de frontend sobre una imagen Docker ya construida

Thu, 24 Sep 2026 00:00:00 +0000

Problema

Un frontend construido con Vite y servido como estático (nginx) no se despliega como código fuente: se despliega como imagen Docker. Una suite de Playwright que arranca contra vite dev o contra un build en el propio runner de CI no ejercita nada de lo que hay entre ese código y el artefacto real — el Dockerfile, si nginx sirve las rutas de la SPA correctamente, si el entrypoint que inyecta la configuración en tiempo de arranque (ver el patrón de runtime env config) realmente deja la app apuntando a la API correcta. Todo eso puede pasar los tests unitarios y de componente y romperse solo en la imagen empaquetada.