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

Rate this content
Bookmark
Slides

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

Oleksandr Tryshchenko
Oleksandr Tryshchenko
28 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

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.
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.
Micro-Frontends With React & Vite Module Federation
React Advanced Conference 2023React Advanced Conference 2023
20 min
Micro-Frontends With React & Vite Module Federation
Top Content
From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes?
I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.
Sharing is Caring: (How) Should Micro Frontends Share State?
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss & compare different solutions in React.
“Microfrontends” for Mobile in React Native
React Advanced Conference 2023React Advanced Conference 2023
24 min
“Microfrontends” for Mobile in React Native
Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services. 
More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster.
In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.

Workshops on related topic

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.