Micro-Frontends con React y Federación de Módulos Vite

Rate this content
Bookmark

Desde mi experiencia, una de las cosas más difíciles es compartir información entre microfrontends, por lo que en esta charla me gustaría explicar varias formas de compartir un sistema de diseño para garantizar la uniformidad de la aplicación. Otra cosa difícil es compartir dependencias, afortunadamente con la federación de módulos se puede hacer, pero ¿cómo puedo usar diferentes versiones de la misma biblioteca y cómo funciona detrás de escena?


Soy el creador de la biblioteca module-federation/vite, con React y esta biblioteca, me gustaría mostrarte cómo puedes lograr estos resultados configurando todo correctamente.

20 min
23 Oct, 2023

AI Generated Video Summary

Los microfrontends es una arquitectura utilizada por grandes empresas para dividir aplicaciones frontend monolíticas en partes manejables. Mantener un aspecto y sensación consistentes en diferentes microfrontends es un desafío. El compartir estilos se puede hacer a través de Vanilla CSS, módulos CSS o CSS en JS. Las variables de JavaScript se pueden usar en estilos, pero la legibilidad y la sobrecarga en tiempo de ejecución son consideraciones. El compartir estado en microfrontends se puede lograr a través de eventos personalizados, canales de transmisión, gestores de estado compartidos o implementaciones personalizadas de PubSub. La federación de módulos con Vite permite la composición del cliente y el compartir dependencias. La configuración es similar a Webpack, y el trabajo futuro incluye trabajar en el marco QUIC.

1. Introducción a Microfrontends

Short description:

Microfrontends es una arquitectura que nos permite dividir una aplicación frontend monolítica en múltiples microfrontends. Podemos tener divisiones verticales, donde cada microfrontend es responsable de una página específica o varias páginas, o divisiones horizontales, donde diferentes equipos gestionan diferentes partes de la aplicación. Esta arquitectura es utilizada por muchas grandes empresas para gestionar fácilmente su base de código frontend. Incluso si tienes una pequeña aplicación, puedes usar microfrontends para reemplazar gradualmente partes de tu aplicación heredada. Sin embargo, un desafío es mantener un aspecto y sensación consistentes en diferentes microfrontends.

¡Hola a todos! Bienvenidos a esta charla, Microfrontends con React y Federación de Módulos con Vitz. Me gustaría, con Microfrontends... Sé que esta es una Conferencia Avanzada de React, pero me gustaría compartir con ustedes la arquitectura de Microfrontends para aquellos que realmente no la conocen bien en profundidad.

Entonces, Microfrontends es más o menos lo que son los microservicios, pero para el front-end. Si tenemos un monolito, podemos dividir la parte del servidor en microservicios para gestionar mejor los endpoints y también las características, pero en este caso particular, el front-end es un monolito. Así que podemos dividir el monolito, el monolito del front-end en muchos microfrontends, y eso es más o menos la arquitectura. Podemos tener varios dominios verticales, por lo que podemos tener un frontend en React, otro en Angular, y por ejemplo, otro en Vue. Y teóricamente, microfrontends es ambos, por lo que la parte del servidor y también la parte del frontend. Pero, ¿cómo podemos dividir el monolito? Así que podemos dividir nuestra aplicación, la aplicación frontend, de diferentes maneras.

Tenemos una división vertical, por lo que un microfrontend para cada página o varias páginas. El equipo azul se encarga de la página de inicio, y el equipo rojo gestiona el proceso de pago. O podemos dividir de manera horizontal. El equipo azul es el propietario del menú y la barra de aplicaciones, y el rojo, el verde y el rojo están gestionando los paneles de control. Así que esto es más o menos cómo podemos dividir el monolito de manera vertical y horizontal. Pero, ¿necesitamos, necesito este tipo de arquitectura?

Estas son algunas de las empresas que están utilizando micro frontend, y como puedes notar, estas son grandes empresas. Así que esta arquitectura nace para dividir la aplicación frontend y gestionar fácilmente la base de código en varios equipos. Pero si tengo una aplicación mediana o pequeña, puedo usar este concepto, esta arquitectura para el patrón Strangler. Así que si tengo una aplicación heredada, puedo reemplazar partes de mi aplicación para renovarla. Así que si tienes una casa y quieres, por ejemplo, renovar tu jardín, puedes arrancar todo el viejo jardín y poner uno nuevo. Así que esa es más o menos la idea que podemos aplicar a nuestra aplicación heredada. Así que hay muchos desafíos en este proceso. Uno de ellos es el aspecto y la sensación. Así que aquí puedes ver que es una casa moderna. Así que si entramos en esta casa moderna, visitamos un poco la ubicación. Podemos ver la cocina que es una cocina moderna. Podemos ir a la sala de estar. Pero si vamos al baño, y entramos en el dormitorio, y vemos este estilo diferente, es un poco extraño. Así que puedes imaginar este concepto en nuestra aplicación. Entramos en la página de inicio, y es realmente genial. Vamos a la página del producto, y también es genial.

2. Gestión de Estilos en Microfrontends

Short description:

Necesitamos compartir un estilo a través de toda la aplicación para evitar diferentes estilos en diferentes partes. Podemos usar Vanilla CSS e inyectar hojas de estilo, pero podemos enfrentarnos a conflictos. Para evitar conflictos, podemos usar el paquete npm post CSS prefix wrap o post CSS prefixer para Vite. Otro enfoque es usar módulos CSS o CSS en JS, que permite estilos de alcance local y una fácil gestión.

Vamos a la caja, y podemos ver un estilo completamente diferente. Por lo tanto, el aspecto y la sensación de la aplicación deben ser los mismos para evitar este tipo de situaciones problemáticas o extrañas. Entonces, necesitamos compartir un estilo a través de toda la aplicación, ¿pero cómo podemos compartir estos estilos?

Entonces, podemos usar Vanilla CSS. Entonces, tenemos Microfrontend A y Microfrontend B. Simplemente podemos inyectar la hoja de estilo dentro de la página y podemos definir dos clases, card title. Entonces, Microfrontend A tiene un card title con el color negro y tenemos Microfrontend B con el mismo nombre con un color rojo. Al final, si inyectamos en este orden específico las hojas de estilo, tenemos el resultado es card title rojo, porque el último CSS gana y sobrescribe el otro. Entonces, ¿cómo podemos evitar en este tipo de situación este problema?

Podemos usar el paquete npm. Esto es para webpack, es post CSS prefix wrap. Básicamente, lo que está haciendo, es envolviendo nuestro CSS y poniendo un prefijo para todo el CSS para evitar estos conflictos. Es bastante usado, más de 19,000 de descargas, descargas semanales en npm. Pero si tu aplicación está en Vite, puedes usar post CSS prefixer. Como puedes ver aquí, estamos definiendo el selector, y la salida es prefix underscore underscore selector. Entonces, está envolviendo para nosotros en el proceso de construcción, está envolviendo el CSS y nos da la posibilidad de definir un CSS sin chocar con otro CSS de otros microfrontends.

Tenemos la posibilidad independiente de definir nuestra clase y usarla. O podemos usar otra forma es usar CSS modules. Entonces, podemos definir este tipo de archivo, así que card.module.css, definimos nuestro CSS, así card background color black. Luego podemos importar este module.css en nuestro componente React. Y podemos usar este objeto styles.card. Entonces, esta tarjeta es básicamente nuestro CSS, podemos inyectarla en el JSX de nuestro componente React. Y la salida del proceso de construcción será más o menos así. Entonces, card este es el nombre del módulo. Card es el nombre principal del CSS. Y tenemos este ID único que evita conflictos con el otro CSS. Y esto es de alcance local. Entonces, no tenemos un problema con otras propiedades de carrito, carrito CSS en los otros archivos.

Otra forma de gestionar el estilo es CSS en JS. Es un estilo de alcance local, como el modelo CSS que vimos antes, así que evitamos conflictos. Es un buen enfoque para la co-ubicación porque podemos co-ubicar el CSS en nuestro archivo JavaScript o archivo TypeScript, así en nuestro componente React. El CSS está realmente cerca de nuestro componente, por lo que es fácil gestionar el estilo y las demás cosas.

3. Uso de Variables JavaScript en Estilos

Short description:

Puedes usar variables JavaScript en estilos, lo que resulta conveniente para usar variables específicas para el padding u otros propósitos. Sin embargo, hay algunos costos asociados con este enfoque. La legibilidad del código principal se vuelve más desafiante, especialmente al usar módulos CSS, ya que el hash específico utilizado en los módulos CSS requiere inspeccionar el DevTool para entender mejor el CSS. Además, CSS en JS agrega una sobrecarga en tiempo de ejecución a la aplicación.

Puedes usar variables JavaScript en estilos, así que si tienes una variable específica para padding o lo que sea, puedes usar esta variable en el CSS y es realmente útil. Hay algunos costos. La legibilidad del código principal, como el módulo CSS, en el DevTool de Chrome, o tu navegador, es un poco difícil, porque si recuerdas en el módulo CSS, tenemos este hash específico, por lo que necesitamos mirar en el DevTool para entender mejor nuestro CSS. Y este CSS específico en JS agrega una sobrecarga en runtime. Entonces, cuando nuestra aplicación está en ejecución, está agregando un poco de carga para nuestra aplicación.

4. Compartiendo Estado en Microfrontends

Short description:

Para compartir el estado en microfrontends, podemos usar eventos personalizados, canales de transmisión, o un administrador de estado compartido como ZooStand. Sin embargo, es importante compartir la menor información posible para evitar acoplar los microfrontends. Otra opción es crear una implementación personalizada de PubSub, pero puede introducir dependencias entre microfrontends y depender del objeto window.

Otro gran problema a resolver en este tipo de architecture es compartir el estado. Así que tenemos múltiples formas de compartir el estado. Podemos usar un evento personalizado. Así que un microfrontend puede llamar a eventos personalizados, y otro puede escucharlos. Esta es una implementación realmente básica, y estamos usando la API Vanilla del navegador. Así que es realmente bueno. Podemos usar el canal de transmisión. Y este enfoque nos permite usar Win, pasar la información a través de ventanas, pestañas, iframes. Así que si tenemos algunos iframes, es un enfoque realmente agradable.

Podemos tener un administrador de estado compartido. Por ejemplo, podemos tener un administrador de estado ZooStand. Y podemos compartir la instancia de este ZooStand a través de nuestros microfrontends. Ten en cuenta que en tu architecture, necesitas compartir la menor información posible, porque puedes compartir como el tema u otras cosas. Pero no compartas demasiado porque el enfoque básico para los microfrontends es desacoplar, el despliegue y también el desarrollo. Así que si compartes demasiado con otros microfrontends, por supuesto, estás acoplando los microfrontends, y es difícil terminar con este problema.

Así que tenemos la última posibilidad, podemos tener una implementación personalizada de PubSub, así podemos crear nuestra propia implementación para gestionar el estado a través de nuestros microfrontends. Así que aquí hay un pequeño fragmento. Tomé este pequeño fragmento de este artículo de mi amigo Florian Rappel. Así que gracias. Me gustaría compartir y mirar este fragmento contigo. Así que este es el código de la shell de la aplicación, la shell de la aplicación que está cargando todos los microfrontends. Así que estamos definiendo en la ventana una función de publicación, una función de suscripción y una función de cancelación de suscripción y luego tenemos 11 oyentes para PubSub. En el micro frontend A básicamente podemos suscribirnos a este tema micro frontend A, y en el micro frontend B podemos publicar algo en este tema específico. Así que si llamamos a window.publish, estamos enviando un evento con detalle y tema y mensaje. Con este truco particular de una variable estamos llamando al final a los manejadores de temas porque el window.subscribe() aquí está guardando todas las funciones de mensaje. Así que cuando llega un mensaje, alguien publica algo en un tema, en el manejador de temas estamos recorriendo todos estos manejadores de temas y estamos llamando a la función. Así que finalmente al final de este proceso, el microfrontend A es capaz de obtener su información. No me gusta mucho esta implementación, es una implementación simple y puedes empezar desde ella, por eso decidí poner este fragmento en las diapositivas. No me gusta porque el microfrontend B necesita saber, digamos, que hay otro microfrontend y como mencionamos antes, nos gustaría desacoplar lo más posible nuestro proceso. Y otra cosa que no me gusta mucho es el objeto window, así que estamos usando la ventana como un objeto compartido a través de toda nuestra architecture.

5. Composición del Cliente con Federación de Módulos y Vite

Short description:

En esta charla, exploraremos la composición del cliente utilizando la federación de módulos con Vite. La federación de módulos nos permite compartir dependencias y crear una arquitectura más modular. Con el lanzamiento del modelo de federación de módulos de código abierto por Zach Jackson, ahora podemos usar la federación de módulos con Vite. Creé una biblioteca para la federación de módulos con Vite, que se puede usar con varios marcos. La implementación de la federación de módulos de Vite es similar a la de Webpack, lo que permite un uso mixto y combinado. Para usar la federación de módulos con Vite, es necesario definir una configuración especial y esperar la función de federación.

Pero como mencioné antes, para iniciar un enfoque mínimo y luego podemos agregar la característica y otra característica, es realmente genial.

Bueno, entonces podemos componer esta architecture de muchas maneras. Podemos componer la architecture en el lado del servidor, por lo que el servidor está obteniendo toda la información y está creando nuestra aplicación para nosotros porque al final, la aplicación siempre es una, por lo que el usuario final pasa por una aplicación. Y también podemos tener la composición de borde, por lo que para el Lambda o CDN, podemos componer todos los micro-frontends y podemos tener la composición del cliente.

Entonces, en esta charla, me gustaría entrar en la composición del cliente y para la composición del cliente, tenemos una federación de módulos. Entonces tenemos un Webpack. Y en agosto de 2022, Zach Jackson, creo que el principal chico que está buscando la federación de módulos, lanzó al código abierto, este modelo específico. Así que trabajé en programación en pareja con mi amigo, Manfred Steyer. Y con esta posibilidad particular que Zach Jackson nos dio al abrir el código de la biblioteca, creamos la posibilidad de hacer una federación de módulos con Vite. Entonces, el otro principal bundler que existe. Entonces Manfred creó esta capa de federación nativa. Entonces, es una capa de una API nativa, y también creó la implementación de angular encima de esta capa. Yo creé una federación de módulos de propósito general Vite. Y puedes usar esta biblioteca para Svelte, React, Vue o lo que sea. Y ahora también podemos usar la federación de módulos con Vite. Entonces, esto es realmente, realmente impresionante. Creé esta biblioteca en mi perfil de GitHub. Y Jack Jackson vio mi trabajo y decidió mover todo el código a la organización de federación de módulos. Entonces, si vas a la Federación de Módulos slash Vite, encontrarás este plugin. También puedes encontrar la implementación para React y muchos otros marcos. Así que archivé mi proyecto y moví todo el código allí. Entonces, ¿cómo podemos compartir las dependencias? Entonces, otra gran cosa en la architecture es compartir las dependencias. Y afortunadamente, la implementación de la Federación de Módulos Vite es realmente similar a la de Webpack. Entonces, la original. Entonces, puedes mezclar y combinar la Federación de Módulos con Vite y la Federación de Módulos con Webpack. Y necesitas definir para Vite, necesitas definir una configuración especial para que puedas esperar la función de federación. Porque un plugin en Vite es más o menos una función. Puedes obtener esta función de la Federación de Módulos slash Vite. Puedes y necesitas definir la configuración y algunas otras opciones.

6. Configuración y Trabajo Futuro

Short description:

Esta configuración es similar a la de Webpack. Puedes definir un nombre, exponer el componente para compartir con la aplicación principal y compartir bibliotecas. Al compartir bibliotecas, puedes evitar descargar la misma base de código varias veces y reutilizar la versión en caché. En este caso, mantenemos react-dom/server y server.node. Soy un desarrollador de FoodStack para clarinete, un desarrollador de código abierto en mi tiempo libre. Actualmente estoy trabajando en el marco QUIC y creo que será un gran marco para el futuro.

¿Y qué es esta configuración? Esta configuración es realmente, realmente similar a la de Webpack. Entonces puedes, esta es una configuración para un remoto. que se carga desde nuestra aplicación shell. Así que puedes definir un nombre, puedes exponer el componente que te gustaría compartir con la aplicación principal. Así que este es básicamente tu micro frontend. Y también puedes compartir las bibliotecas. Así que aquí estamos compartiendo todas nuestras bibliotecas, pero puedes definir una por una una biblioteca específica. Así que si dos micro frontends necesitan la misma biblioteca y la misma versión, podemos evitar descargar dos veces la misma base de código, pero podemos reutilizar la única que tenemos en caché. Y básicamente podemos mantener alguna otra biblioteca que no queremos. Así que en este caso específico, mantenemos react-dom slash server y server.node.

Vale. Eso es todo. Soy un desarrollador de FoodStack para clarinete. Puedes encontrarme en X, y mi nombre de usuario es georgio underscore boa. O puedes encontrarme en LinkedIn con mi nombre y apellido. Soy un desarrollador de código abierto en mi tiempo libre. Y actualmente estoy trabajando duro en el marco QUIC. Desde 2022 trabajo con QUIC. Soy colaborador y mantenedor principal. También estoy impulsando en la base de código principal. Así que si te gustaría o si estás interesado en mirar a QUIC, por favor echa un vistazo porque creo que será un gran marco para el futuro. Gracias por escuchar y que tengas una buena masterclass. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.