¿Qué es un micro frontend?

La mayoría de los desarrolladores ya han oído hablar de la arquitectura de microservicios, pero la micro frontend es un término mucho menos conocido. Como su nombre lo sugiere, la microfrontend es similar en concepto a los microservicios. Intenta resolver muchos de los mismos problemas que presentan las aplicaciones monolíticas. Son demasiado grandes, difíciles de trabajar y difíciles de hacer cambios. Incorporar a nuevas personas para que trabajen en ellas puede ser un problema. Además, si varios equipos de personas están trabajando en diferentes partes de la aplicación, deberán coordinar todos sus cambios entre sí.

Los microservicios lo ayudan a dividir el backend en servicios más independientes. El mismo enfoque se puede utilizar para dividir aplicaciones de una sola página (SPA) en aplicaciones más pequeñas, con la necesidad adicional de un “orquestador” que pueda volver a unir diferentes partes para que el usuario siga experimentando comportamiento de SPA.

¿Cuáles son las alternativas a una arquitectura micro frontend?

Por supuesto, existen otras formas de lidiar con algunos de los aspectos no deseados de las aplicaciones enormes, como separar parte del código en su propio paquete de npm. Eso puede resolver parte del problema, como que la recuperación es demasiado grande. Por ejemplo, en Angular, también puede separar el código en un módulo que se puede cargar de forma perezosa. Esto puede permitir la división vertical de la aplicación en cierta medida. Pero también tiene sus desventajas, como tener que construir el proyecto de primer nivel cuando se actualiza una de las dependencias. Además, la experiencia del desarrollador no es tan excelente. Al usar cualquier tipo de marco, es una buena idea actualizar todo a la misma versión, pero es un gran compromiso que nadie está entusiasmado por hacer. También tiene la opción de unir varias aplicaciones a través de iframe. Los hace independientes, pero diría que tal vez son demasiado independientes, ya que la comunicación entre aplicaciones es un problema y también lo es compartir código, estilos, etc. 

¿Microfrontends al rescate?

Las microfrontends son una combinación de estos dos enfoques. Cada micro frontend es una aplicación separada que se compara con el SPA. No se compila a un index.html con archivos de estilo y script vinculados, sino a un módulo de JavaScript. En lugar de un iframe en la aplicación “principal”, el código define que cuando la URL coincide con algún patrón, el módulo se carga y se coloca en un lugar específico. Gracias a esto, podemos tener varias aplicaciones en la misma página que se pueden interconectar entre sí.

Como resultado, las microfrontends no necesitan manejar el diseño de la aplicación y las reglas básicas de CSS que solo se pueden manejar en la aplicación principal. Igualmente beneficioso es el hecho de que si tengo varias microfrontends usando la misma versión de React, puedo pedirles que compartan el módulo React. No es necesario descargarlo por separado para cada micro frontend. Tener diferentes versiones de un módulo JS tampoco es un problema.

La principal preocupación con las microfrontends es asegurarse de que sus estilos no se desborden a otras partes de la aplicación. Afortunadamente, los marcos de UI más comúnmente utilizados tienen herramientas para manejarlo con facilidad.

Herramientas para arquitecturas micro frontend

Escribir su propio código para cargar aplicaciones de microfrontend sería una tarea muy importante. Afortunadamente, existen varios marcos que manejan la organización y ofrecen herramientas para convertir las aplicaciones escritas en los marcos más populares al formato de microfrontend.

En Pure, elegimos un solo spa. Los principales beneficios que hemos encontrado son que es fácil de entender, ofrece una amplia asistencia para los marcos de trabajo de JS y tiene documentación detallada. Además, un solo spa ofrece varios tipos de micro frontends, cada uno adecuado para trabajos ligeramente diferentes.

En este momento, solo usamos el tipo “Aplicación” porque es el más fácil de usar para pasar de SPA a micro frontends. Otros tipos también requieren una arquitectura de microfrontend más detallada. Además, los autores de un solo spa recomiendan la “aplicación” como predeterminada.

Desarrollo de microfrontends utilizando el marco de trabajo de una sola SPA

En este momento, estamos usando un solo spa con una de nuestras aplicaciones más grandes que actualmente contiene alrededor de cinco micro frontends. A veces, diferentes equipos están trabajando en estas microfrontends que los principales equipos de desarrollo de aplicaciones. Afortunadamente, en los últimos seis meses desde que cambiamos a micro frontends, no hemos informado problemas. También estamos muy contentos de que la aplicación principal no esté tan hinchada como en el pasado y pueda actualizarse más fácilmente. Además, no nos preocupan los efectos secundarios al agregar una nueva funcionalidad, ya que generalmente se hace con un micro frontend. En un futuro cercano, nos gustaría dividir los frontends de otras aplicaciones grandes que estamos desarrollando en Pure, ya que es probable que los beneficios también sean bastante significativos para ellos. Le recomendamos probar micro frontends si se enfrenta a los mismos problemas que teníamos.