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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
Wesley Campbell
Las fábricas digitales están transformando las experiencias del cliente en el sector financiero, ofreciendo un enfoque transformador para construir y ofrecer niveles de experiencia en formas que el desarrollo tradicional no logra.
Alexander Rodriguez
Las IFs son blancos atractivos para ciberataques debido al tipo de información que gestionan. Un SGSI protege la confidencialidad, disponibilidad e integridad de la información. Aprende a implementar un SGSI para resguardar los datos de tu organización.
Andy Bermúdez
¿Has pensado en la importancia que las experiencias de usuario de tus equipos internos tiene para optimizar el rendimiento de tu organización, evitar errores, y mejorar la satisfacción del cliente?
Mariano González
Uno de cada tres clientes abandona una marca después de solo una mala experiencia. Tomar decisiones basadas en datos al diseñar las experiencias para tus clientes es fundamental para el éxito de tus productos digitales.
Alexander Rodriguez
Comprender los riesgos de ciberseguridad para grandes organizaciones es vital. Su contexto único, mercados y amenazas emergentes requieren monitoreo y mejora constante para tener estrategias de protección sólidas.
