Versión en EspañolES

¿Es Module Federation adecuado para ti?

Please sign in to watch this workshop.

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.

micro-frontends modules

Grgur Grisogono

191 min

04 Jul, 2022

Comments

Available in other languages:

Watch more workshops on topic

Micro Frontends with Module Federation and React

JSNation Live 2021

113 min

Micro Frontends with Module Federation and React

Top Content

Workshop

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.

react micro-frontends micro frontends react module federation react

Microfrontends con Module Federation y Angular

JSNation Live 2021

113 min

Microfrontends con Module Federation y Angular

Workshop

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.

micro-frontends angular micro frontend react and angular module federation react

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 2022

23 min

Escalando con Remix y Micro Frontends

Top Content

Adrien Baron

Creator of Tiny Frontend

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.

remix javascript micro-frontends architecture

De Monolito a Micro-Frontends

React Advanced 2022

22 min

De Monolito a Micro-Frontends

Top Content

Ruben Casas

Postman

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.

case study micro-frontends developer challenges micro frontends react

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

React Advanced 2023

20 min

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

Top Content

Giorgio Boa

Claranet

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.

build tools vite micro-frontends micro frontends react micro frontends react native module federation react react microservices vite react microfrontend vite react module federation

Microfrontends Federados a Gran Escala

React Summit 2023

31 min

Microfrontends Federados a Gran Escala

Top Content

Daniel Bolivar

Cozycore Engineer

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.

case study micro-frontends monorepos architecture

“Microfrontends” para móviles en React Native

React Advanced 2023

24 min

“Microfrontends” para móviles en React Native

Top Content

Mo Khazali

Theodo UK

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.

react native micro-frontends react server components micro frontends react micro frontends react native react microservices

Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?

React Summit 2022

23 min

Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?

Top Content

Eliran Natan

Mentorship available

SquadX

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.

best practices micro-frontends architecture