El uso de microfrontends nos permite utilizar y gestionar diferentes tecnologías de forma independiente incluso cuando estas tecnologías están acopladas entre sí. Esto se traduce en una mejor usabilidad, mayor autonomía del software y mayor agilidad en el desarrollo de procesos internos y externos. Algo que toda empresa del siglo XXI necesita para conseguir alcanzar los mejores resultados posibles.
Si quieres saber más sobre qué son los microfrontends y todo lo que pueden hacer por tu compañía sigue leyendo y te lo contamos.
¿Qué son los microfrontends?
Microfrontend o Module Federation es una forma de desarrollar páginas web que consiste en la combinación de diferentes compilaciones con el objetivo de crear una única aplicación.
El término microfrontend surge en el año 2016. Hoy en día, en la parte de backend, se ha evolucionado hacia un backend modularizado en diferentes piezas. En cambio, el frontend aún sigue siendo considerado un bloque monolítico.
En este sentido, la tendencia actual es crear una aplicación de navegador potente y rica en características desde donde poder gestionar todo, también conocida como “single page app”.
¿Para qué sirve un microfrontend?
Un microfrontend es como un microservicio de backend pero que existe dentro de un navegador. El enfoque de los microfrontends es pensar en un sitio web (o aplicación web) como una composición de características que son propiedad de equipos independientes.
De este modo, los microfrontends son secciones de la interfaz de usuario. Estas secciones a menudo constan de docenas de componentes que usan framework como React, Vue y Angular para renderizar sus componentes.
Cada microfrontend puede ser administrado por un equipo diferente y puede ser implementado usando su propio framework. En este sentido, es práctico y se recomienda usar un solo framework para todos sus microfrontends, aunque, en la práctica, se pueden agregar frameworks adicionales al migrar o al experimentar.
Cada microfrontend tiene su repositorio git propio, su archivo package.json donde están las diferentes dependencias, y su propia configuración para la herramienta de compilación. Por lo tanto, también existe un CI/CD independiente por cada microfrontend.
Ventajas de los microfrontends
Las principales ventajas que nos ofrece utilizar microfrontends son las siguientes:
Nos permite la posibilidad utilizar diferentes tecnologías
Al usar microfrontends, se pueden tener al mismo tiempo diversas tecnologías como Vue, React o Angular entre otros, ya que se desarrollaran de forma independiente en cada microfrontends, diseñando aplicaciones autocontenidas que no dependen las unas de las otras.
Aislar el código del equipo
No hay necesidad de compartir tiempo de ejecución. Usar microfrontends permite la creación de aplicaciones independientes y sin necesidad de confiar en un estado compartido o variables globales.
Escalabilidad
Esta independencia de los microfrontends permite una aplicación escalable. En términos de negocio, y atendiendo a las necesidades del proyecto, nos permite no perder las cualidades que ya lo conforman y le añaden valor. Además, también permiten añadir otras funcionalidades nuevas e ir acoplando otras de forma progresiva sin depender del código ya existente.
Código mantenible y reducido
Cada desarrollador trabaja de forma independiente en cada microfrontend. De esta forma, es posible hacer desarrollos paralelos y aislados. En consecuencia, el código se verá reducido, ya que cada microfrontend es una pequeña pieza y no funciona como un frontend monolítico.
Desarrollo independiente y autonomía
Los microfrontends puede desarrollarse en paralelo y no depender de otros desarrollos. En este sentido, se pueden hacer diferentes versiones de cada microfrontend y testearse y desplegarse de forma individual e independiente entre sí.
Optimización y organización de los recursos y equipos de la empresa
Al ser independientes, los equipos de desarrollo de los microfrontends pueden trabajar sobre las diferentes features de forma autónoma. Además, todos pueden trabajar en paralelo y de forma organizada, lo que se traduce en un acortamiento de los tiempos de desarrollo.
Desventajas de los microfrontends
Algunas de las principales desventajas de los microfrontends son las siguientes:
Alta complejidad operacional
Una de las desventajas más destacadas del uso de microfrontends es la alta complejidad operacional que implican. En este sentido, cada microfrontend debe desplegarse de forma independiente, lo que conlleva la correspondiente gestión de diferentes entornos y servidores.
Además, todo esto implica también un mayor gasto económico y de recursos para poder llevarlo a cabo.
Aumento del tamaño de las dependencias de la aplicación final
La aplicación final, donde convergen todos los microfrontends, puede encontrarse con un tamaño considerablemente superior cuando se usan microfrontends. Por ejemplo, esto podría suceder debido a la duplicidad de dependencias entre otros. En el caso de las dependencias, lo más recomendable es crear una biblioteca de dependencias compartidas.
Tipos de microfrontends
A grandes rasgos, encontramos tres tipos de microfrontends:
- Aplicaciones single-spa: son microfrontends que renderizan componentes para un conjunto de rutas específicas.
- Paquetes single-spa: son microfrontends que renderizan componentes sin controlar las rutas.
- Módulos de utilidad: son microfrontends que exportan lógica JavaScript compartida y sin renderizar componentes.
Conclusiones
Las bases del código se están volviendo cada vez más complejas, lo que implica una creciente necesidad de arquitecturas más escalables. En este sentido, surge la necesidad de poder escalar la entrega de software a través de equipos independientes y autónomos. Una posible solución a esta necesidad la encontramos en el uso de microfrontends, que nos permiten trabajar de forma independiente con cada una de las diferentes secciones de interfaz de usuario sin afectar al resto del código.
Esta tecnología es especialmente necesaria en proyectos de gran envergadura y de alta complejidad técnica, ya que permite trabajar de forma modularizada, distribuyendo de una forma más eficiente tanto los recursos técnicos como operacionales.
