Los Micro Frontends son una representación técnica de una lógica de negocio o subdominio dentro de una aplicación. Este enfoque permite dividir una gran aplicación en micro aplicaciones más pequeñas y manejables. Cada micro aplicación puede desarrollarse, desplegarse y escalarse de manera independiente, similar a los microservicios en el backend. Esto es ideal para grandes aplicaciones que necesitan escalar y evolucionar sin afectar el sistema completo.
Ventajas de los Micro Frontends
- Desacoplamiento: Cada micro aplicación puede desarrollarse y testearse de manera independiente, lo que permite que equipos distribuidos trabajen en diferentes partes de la aplicación sin interferir entre sí.
- Desarrollo paralelo: Los equipos pueden trabajar en paralelo en diferentes micro aplicaciones, acelerando el proceso de desarrollo y despliegue.
- Agnósticos a la tecnología: Los Micro Frontends permiten el uso de diferentes tecnologías en cada micro aplicación. Esto brinda flexibilidad para adoptar la mejor tecnología para cada parte de la aplicación.
- Reducción de riesgos: Al desarrollar micro aplicaciones de manera independiente, se minimizan los riesgos de que un cambio en una parte de la aplicación afecte negativamente a otras partes.
Implementación de los Micro Frontends
Para implementar Micro Frontends, Rafael nos muestra cómo usar Module Federation, un plugin de Webpack que permite compartir y consumir código entre diferentes aplicaciones de manera dinámica. Esto es esencial para que las micro aplicaciones puedan integrarse y funcionar como una sola aplicación cohesiva.
Module Federation: Ejemplo de Código
En su demostración, Rafael presenta una aplicación de ecommerce con una barra de navegación desarrollada en React y un listado de productos en Angular. Ambas partes se comunican a través de eventos y comparten datos utilizando Module Federation.
Desventajas y Retos de los Micro Frontends
- Complejidad adicional: Cada micro aplicación necesita su propio ciclo de vida de desarrollo, lo que puede aumentar la complejidad y los costos.
- Performance: Es crucial optimizar la carga inicial de la aplicación para evitar problemas de rendimiento.
- Versionado: Gestionar versiones puede ser complicado, especialmente cuando hay múltiples micro aplicaciones que necesitan actualizarse simultáneamente.
- Comunicación entre micro aplicaciones: Evitar dependencias fuertes entre micro aplicaciones es fundamental. Rafael recomienda utilizar técnicas como query params, custom events de JavaScript, o almacenamiento local para comunicar datos entre micro aplicaciones.
Conclusión
Los Micro Frontends y Module Federation ofrecen una arquitectura flexible y escalable para aplicaciones front-end grandes y complejas. Aunque hay desafíos, las ventajas en términos de desacoplamiento, desarrollo paralelo y flexibilidad tecnológica los convierten en una opción atractiva para proyectos ambiciosos.
