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 React y Federación de Módulos Vite
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.
Video Transcription
1. Introducción a Microfrontends
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
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.
Available in other languages:
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
Workshops on related topic
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.
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.
Comments