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

Spanish audio is available in the player settings
Rate this content
Bookmark
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.

From Author:

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.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Los Microfrontends son similares a los microservicios, pero aplicados al front-end de una aplicación. Permiten dividir un front-end monolítico en múltiples microfrontends para mejorar la gestión y modularidad.

Se puede dividir un monolito de front-end tanto vertical como horizontalmente. Por ejemplo, diferentes equipos podrían manejar distintas páginas o funciones específicas dentro de la aplicación.

Existen varios métodos como usar Vanilla CSS, CSS Modules, y CSS en JS. Estos enfoques ayudan a manejar y encapsular los estilos localmente para evitar conflictos entre diferentes microfrontends.

Se puede compartir el estado usando eventos personalizados, el canal de transmisión, un manejador de estado compartido como ZooStand, o implementaciones personalizadas de PubSub.

La Federación de Módulos es una técnica que permite compartir dinámicamente dependencias y módulos entre diferentes Microfrontends. Se puede implementar utilizando herramientas como Webpack y Vite.

La Federación de Módulos con Vite permite una integración eficiente entre diferentes frameworks y bibliotecas, facilitando la reutilización de código y mejora de la carga de módulos compartidos en aplicaciones de microfrontends.

Aunque los microfrontends son ideales para grandes aplicaciones, también pueden ser útiles en proyectos más pequeños, especialmente para renovar aplicaciones heredadas utilizando el patrón Strangler.

Giorgio Boa
Giorgio Boa
20 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Transcription

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: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
React Day Berlin 2022React Day Berlin 2022
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.

Workshops on related topic

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Micro Frontends con Module Federation y React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends con Module Federation y React
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez has trabajado en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito frontend en piezas más pequeñas para que cada equipo pueda construir e implementar de forma independiente. En este masterclass aprenderás cómo construir aplicaciones de React grandes que escalen utilizando micro frontends.
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.