Nuestros Hunters se han puesto de nuevo manos a la obra y han decidido hablarnos de la arquitectura de micro frontends. ¡Sigue leyendo!

La arquitectura de micro frontends es un enfoque arquitectónico en el cual encontramos una aplicación principal (agregadora) y aplicaciones individuales (agregadas), en el que cada aplicación individual expone su funcionalidad para que pueda ser incluida en la aplicación principal. Esta arquitectura permite unir diferentes micro frontends individuales, que pueden funcionar de forma totalmente independiente.

Un ejemplo de micro frontends sería el que nos encontramos en la Figura 1. En ella, se puede observar a distintos equipos que se encargan de diferentes servicios, cada uno como una aplicación independiente. El frontend de estas aplicaciones expone un punto de entrada para ser integrado por la aplicación agregadora.

Los micro frontends pueden estar implementados en diferentes lenguajes e, incluso, frameworks.

En la Figura 2 se puede observar una aplicación contenedora que agrega diferentes micro frontends.

El bloque de autenticación está implementado en TypeScript y Keycloak, la búsqueda en React, la gestión del perfil del usuario en Angular y la gestión de pedidos en una versión diferente de React usando TypeScript. Todos estos micro frontends exponen su funcionalidad a través de un punto de entrada para que la aplicación principal lo agregue de forma totalmente transparente para el usuario.

¿Cómo se integran los diferentes micro frontends?

La integración de los micro frontends se puede realizar mediante algún framework automatizado o manualmente. Actualmente, existen distintas aproximaciones para realizarla:

• Integración de servidor: Cada micro frontend se encuentra alojado en un servidor independiente que renderiza y sirve la aplicación. Cuando se recibe la petición del navegador, la aplicación agregadora realiza una llamada a la agregada. Se recomienda implementar una buena estrategia de caché para disminuir la latencia.
• Integración en tiempo de compilado: En este tipo de integración, la aplicación agregadora tiene acceso al código de aplicaciones agregadas durante su fase de desarrollo y compilación. Se puede incluir las aplicaciones agregadas como dependencias en el fichero “package.json”. Si se introduce algún cambio, requiere un redespliegue de la aplicación completa.
• Integración en tiempo de ejecución: La aplicación integradora tiene acceso al código de aplicaciones integradas mientras se ejecuta en el navegador. Los cambios realizados no requieren redespliegue de la aplicación ya que se carga dinámicamente el código de cada micro frontend. Existen diferentes implementaciones de este tipo de integración:
  • Mediante elementos iframe o script, que se pueden incluir dentro de una página web para cargar y renderizar componentes. Por una parte, el iframe ofrece un alto grado de aislamiento de estilos y variables globales que no interfieren entre sí, creando un entorno aislado entre cada componente. Sin embargo, el elemento script ofrece un enfoque más flexible ya que permite pasar datos entre ellos.

    En primer lugar, se cargarían las aplicaciones agregadas. Posteriormente, se expone una función global que enruta a cada una de las aplicaciones cargadas, cuando llega una petición del navegador, se realiza la petición del renderizado a la aplicación agregada cuya ruta coincida con la petición del navegador.

  • Webpack Module Federation Plugin: Este permite a aplicaciones JavaScript cargar código de otras aplicaciones en tiempo de ejecución e implementar la arquitectura de micro frontends, ya que la aplicación agregadora (llamada host app) puede enrutar a diferentes aplicaciones agregadas (llamadas remote apps) en tiempo de ejecución. Además, permite compartir dependencias entre distintas aplicaciones para evitar redundancia de librerías y reducir así el tamaño del bundle de las aplicaciones agregadas.

¿Qué ventajas tienen los micro frontends?

Entre las ventajas de los micro frontends se encuentran: 

• Modularización: Se elimina la macro aplicación frontend, que ahora pasa a convertirse en una arquitectura de micro aplicaciones que se agregan en una aplicación agregadora.
• Alta velocidad: Derivado de la modularización, se obtienen mayores velocidades de despliegue, cada módulo tiene su propio ciclo de vida y siendo independiente a los demás; y desarrollo, con la eliminación de los acoplamientos a la hora de desarrollar módulos separados.
• Mantenibilidad: Las aplicaciones agregadas son fáciles de mantener, gestionar y depurar; ya que las simplificamos dividiendo por área de negocio, misión o dominio.
• Elasticidad: Un dominio o área es altamente escalable a raíz del bajo acoplamiento.
• Heterogeneidad: Los micro frontends se pueden implementar con diferentes tecnologías (frameworks) o con la misma, pero con diferentes versiones.
• Facilidad en la migración de aplicaciones escritas en tecnologías obsoletas.

Caso de estudio

Esta arquitectura es útil para aplicaciones grandes, que necesitan colaboración de muchos desarrolladores, o en contextos Domain Driven Design (DDD). En este tipo de proyectos cada microservicio se encarga de una parte del dominio, sin interferir con el resto, con lo que la aproximación de micro frontends ayuda a simplificar la capa de dominio, sobre todo si se trata de proyectos grandes. Sin embargo, no es útil implementar este patrón de micro frontends para aplicaciones pequeñas o para aplicaciones que no requieren división por su simplicidad.

¿Quieres saber más sobre Hunters?

Ser un hunter es aceptar el reto de probar nuevas soluciones que aporten resultados diferenciales. Únete al programa Hunters y forma parte de un grupo transversal con capacidad de generar y transferir conocimiento. Anticípate a las soluciones digitales que nos harán crecer. Consulta más información sobre Hunters en la web.

Tahir Farooq

Técnico de Software en Altia