¿Qué son los micro frontends?

¿Qué son los micro frontends?

Los micro frontends son un estilo de arquitectura en el que aplicaciones frontend de entrega independiente se componen en un todo mayor. Es la formulación del artículo de Cam Jackson en martinfowler.com. Lleva al navegador la idea de los microservicios: cada equipo es dueño de una porción de la interfaz de principio a fin, la construye y la lanza sin coordinar un lanzamiento de todo el frontend.

Cómo funciona

Una aplicación contenedora (a menudo llamada shell) decide qué micro frontend mostrar y une las piezas en una sola página. El artículo describe varias formas de integrarlos:

• Composición en el servidor. El servidor ensambla HTML a partir de fragmentos, por ejemplo con server-side includes.
• Integración en tiempo de compilación. Cada micro frontend se publica como paquete y se empaqueta en el contenedor. El artículo lo desaconseja porque obliga a lanzar todo a la vez.
• Integración en ejecución con iframes. Aislamiento fuerte, pero el enrutado, los enlaces profundos y el diseño adaptable se complican.
• Integración en ejecución con JavaScript. Cada micro frontend se carga con un script y expone una función que el contenedor llama para montarlo. Es la opción por defecto de los autores.
• Integración en ejecución con Web Components. Cada micro frontend es un elemento personalizado que crea el contenedor.

Ejemplo

Una tienda online tiene un equipo de búsqueda de productos, otro de pago y otro de cuenta. El shell renderiza la cabecera y enruta por URL: /search carga la app de búsqueda y /checkout la de pago. El equipo de pago puede publicar una corrección por la tarde sin tocar la búsqueda. Cada app podría incluso usar un framework distinto, como React o Vue.js, aunque rara vez es buena idea.

Cuándo compensa y errores frecuentes

Los micro frontends resuelven un problema de organización: muchos equipos trabajando en un frontend grande y bloqueándose entre sí. El mismo artículo enumera los costes: las dependencias duplicadas pueden aumentar el tamaño de descarga, los entornos de desarrollo pueden comportarse distinto del contenedor de producción y hay más repositorios, pipelines y servidores que mantener. Mantener una experiencia coherente entre código separado también es más difícil.

• Adoptarlos con un equipo pequeño. Una sola aplicación bien estructurada es más sencilla.
• Dividir por capa técnica en lugar de por área de negocio. Los equipos vuelven a depender unos de otros.
• Compartir estado mediante globales. El acoplamiento oculto trae de vuelta el monolito. Mejor usar eventos o la URL.
• Dejar que cada equipo elija otro framework. El usuario acaba descargando varios runtimes.
• Sin reglas de diseño comunes. Botones y espaciados se desajustan.

Micro frontends, pruebas de carga y monitorización

Una página depende ahora de varios bundles y varios backends, así que la pieza más lenta marca el ritmo. Mide cada parte, no solo el shell. Lanza una prueba de carga contra las APIs que llama cada micro frontend y vigila la disponibilidad y el tiempo de respuesta de las APIs en producción. Nuestra guía de pruebas de carga de microservicios en la nube (en inglés) cubre la parte de backend. El patrón de aplicación de una sola página es la base de muchos micro frontends. Para el catálogo completo de patrones, lee el artículo original (en inglés).

Preguntas frecuentes

¿Qué diferencia hay entre micro frontends y microservicios?

Los microservicios dividen el backend en servicios independientes. Los micro frontends aplican la misma idea a la interfaz, de modo que un equipo puede ser dueño de una funcionalidad desde la pantalla hasta su servicio. Suelen usarse juntos, pero cada uno funciona por separado.

¿Los micro frontends requieren un framework concreto?

No. El enfoque es independiente de cualquier framework. El contenedor y los micro frontends solo necesitan una forma acordada de montarse, desmontarse y comunicarse.

¿Los micro frontends perjudican el rendimiento?

Pueden hacerlo si cada uno incluye su propia copia de las librerías compartidas. Compartir dependencias y medir la carga de página por ruta mantiene el coste bajo control.

¿Cuándo no debería usar micro frontends?

Cuando un solo equipo puede encargarse cómodamente de todo el frontend. Los pipelines adicionales, el código de integración y el trabajo de coherencia solo compensan con varios equipos que necesitan lanzar de forma independiente.