Información general
¿Cuándo utilizarla?
Finalidad y casos de uso
Esta solución es especialmente valiosa para la creación del Front End, es decir, la interfaz de usuario, supliendo las necesidades de acceso, interacción y experiencia del usuario en aplicaciones web diseñadas específicamente para ser utilizadas a través de navegadores, y no para aplicaciones móviles. Las arquitecturas web modernas permiten desarrollar aplicaciones que operen de manera eficiente y escalable, adaptándose a las demandas cambiantes de los usuarios y ofreciendo una experiencia fluida y dinámica.
Al implementar estas arquitecturas, se logra una integración efectiva de componentes y servicios, lo que permite que las aplicaciones se adapten a diversos contextos, como plataformas web o sistemas de terceros, sin necesidad de duplicar esfuerzos ni generar procesos innecesarios. Esto asegura que las aplicaciones no solo sean funcionales, sino también altamente responsivas y fáciles de mantener.
Contamos actualmente con dos tipos de soluciones principales, adaptadas para distintos escenarios y necesidades:
Solución SPA-APP (Single Page Application): Ideal para aplicaciones web interactivas donde la experiencia del usuario es primordial. Las SPA cargan una única página HTML y actualizan el contenido de forma dinámica, ofreciendo una navegación fluida y una sensación de aplicación nativa. Son perfectas para aplicaciones con un alto grado de interacción y funcionalidades ricas.
Solución SHELL-APP (Shell + MicroFrontends): Diseñada para aplicaciones web a gran escala y/o equipos de desarrollo distribuidos. Los microfrontends (MFE) permiten dividir la aplicación en componentes independientes, que pueden ser desarrollados, probados y desplegados de forma autónoma. Esta arquitectura facilita la escalabilidad, el mantenimiento y la adopción de nuevas tecnologías de forma gradual. Es ideal para proyectos grandes y complejos, donde la colaboración entre equipos es fundamental.
Una solución de interfaz web puede ser conveniente en los siguientes casos de uso:
- Carpeta ciudadana: Acceso centralizado a servicios como solicitudes de certificados, pagos de tasas y consultas de trámites.
- Gestión de citas previas: Reserva de citas para servicios presenciales en oficinas o centros de salud, optimizando el flujo de atención.
- Consulta de información sobre ayudas y subvenciones: Búsqueda de información sobre ayudas disponibles, requisitos y procesos de solicitud.
- Acceso a servicios de educación y formación: Información sobre programas educativos, inscripciones y recursos de formación.
- Consulta de datos personales y gestión de trámites: Acceso a información personal, como datos fiscales o estado de trámites, con gestión segura y eficiente.
- Otros servicios: Implementación de soluciones personalizadas para satisfacer diversas necesidades de la ciudadanía, adaptándose a diferentes contextos y requerimientos específicos.
Características y ventajas
- Adaptabilidad a diferentes dispositivos y plataformas: Ambas arquitecturas buscan ofrecer una experiencia de usuario consistente en diversos dispositivos, utilizando diseño responsivo y técnicas de optimización móvil..
- Uso de frameworks y librerías moderna: Tanto SPA como Microfrontends se benefician de frameworks y librerías de JavaScript modernos, facilitando el desarrollo y mantenimiento del código..
- Mejora en la experiencia del usuario: Ambas arquitecturas buscan mejorar la experiencia del usuario, ya sea a través de la fluidez de SPA o la modularidad de Microfrontends.
- Desarrollo modular: Ambas arquitecturas benefician de la division en componentes reutilizables, facilitando el mantenimiento y la escalabilidad del código.
- APIs y servicios: Ambas arquitecturas dependen de APIs para obtener y enviar datos, lo que permite una clara separación entre frontend y backend.
Dependiendo de la implementación que se realice de la solución, tendría, además, las características y ventajas que se listan a continuación:
- Experiencia de usuario fluida y receptiva: SPA carga una única página y actualiza dinámicamente el contenido, evitando recargas completas y mejorando la navegación.(1)
- Gestión de estado centralizada: Facilita la gestión de datos complejos en aplicaciones con muchos componentes.(1)
- Desarrollo y despliegue independiente: Cada microfrontend se desarrolla, prueba y despliega por separado, agilizando los ciclos de lanzamiento.(2)
- Flexibilidad tecnológica: Permite usar diferentes frameworks y librerías en cada módulo, adaptándose a necesidades específicas.(2)
- Mantenibilidad mejorada: La división en módulos facilita la detección y corrección de errores, así como las actualizaciones.(2)
- Escalabilidad aumentada: Permite escalar partes específicas de la aplicación según la demanda, optimizando el rendimiento.(2)
- Reutilización de componentes: Los microfrontends pueden compartir componentes, fomentando la consistencia y reduciendo la duplicación.(2)
- Equipos autónomos: Permite alinear el desarrollo de cada microfrontend con equipos de trabajo específicos.(2)
(1) Específicas de una implementación de la solución usando SPA.
(2) Específicas de una implementación de la solución usando Microfrontend.
Detalle técnico
- Acceso desde el navegador (Browser) o cliente
- Un usuario accede a la App Web desde un navegador o cliente.
- La SPA App (Single Page Application) o SHELL-APP (MFE-APP) (Microfrontend) se carga en el navegador y realiza solicitudes a los servicios backend.
- Paso a través de la infraestructura de seguridad
- La solicitud viaja por Internet y pasa por un firewall, que protege contra accesos no autorizados.
- Un balanceador de carga distribuye el tráfico entre los servidores disponibles.
- Interacción con la API Manager
- La API Manager recibe la solicitud y aplica políticas de seguridad, autenticación y control de acceso.
- Puede realizar validaciones como OAuth, JWT, rate-limiting y logging, antes de enrutar la solicitud a los servicios adecuados.
- Procesamiento dentro de la zona de aplicación (APP ZONE)
- Dentro de la APP ZONE, la solicitud es dirigida a los microservicios correspondientes.
- Estos microservicios manejan diferentes partes de la lógica de negocio y pueden interactuar con bases de datos, sistemas de caché o servicios externos.
- Respuesta y renderización en la SPA-App o SHELL-APP (MFE-APP) según la solución elegida.
- Los microservicios envían la respuesta de vuelta a través del API Manager, asegurando que se mantengan las políticas de seguridad y control de tráfico.
- La SPA App o SHELL-APP (MFE-APP), cargada en el navegador, recibe los datos y renderiza dinámicamente la información para el usuario.
Cómo adaptarla a tu caso concreto
Si el proyecto requiere una aplicación web compleja con una rica interacción del usuario y una gestión de estado global sofisticada, se recomienda utilizar una arquitectura de SPA (Single Page Application). Esta opción permite una experiencia de usuario fluida y receptiva, ideal para aplicaciones que requieren una manipulación intensiva de datos en tiempo real.
Si el proyecto requiere la implementación de funcionalidades independientes y modulares, con la necesidad de escalabilidad y flexibilidad en el desarrollo, se recomienda utilizar una arquitectura de Microfrontend. Esta opción facilita la gestión de componentes individuales, permitiendo que diferentes equipos trabajen de forma autónoma y acelerando el desarrollo y la implementación.