¿Es Module Federation adecuado para ti?

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

Descubre los Micro Frontends con Module Federation. Aprende sobre los beneficios y desafíos para que puedas decidir si los Micro Frontends son adecuados para tu organización.

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Los micro-frontends son un enfoque de desarrollo web que permite descomponer aplicaciones front-end grandes y complejas en piezas más pequeñas y manejables. Cada pieza puede ser desarrollada, probada y desplegada de manera independiente, lo que facilita la escalabilidad y la eficiencia en equipos grandes.

La federación de módulos es una técnica utilizada en desarrollo web que permite compartir dinámicamente código y funcionalidades entre múltiples aplicaciones JavaScript de manera eficiente. Facilita la reutilización de código y ayuda en la gestión de dependencias en aplicaciones grandes.

Los micro-frontends pueden comunicarse utilizando diversos métodos como eventos, servicios, comunicación del lado del servidor, estado compartido, y enrutamiento. Cada método tiene sus ventajas y desventajas, y la elección depende de las necesidades específicas del proyecto y la arquitectura utilizada.

Los micro-frontends ofrecen varios beneficios como la posibilidad de escalar equipos y recursos de manera más efectiva, incrementar la agilidad del desarrollo, realizar pruebas A/B de manera más sencilla, y facilitar las migraciones y actualizaciones de aplicaciones. También permiten una mayor flexibilidad en la elección de tecnologías y herramientas.

Para manejar versiones y dependencias en micro-frontends, es recomendable utilizar versionado semántico y mantener cada versión en subcarpetas separadas en un servidor. Esto permite revertir a versiones anteriores fácilmente y manejar diferentes versiones de dependencias de forma más controlada.

Grgur Grisogono
Grgur Grisogono
191 min
04 Jul, 2022

Comments

Sign in or register to post your comment.
Sign in to access video transcription and chapter summary.

Watch more workshops on topic

Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Top Content
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez trabajaste 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 de frontend en piezas más pequeñas para que cada equipo pueda construir y desplegar de manera independiente. En este masterclass, aprenderás cómo construir grandes aplicaciones de React 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.

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 2022React Advanced 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 2023React Advanced 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 2023React Advanced 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.