Frontend
La capa donde vive la interfaz de usuario, la interacción con el cliente y el consumo inicial del sistema.
¿Qué es esta capa?
El frontend es el punto de contacto directo con el usuario. Aquí se construyen:
- pantallas
- componentes visuales
- formularios
- navegación
- manejo de estado
- feedback visual
- integración con APIs
Su propósito no es contener la lógica central del negocio, sino ofrecer una experiencia clara y usable sobre la funcionalidad del sistema.
Responsabilidades principales
Renderizar la interfaz
Mostrar información y permitir al usuario interactuar con el sistema.
Manejar estado de UI
Gestionar filtros, formularios, selecciones, loading, errores y otros estados de la experiencia.
Validación básica del lado cliente
Ayudar al usuario con validaciones tempranas, sin reemplazar las validaciones reales del backend.
Consumir APIs
Enviar requests al sistema a través del API Gateway o el BFF.
Gestionar experiencia
Mensajes, loaders, notificaciones, pasos de procesos y respuesta visual ante errores.
Qué no debería hacer el frontend
No debería contener reglas críticas del negocio
Puede ayudar con validaciones de experiencia, pero la verdad del negocio debe mantenerse en backend.
No debería conocer demasiados detalles internos
Si el frontend necesita conocer todos los microservicios, la arquitectura se vuelve frágil y difícil de mantener.
No debería orquestar procesos complejos
Para eso existen capas como el BFF o los servicios de dominio.
Relación con otras capas
El frontend normalmente no debería hablar directamente con todos los microservicios. Su relación ideal es:
- frontend → API Gateway
- gateway → BFF
- BFF → microservicios
Esto permite mantener una experiencia más estable, incluso si internamente la arquitectura cambia.
Estado local y global
En aplicaciones modernas, el frontend suele manejar dos tipos de estado.
Estado local
Pertenece a un componente o vista concreta. Por ejemplo:
- si un modal está abierto
- el valor actual de un input
- un toggle visual
Estado global
Se comparte entre varias partes de la aplicación. Por ejemplo:
- usuario autenticado
- tema visual
- carrito
- filtros persistentes
- datos de sesión
Entender esta diferencia ayuda a no sobredimensionar el manejo de estado.
¿Por qué no poner demasiada lógica aquí?
Porque el frontend:
- cambia rápido
- se adapta a necesidades de pantalla
- está más expuesto a refactors de UX
- no debe convertirse en el lugar donde se decide la verdad del sistema
La lógica de negocio importante debe quedar protegida en el backend o los servicios de dominio.
Tecnologías comunes
Dependiendo del stack, esta capa puede incluir:
- React, Vue o Angular
- TypeScript
- state management como Redux, Zustand o Pinia
- librerías de formularios
- clientes HTTP o GraphQL
- herramientas de build como Vite
Ejemplo práctico
Imagina la pantalla de un catálogo.
El frontend:
- renderiza filtros
- muestra productos
- permite paginar
- enseña estados de carga
- manda la petición al backend
Pero no decide:
- si un producto es realmente válido
- si el stock puede reservarse
- si una orden puede confirmarse
Eso pertenece al dominio.
Resumen
El frontend es responsable de la experiencia del usuario, la presentación y la interacción. Debe ser una capa clara y eficiente, pero no el lugar donde se concentran las reglas principales del negocio.