Durante los últimos años, el desarrollo de una página o aplicación web se ha centrado principalmente en construir una aplicación de navegador robusta y multifuncional, conocida como Single Page Application (SPA), cuyo objetivo es dar una experiencia fluida a los usuarios, simulando una aplicación de escritorio.
Con este tipo de desarrollos los recursos de la aplicación se cargan una única vez al iniciarse, o se van cargando dinámicamente a medida que el usuario navega por la aplicación.
En cualquiera de los dos casos, la página no tiene que cargarse de nuevo en ningún punto del proceso, y todas las funcionalidades forman parte de la misma aplicación, utilizando el mismo framework (Angular, React, Vue…).
Micro frontends, un nuevo enfoque para optimizar la eficiencia de los equipos de trabajo
Como contraposición al modelo SPA surgen las arquitecturas basadas en micro frontends, trasladando el concepto de microservicios propio del desarrollo de backends al desarrollo de frontends, de modo que la solución web final que muestra el navegador está compuesta por múltiples aplicaciones web o micro frontends.
Este enfoque permite descomponer la aplicación web en “micro partes”, haciendo que el desarrollo sea mucho más modular, ya que cada micro frontend corresponde a una funcionalidad específica y totalmente independiente del resto, con despliegues separados, y que pueden estar construidos en frameworks distintos.
Ventajas de las arquitecturas micro frontend
- El conjunto de desarrollo se simplifica dividiendo el proyecto en aplicaciones más sencillas.
- Cada micro frontend puede ser creado por un equipo de desarrollo diferente ya que las aplicaciones son independientes, y se minimizan las dependencias entre ellas.
- Las aplicaciones son mucho más fáciles de mantener y se pueden actualizar siguiendo su propia planificación, ya que no afectan al comportamiento del resto de aplicaciones.
- La división del conjunto de la aplicación en micro frontends permite un mayor control y mejora su escalabilidad.
Sin embargo, también hay que tener en cuenta que esta división puede conducir a la aparición de un exceso de código duplicado, y a la necesidad de comunicación extra entre micro frontends que podría llegar a disminuir el rendimiento de la página web.
Teniendo en cuenta estos factores, es imprescindible una planificación óptima de los diferentes micro frontends a desarrollar, definiendo claramente las funcionalidades que engloba cada uno para maximizar la reutilización de código y reducir las necesidades de comunicación con los demás micro frontends a momentos puntuales.
Trabajando con arquitecturas micro frontends
El trabajo con arquitecturas micro frontends se pueden dividir en 2 grandes partes.
Por un lado, los distintos micro frontends que componen el conjunto de funcionalidades independientes de la página web.
Y por otro lado, el componente integrador que orquesta dichos micro frontends, es decir, establecer un flujo o jerarquía de acción que marque cuándo se tienen que mostrar los micro frontends y cuándo no.
En Mytra esto lo conseguimos utilizando la librería single-spa, que permite crear, tanto el componente integrador (Root Config), como los micro frontends en la gran mayoría de los frameworks actuales como Angular, React o Vue.
Una de las características más interesantes de esta librería es que también dispone de las herramientas necesarias para migrar aplicaciones ya creadas a una estructura de micro frontend, pudiendo conformar la arquitectura con poco esfuerzo.
¿Te ha gustado?
Compártelo en redes sociales
