Micro front con Module federation

Micro front-end es un termino que ha venido tomando fuerza desde mediados del 2016, que fue cuando apareció por primera vez. Inspirado en el modelo de microservicios, es la respuesta a las aplicaciones  web complejas, que permite dividir una aplicación web compleja  en diferentes e independientes módulos  que trabajan en conjunto para formar una sola aplicación.

¿Qué es el microfront?

La arquitectura micro-frontend divide una aplicación web, en módulos de menor talla que funcionan como una aplicación web independiente realizando  una función especifica, los cuales en conjunto conforman la aplicación completa.

Cuanto mas grande es una aplicación, más complicado es mantener a un equipo de trabajo interactuando con el mismo código. Aplicando esta arquitectura resolvemos este problema, ya que al segmentar la aplicación en módulos independientes, es posible que el equipo trabaje sobre el código de cada modulo mejorando el flujo de trabajo.

Otras ventajas de esta arquitectura...

• Aplicaciones escalables.
• Una aplicación bien segmentada podrá mejorar el performance de la aplicación 
  

Module Federation

Existen herramientas que facilitan la implementación de la arquitectura micro front-end a nuestros proyectos, entre ellos está el plugin Module Federation de webpack.

Este plugin permite a los desarrolladores integrar diferentes desarrollos en una misma aplicación de una manera sencilla. Si una aplicación JS  trabaja con webpack 5.0 o superior, perfectamente podrá integrar la herramienta Module Federation.

Y ¿Cuáles son sus ventajas?

• Mejor manejo y la forma en que se comparte el código.
• Problemas mínimos de dependencias
  

Crear un proyecto con Module Federation desde cero

Para trabajar con  el plugin Module Federation y crear un proyecto desde cero, será necesario instalar el paquete  create-mf-app con el siguiente comando, en mi caso con NPM.

 npm i create-mf-app

Este paquete nos permitirá crear aplicaciones, API servers y librerias con el plugin de Module fedration.
Una vez instalado el paquete, podremos crear nuestra aplicación con el siguiente comando...

 npm create mf-app

El comando nos muestra un dialogo en el que elegimos el nombre, tipo de proyecto, puerto, framework (ract, vue, incluso vanilla ), lenguaje (javascript o typescrit), y css (solo css o tailwind), al terminar la configuración del nuevo proyecto nos movemos al directorio creado e instalamos las dependencias necesarias...

 npm i 

Y ejecutamos el proyecto

 npm start