Compartir Insight en:

Los micro frontends son una alternativa de diseño de aplicaciones web que cada vez gana más popularidad entre arquitectos y desarrolladores, promete aplicaciones más eficientes, mayor independencia para los equipos y proyectos más adaptables a los cambios tecnológicos.

Aunque el concepto de micro frontend aún es relativamente nuevo, ya debe estar presente en el radar de interés de todo desarrollador frontend en especial porque un creciente número de grandes empresas como IKEA, SoundCloud o Spotify lo están utilizando con éxito para gestionar sus aplicaciones web.

¿Qué son los micro frontends?

Conceptualmente los micro frontends son una extensión al frontend de los micro servicios, una arquitectura muy popular en el mundo del backend que consiste en dividir las operaciones de una aplicación en una serie de mini aplicaciones o micro servicios que se distribuyen de forma independiente y trabajan en conjunto para orquestar una aplicación completa.

En el siguiente gráfico vemos una de las formas más comunes de trabajo para una arquitectura de micro frontends y con la que posiblemente ya tengas experiencia en tus proyectos.

Tenemos aquí una serie de servicios especializados en una tarea o funcionalidad de negocio que interactúan con el frontend a través de una API que se utiliza para desplegar información en pantalla o invocar procesos en el servidor.

El objetivo de distribuir los servicios en pequeñas piezas independientes es crear un sistema más resiliente donde si uno de los servicios falla, los demás puedan seguir en funcionamiento y mantener la operación trabajando, así sea parcialmente.

Esta arquitectura también le permite a los equipos de desarrolladores trabajar de forma independiente y especializarse en los detalles de un servicio en particular mientras se reducen dependencias de otros equipos que trabajan en servicios separados. Sin embargo, aun con todos esos beneficios en el backend, el frontend siguió evolucionando en una arquitectura mayoritariamente monolítica. Piensa por ejemplo en la clásica aplicación SPA Angular donde todo está integrado en un solo bloque y aunque efectivamente tengamos módulos y componentes independientes, si un equipo introduce un pequeño error o una fuga de memoria, el trabajo de todos y la estabilidad de la aplicación completa se puede ver comprometida.

Aquí es justamente donde entran los micro frontends en acción, extrapolando esos conceptos de los micro servicios independientes al frontend. Entonces, en vez de separar la aplicación frontend en módulos se lleva esa encapsulación al extremo y se crean aplicaciones verdaderamente independientes que pueden especializarse - al igual que lo hacen los micro servicios - en un área específica del negocio.

Bajo esta premisa, pensemos por ejemplo en una aplicación web de una fintech, usando una arquitectura combinada de micro frontends y micro servicios puede tener segmentos completos de negocio como atención a clientes, gestión de tarjetas o productos financieros, completamente separados a nivel de equipos de trabajo, código y hasta infraestructura. Cada micro frontend puede consumir sus propias APIs y usar su propio código sin afectar al resto de la aplicación.

Dejamos atrás el frontend monolítico para trabajar en una aplicación desacoplada y enfocada en segmentos completos de negocio, la aplicación monolítica de la figura 1 pasa a verse así:

Aunque conceptualmente los micro frontends y los micro servicios son muy similares, si has trabajado en frontend sabes que las implementaciones pueden variar mucho, desde el uso de herramientas como Angular, React o Vue hasta JavaScript "Vainilla" o Webcomponents, cada uno de ellos con capacidades y limitaciones diferentes.

A pesar de todas esas diferencias, podemos encontrar patrones y elementos en común que caracterizan a una aplicación basada en micro frontends:

Son agnósticos de la tecnología

Todo desarrollador frontend sabe que existe una interminable lista de librerías y frameworks de moda que prometen cambiarlo todo y que, de acuerdo al proyecto, se tendrá que escoger una de estas opciones heredando sus ventajas y desventajas. Una aplicación basada en micro frontends al tener sus partes operando independientemente puede eliminar esa incertidumbre.

Esto significa que teóricamente podemos tener una parte de la aplicación basada en Vue y otra parte en React sin que eso genere incompatibilidad. Así mismo, si en el futuro se decide que la mejor forma de abordar un nuevo segmento de negocio significa migrar a otra librería o framework, la implementación debería soportar esos cambios sin afectar la operación.

El código de cada equipo está encapsulado

Cada micro frontend es una aplicación separada, con reglas y alcance propio, lo que ocurra allí no debe afectar a ninguna otra parte de la aplicación, aunque coexistan en el mismo HTML. De la misma forma, cada equipo debe tener autonomía para crear su código reduciendo o eliminando las dependencias de código con otros equipos.

Es importante mencionar que aunque exista una independencia operativa entre los micro frontends es totalmente posible la comunicación entre ellos a través de APIs, Bases de datos y variables de sesión.

Tienen una distribución independiente

Un verdadero micro frontend debe tener un nivel de desacoplamiento tal que cada parte pueda ser empaquetada y publicada de forma independiente sin que sea necesario recompilar toda la aplicación.

Three developers working on different parts of a web page.

Beneficios de usar micro frontends

Puede parecer que los micro frontends agregan más complejidad a un sitio web y esto es totalmente cierto si estás trabajando con una aplicación de pequeña a mediana escala, pero si hablamos de proyectos de gran escala con cientos de personas trabajando en ellos y múltiples áreas de negocio en juego, los micro frontends realmente pueden hacer una diferencia en la calidad del código y en la velocidad en que se entrega. 

Resiliencia

Al separar una aplicación en partes más pequeñas completamente funcionales, eliminas el problema de los errores globales que acompañan a las aplicaciones monolíticas, si un área de negocio falla por cualquier razón, el resto de la aplicación puede continuar operativa.

Reducción de complejidad y dependencias

Al reemplazar la arquitectura monolítica y especializar cada parte de la aplicación, se reduce la necesidad de mantener código innecesario dentro de la aplicación, esto permite que cada micro frontend haga solo su área de operación y nada más, reduciendo la complejidad general de su código. También se reducen o eliminan las dependencias de elementos externos o equipos que tengan una velocidad diferente.

Código más manejable y fácil de mantener

Una arquitectura de micro frontends permite separar los codebases en polyrepos o monorepos, según sea necesario, pero creando áreas separadas para cada equipo, para que trabaje con su propia base de código especializada sin generar dependencias o conflictos con las demás áreas de la aplicación. Se reduce la introducción de librerías innecesarias y al tener una especialización completa las pruebas unitarias y de integración, pueden ejecutarse más rápida y acotadamente.

Agilidad y adaptabilidad

Un producto de micro frontends es notablemente más ágil que uno monolítico, porque permite que cada equipo tenga independencia total de los demás para definir sus objetivos y tiempos de entrega, sin que esto afecte en lo más mínimo al resto de los desarrolladores. Además se puede mantener un sistema de releases calendarizados o utilizando un sistema de entrega continua (también llamado CD o Continous Delivery) según las necesidades del producto.

También, al tener independencia total entre si, el producto puede adaptarse rápidamente a cualquier tecnología o trabajar más de una en paralelo.

Micro frontends en Modyo

Implementar micro frontends en Modyo es sencillo, puedes comenzar a usarlos ahora mismo gracias a los Widgets, que permiten inyectar código HTML, JavaScript y CSS dentro de cualquier aplicación. 

Con los widgets, los desarrolladores tienen control total para implementar la arquitectura de su elección mientras mantienen los elementos que caracterizan un micro frontend:

Son agnósticos de la tecnología

Sin importar que elijas Angular, React, Vue o tu propia implementación de Javascript, puedes inyectar el código en cualquier parte de tu aplicación, es incluso posible mezclar diferentes micro frontends en un mismo documento sin generar conflictos.

El código de cada equipo está encapsulado

En Modyo pueden trabajar simultáneamente diferentes equipos de desarrolladores y roles de usuario, creando áreas exclusivas para cada uno de ellos. El código de los Widgets se encuentra totalmente encapsulado y tiene opciones de configuración adicionales como acceso a variables globales o soporte para cargas sincrónicas y asincrónicas.

Tienen una distribución independiente

Los widgets no necesitan una recompilación de la aplicación ni afecta ninguna otra funcionalidad activa, cuando un equipo está listo para el deploy de su micro frontend sólo debe activar el proceso de publicación y el código estará disponible en el runtime de su aplicación. 

Conclusión

Los micro frontends ya son una tendencia importante de arquitectura en el frontend y permiten crear aplicaciones desacopladas en partes independientes y mayor tolerancia a errores.

Al utilizar diferentes tecnologías y gracias a que pueden publicarse independientemente, los equipos que usan micro frontends pueden reducir dependencias de otros equipos y entregar más rápidamente.

Si deseas comenzar a utilizar micro frontends hoy mismo, Modyo soporta esta tecnología sin comprometer decisiones de arquitectura, ofreciendo total libertad para crear micro frontends a la medida.

Photo de Maksim Shutov en Unsplash