Micro-Frontends: Revolutionizing Frontend Development

♪♪♪ Hola a todos. Bienvenidos a esta charla relámpago. Primero que nada, gracias a JS Nation por este espacio. Es realmente genial estar aquí. Mi nombre es Natalia Rocha. Soy de Ecuador, un pequeño y hermoso país donde la política tiene más errores que el código heredado. Trabajo en Stack Builders como desarrolladora de software, y también toco la guitarra.

Pero entremos en el tema, micro-frontends. Así que tengo la sensación de que este tema, cuando se menciona, crea mucho revuelo y discusión. Así que hablemos un poco sobre ello y qué papel juega la federación de módulos en su implementación.

En pocas palabras, un micro-frontend es una arquitectura que descompone un gran frontend como este en piezas más pequeñas que son independientemente desplegables. Aquí está la clave, independientemente desplegables. Probablemente sea la idea central de los micro-frontends. Pero ¿por qué el revuelo? Porque este enfoque está ganando mucha tracción porque puede mejorar la escalabilidad, la autonomía del equipo y el mantenimiento del código. Así que en lugar de esperar a que un equipo termine la función para poder desplegar toda la aplicación, cada modelo está aislado, es flexible, y puede implementarse de manera independiente.

Así que tenemos dos formas principales de implementar micro-frontends, en tiempo de compilación y en tiempo de ejecución. En tiempo de compilación, donde los modelos se compilan juntos en tiempo de compilación, bibliotecas, por ejemplo, y en tiempo de ejecución, donde los modelos se cargan independientemente durante el tiempo de ejecución. La federación de módulos es un ejemplo de esta implementación, que es excelente para actualizaciones dinámicas en tiempo real entre equipos.

Entonces, ¿son nuevos los micro-frontends? Veamos. ¿Alguien ha usado iframes antes? ¿Sí? ¿Alguien ha usado bibliotecas antes? ¿Sí? Entonces tal vez hayas implementado una arquitectura de micro-frontend. Pero ¿cuándo llamarías a una biblioteca o un iframe un micro-frontend? Porque a diario, todos usamos bibliotecas para agregar funcionalidades, utilidades, incluso marcos completos a nuestras aplicaciones. Así que me gusta pensar que la arquitectura o el modelo mental que defines para tu proyecto y el caso de uso de cómo pretendes separar la aplicación en una biblioteca o un iframe o un modelo federado es lo que lo convierte en un micro-frontend. Por ejemplo, en una aplicación de cine, los equipos desarrollan por separado un modelo de selección de asientos y de perfil de usuario. Así que esto les da la posibilidad de trabajar de manera independiente, teniendo la oportunidad de moverse más rápido, para bien o para mal. ¿Verdad?

Ahora saltemos un poco a la implementación. La federación de módulos es una forma de implementar esta arquitectura. Así que te permite exponer módulos como funciones, componentes, hooks, y usarlos como remotos que se cargarán en tiempo de ejecución. Fue introducido en Webpack 5. Zach Jackson, el creador, debería estar por aquí. Y la versión 2.0 fue lanzada este año.

Un caso de uso real que tuvimos, al que me gustaría llamar el patrón de estrangulamiento, nos permitió construir una nueva aplicación con características de usuario de otra aplicación que estaba programada para ser descontinuada. Así que esto nos ayudó a movernos de manera independiente mientras manteníamos la opción de intercambiar aplicaciones en el futuro. Y ese es el caso de uso donde lo encontramos realmente valioso.

Pero enfrentamos varios desafíos. Usamos TypeScript. Entonces, como los modelos se cargan en tiempo de ejecución desde un manifiesto, ¿cómo obtenemos seguridad de tipos en el desarrollo? Bueno, eliminamos el TypeScript. No, es broma. Extraímos los tipos. Y también la federación de módulos 2.0 introdujo la posibilidad de extraer los tipos de los modelos federados. Lo hace automáticamente. Y ahora pueden ser parte de los activos que se exponen en el manifiesto. Así que cuando declaras un modelo como remoto, el complemento descarga automáticamente los tipos y puedes usarlos como una ruta de respaldo y tendrás todos los beneficios de TypeScript en tu proyecto.

También las pruebas. ¿Cómo pruebas algo que se consume en tiempo de ejecución? Puede volverse desafiante. Así que, lo mismo. Eliminamos las pruebas. Hay varios enfoques que podemos usar para esto. Y, por ejemplo, las responsabilidades de prueba deben mantenerse para cada micro frontend, evitando la superposición, y también manteniéndolos lo más desacoplados posible para facilitarte la vida. También tener pruebas A-B, que es algo que hicimos. Por ejemplo, tener un módulo que solo tiene lo básico que se necesita para probar la funcionalidad cruzada y tener otro que esté completamente equipado para Prov. Las herramientas de desarrollo que incluyó la federación de módulos 2.0 y también las actualizaciones de manifiestos ayudan mucho aquí porque puedes cargar diferentes manifiestos inmediatamente para cambiar y probar varios enfoques sin tiempo.

También existe este concepto de federación de sitios completos donde realmente puedes ver la aplicación como un todo. Por ejemplo, cuando solo estabas desarrollando el selector de semillas, es incómodo ver solo esa experiencia. Así que lo que haces es exportar también el host y crear una dependencia circular para que puedas ver toda la aplicación. Así que puedes probar la funcionalidad de toda la aplicación. También enfrentamos más desafíos. Por ejemplo, rendimiento, estilo, gestión de etapas y otros. Así que voy a hacer una charla completa sobre esto en la fecha remota. Te invito a unirte si puedes.

Pero por hoy, para concluir, me gustaría dejarte con este mensaje. ¿Deberías lanzarte a los micro frontends de inmediato? Si los desafíos de escalabilidad y despliegues independientes resuenan contigo, creo que vale la pena explorarlo. Y también es bastante útil encontrar el caso de uso o la solución que necesitas en todos estos diferentes enfoques que te dan los micro frontends. Además, al encontrar el enfoque de micro frontend a usar, descubrirás que todo es una compensación. Y tendrás que elegir el que más te beneficie. Esta es una frase que surgió mucho en nuestras discusiones de equipo. Y por cierto, me gustaría dar un gran agradecimiento a mi equipo, los range vendors. No puedo agradecerles lo suficiente por todo su conocimiento compartido y profesionalismo. Y eso es todo. Espero que sigas disfrutando de la conferencia, y nos vemos por ahí.