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.

Giorgio Boa
Giorgio Boa
20 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

Vite: Rethinking Frontend Tooling
JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
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.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
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.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
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.
Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Alex Lobera
Alex Lobera
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.
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
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.