Microfrontend es un concepto relativamente nuevo en el que se trata de incorporar la arquitectura de microservicios al frontend, o algo parecido. La idea es tener una serie de aplicaciones independientes, distintos repos, que puedan coexistir en una SPA controladas por una aplicación "root".

En esta aplicación root, creada mediante librerías como Single-SPA por poner un ejemplo, es donde vamos a importar todas las partes que conformarán nuestra web final. También definiremos el manejo de rutas, estilos globales, layout, entre otras cosas.

Llevando lo anterior a un ejemplo, imagina una web clásica con header, main, footer y algún aside. Esta página podríamos dividirla en varias aplicaciones pequeñas que pueden convivir independientemente. Incluso crearlas con diferentes tecnologías: React, Angular, Vue, Svelte.

El ejemplo anterior no es el más claro sobre cuando usar este paradigma, sino que cada quien puede elegirlo o no. Por lo general las webs monolíticas crecen demasiado, y en ocasiones se vuelve un problema tanto para nuevos integrantes en el team como para la escalabilidad.

Un poco de Single-SPA

Sí, su nombre es un poco redundante, hasta ellos lo admiten 😅. Como algo reciente, los aportes de la comunidad son pocos, pero están compensados con una excelente documentación. Ahora vamos a crear un pequeño proyecto de ejemplo.

Creamos el root, una vez creado ejecutamos start y navegamos hasta http://localhost:9000/.

npx create-single-spa --moduleType root-config
npx start

Ahora creamos nuestras aplicaciones, durante la creación de cada app vamos a poder elegir el framework con el que queremos trabajar. Luego levantamos la app con start.

npx create-single-spa --moduleType app-parcel
npx start

Una vez hecho esto debemos cambiar en nuestro root de single-spa el archivo index.ejs, para importar nuestra aplicación, podemos simplemente cambiar el que viene por defecto @single-spa/welcome.

🎉 Una vez hecho esto tendrás el resultado corriendo en tu navegador.

Beneficios de microfrontend

• Mejoras incrementales.
• Bases de código simples y desacopladas.
• Despliegue independiente.
• Equipos autónomos.
• Enfoques de integración.
• Tu equipo puede usar los frameworks que deseen.

Cada día esta práctica va tomando fuerza. Hasta el punto que existen grandes compañías usándola como por ejemplo Namecheap y Atlassian. Su poder es tremendo y básicamente te permite unir varias apps en una plataforma SaaS. Te recomiendo que le des una ojeada.

📋 Documentación