Desafíos de Descomponer un Front-End Masivo Usando Micro-Frontends

Rate this content
Bookmark
Slides
Los microfrontends ofrecen una solución potencial a los problemas de ingeniería de frontend, mejorando la eficiencia de las pruebas y permitiendo un desarrollo más rápido. Hay conceptos erróneos sobre los microfrontends, con diferentes enfoques como las divisiones horizontales y verticales. Se recomiendan los monorepos para gestionar los microfrontends. La gestión de datos y los efectos secundarios se pueden manejar a través de varios enfoques. Construir microfrontends sin un monorepo puede ser un desafío, pero depende de la escala de la aplicación. La confianza en las personas y la implementación de un registro de componentes ayudan a evitar la duplicación. Herramientas como Module Federation y NX son útiles para gestionar microfrontends.

From Author:

Nuestra aplicación de interfaz de usuario web es bastante grande: cientos de personas la han estado construyendo activamente durante los últimos ocho años. Comenzamos a enfrentar problemas de escalabilidad y limitaciones tecnológicas. Evaluamos muchas opciones y nos decidimos por los micro-frontends. Esta noche discutiremos:

- Diferencias entre varias arquitecturas de micro-frontends

- Por qué tomamos esta decisión y si es útil para ti

- Lo que ganamos

- Lo que sacrificamos (sí, hay desventajas)

- Qué desafíos aún tenemos por delante

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

FAQ

Los microfrontends son una técnica de desarrollo de software que divide una aplicación web front-end en piezas más pequeñas e independientes, cada una de ellas manejable por diferentes equipos de desarrollo.

Los beneficios de usar microfrontends incluyen la mejora de la autonomía de los equipos, el uso de diferentes tecnologías sin restricciones globales y la optimización del tiempo de construcción y despliegue de aplicaciones.

Los desafíos incluyen la definición de una estrategia de migración adecuada, la gestión de dependencias y pipelines, y la división efectiva de dominios entre los diferentes microfrontends.

Un monorepo es un enfoque de gestión de código donde se almacenan múltiples proyectos en un único repositorio. Facilita la gestión de microfrontends al centralizar la gestión de dependencias y mejorar la colaboración.

Las estrategias para manejar datos en microfrontends incluyen la inicialización de datos en el marco de trabajo, el uso de patrones PubSub para la comunicación entre microfrontends y la gestión de estado utilizando herramientas como Redux envuelto en PubSub.

Evitar la duplicación de código en microfrontends se puede lograr mediante el uso de una biblioteca de componentes compartidos y la estandarización de prácticas de desarrollo, aunque es un desafío persistente en la arquitectura de microfrontends.

La división vertical es un enfoque donde cada microfrontend maneja una parte específica de la aplicación por dominio, mostrándose uno a la vez en la pantalla, lo que permite una mayor cohesión y modularidad.

La división vertical permite una mejor separación de concernientes y una mayor autonomía de los equipos, pero requiere una planificación cuidadosa para evitar problemas de integración y de dependencias cruzadas entre componentes.

Oleksandr Tryshchenko
Oleksandr Tryshchenko
28 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Un Sueño, Deber de Paginación, y Microfrontends

Short description:

Es un día agradable y soleado. Estás deslizándote por los fiordos. El agua te consume. Miras tu teléfono y ves una notificación de deber de paginación. Entiendes el problema, pero es causado por alguien que ni siquiera es un ingeniero de frontend. Lo arreglas, pero te encuentras con problemas. Finalmente, fusionas tus solicitudes de extracción. Microfrontends es una posible solución a este problema.

Es un día agradable y soleado. Te deslizas por los fiordos. Los agradables rayos del sol caen sobre los frondosos bosques y esos fiordos. Has soñado con tener estas vacaciones durante mucho tiempo. Estás verdaderamente feliz hasta que algo sale mal.

El agua te consume. Pierdes el control. No entiendes lo que está pasando hasta que te despiertas. Ha sido un sueño. Ha sido un mal sueño y algo te ha despertado claramente. Miras tu teléfono y ves que es una notificación de deber de paginación. Tienes un deber que hacer.

Molesto, te despiertas. Te levantas y vas perezosamente a tu ordenador para ver qué ha pasado. Después de algunos minutos de mirar el problema, entiendes cuál es. Sin embargo, estás extremadamente molesto porque no es causado por tu equipo, sino por alguien que ni siquiera es un ingeniero de frontend.

Golpeas la mesa porque estás enfadado. Olvidas que tienes un hijo que se despierta por tu enfado y ahora tienes que explicar a tu hijo por qué tu padre, el padre de Keith, tiene que arreglar una biblioteca de validation de teléfonos móviles por la noche. Haces la corrección. Abres la solicitud de extracción, que tarda 40 minutos en construirse. Te haces un café mientras esperas, y al final en lugar de una feliz marca de verificación verde, obtienes una cruz roja.

Prueba de despertar de nuevo. Haces clic en el botón de reinicio. Terminas tu té frío para ver tu marca de verificación verde. Fusionas tus solicitudes de extracción. Puedes dormir un par de horas hasta que te despiertes y hagas más trabajo.

Es un ejemplo de una combinación de un problema tecnológico y un desafío organizativo. No debería haber ocurrido. Sin embargo, está ahí. Microfrontends es una de las posibles soluciones para abordar este problema.

2. Microfrontends y Comunicación

Short description:

Hoy vamos a hablar sobre microfrontends. Compartiremos experiencias de diferentes empresas y disiparemos estereotipos en torno a este tema. Al discutir ideas en grupo, la conversación a menudo se expande y se desvía del plan original. Muchas personas pueden relacionarse con esto, ya que puede ser desafiante comunicarse de manera efectiva y tomar decisiones en grupos más grandes. Este concepto se aplica no solo al desarrollo de software, sino también a otras áreas, como la política.

Gracias a todos por venir aquí. Mi nombre es Alex, y hoy vamos a hablar sobre microfrontends. Tuve la suerte o la fortuna de trabajar en tres empresas que hicieron microfrontends. Eran empresas bastante diferentes, y querían compartir su experiencia. ¿Cómo lo hicieron? También, disipar algunos estereotipos que rodean el tema de los microfrontends en general.

Hablemos de tu empresa. Estás trabajando y tienes una idea. Quieres hacer algo muy sencillo, muy simple, muy tangible, y va a tener un resultado muy predecible y claro. Parece fácil, ¿verdad? Hagamos X y vamos a obtener Y. Muy sencillo. Pero no, hay un tipo con opiniones, y ahora tienes que convencerlo de cómo vas a hacer esto. Y al menos su punto tiene sentido, como, entiendo, está bien, veo de dónde vienes. Tengamos una charla. A menos que la discusión se expanda. Se expande en dimensiones que no imaginaste al principio. Y cuanto más avanza, más se desvía del lugar donde comenzó hasta que finalmente se va.

Por favor, levanten la mano quienes puedan relacionarse con la historia. Muchas personas. Y las personas que están sentadas a tu alrededor, las personas que forman parte de esas llamadas, realmente no quieren estar allí. También tienen una vida que vivir y tienen hijos que no quieren saber acerca de las bibliotecas de teléfonos. Hay mucha investigación sobre esto. No es un tema de vanguardia. Estaba Fred Brooks. Era un ingeniero y gerente de ingeniería, hace muchos años, antes de que muchos de nosotros naciéramos. Y escribió un libro. El libro se llama el Mythical Man Mouth, donde describe el concepto de las personas interactuando a escala. Y cuanto más grande es el grupo, más difícil es para las personas comunicarse de manera efectiva y tomar decisiones. Hay conceptos similares y diría que es lo suficientemente creíble como para hacer nuestras suposiciones sobre esto. Y también se aplica a diferentes esferas de nuestra vida. Si observas la política, por ejemplo, los países que están profundamente descentralizados, tienden a ser más efectivos en su autoadministración.

QnA

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

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.
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.
Micro-Frontends con React y Federación de Módulos Vite
React Advanced Conference 2023React Advanced Conference 2023
20 min
Micro-Frontends con React y Federación de Módulos Vite
Top Content
Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
“Microfrontends” para móviles en React Native
React Advanced Conference 2023React Advanced Conference 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
React Summit 2022React Summit 2022
23 min
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
Top Content
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.

Workshops on related topic

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.