Podcast - Microfrontends ¿qué son y cuándo usarlos?

Llevar a cabo un buen desarrollo frontend a medida que un proyecto va creciendo puede resultar, en muchos casos, un gran reto para el equipo de trabajo. En estas aplicaciones grandes no funciona el enfoque monolítico tradicional y recurrir a los microfrontends puede ser una buena manera de dar respuesta a este problema.

De todo esto vamos a hablar en este episodio. Comentamos las ventajas y desventajas de esta arquitectura y vemos algunos ejemplos para entender los conceptos que explicamos.

¿Qué son los microfrontends?

Es un término que surge por primera vez en 2016 a raíz de extender el concepto de los microservicios del lado del backend hacia el frontend. Al aplicar el mismo concepto de los microservicios pero en el frontend, se compone la interfaz de nuestra aplicación en distintos módulos o aplicaciones independientes especializadas cada una en funcionalidades concretas.

La idea principal es concebir la página web como un conjunto de aplicaciones independientes que se desarrollan, testean y despliegan de forma autónoma por un equipo de trabajo concreto, permitiendo una mayor flexibilidad, agilidad y reduciendo el acoplamiento y las dependencias entre ellos.

¿En qué consiste la técnica del plugin Module Federation?

El enfoque principal de Module Federation es crear módulos remotos, entendidos como piezas de código independientes que pueden ser compartidas entre diferentes aplicaciones.

Estos módulos nos facilitan el compartir información y recursos entre aplicaciones independientes, mejorando la modularidad, la reutilización de código y la flexibilidad en el desarrollo de aplicaciones web. Con unas pocas líneas de código en cada uno de los ficheros de configuración de Webpack, tenemos fácilmente definida la arquitectura.

Algunas ventajas de los microfrontends

• Equipos autónomos con total libertad de desarrollo, ya que cada uno está dedicado en una funcionalidad del negocio específica, capaces de entregar valor más ágilmente y mejorando la calidad.
• Mayor escalabilidad y confianza en el desarrollo dado que cada microfrontend está desacoplado del resto, reduciendo posibles incidencias y su impacto.
• Despliegues independientes garantizando la estabilidad del resto.
• Facilidad para las pruebas porque solo nos preocupamos de probar nuestra funcionalidad concreta.
• Poder usar varios frameworks, lo que nos puede venir bien si necesitamos incorporar nuevos equipos rápidamente sin tener que formarlos en la tecnología que estemos usando.

Desventajas de los microfrontends

• Complejidad en la integración y en el mantenimiento al tratarse de muchas aplicaciones que “viven” bajo el mismo contenedor, pero se despliegan de manera independiente en sus respectivas direcciones, entornos, etc.
• La aplicación contenedora del resto de microfrontends se puede ver afectada por un aumento considerable en el tamaño del bundle debido a posibles duplicidades en las dependencias que usa cada uno de los microfrontend.
• Posibles problemas de rendimiento por la necesidad de cargar múltiples recursos en paralelo y las peticiones http por cada microfrontend.
• La gestión del estado global de la aplicación puede volverse más costosa ya que tendremos que compartir los datos entre los distintos microfrontends.

¿Quieres saber más sobre este tipo de arquitecturas?

Te recomendamos que le eches un vistazo a nuestro post: Introducción a la arquitectura de microfrontends con un ejemplo en React.

Escucha aquí todos nuestros podcast

Puedes escucharlos en las principales plataformas de podcast: Ivoox, Spotify, YouTube, Google Podcast, Apple Podcast y Amazon Music.