Log in
JavaScript Conferences
JSNation US 2024JSNation US 2024
ES

Micro-Frontends: Revolutionizing Frontend Development

Nataly Rocha
Nataly Rocha
Stack Builders
certificate
This video will go public in 6 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video today.

Rate this content
Bookmark

Reutilizar características de front-end construidas por diferentes equipos puede ser un desafío dependiendo del enfoque elegido. Si usamos una biblioteca, ¿qué pasa con el versionado y el mantenimiento? Si usamos un monolito, ¿qué pasa con los tiempos de construcción? Podemos encontrar una solución pragmática en Module Federation, no solo para compartir características sino también para dividir y conquistar. Únete a mí en esta charla para discutir las últimas actualizaciones de Module Federation, la seguridad de tipos, analizar sus desafíos y revisar un caso real donde aplicamos esta solución para compartir proveedores, hooks, características y problemas interesantes que enfrentamos en el camino.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

micro-frontends
Nataly Rocha
Nataly Rocha
7 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Los micro-frontends descomponen un gran frontend en piezas más pequeñas e independientemente desplegables. Este enfoque mejora la escalabilidad, la autonomía del equipo y el mantenimiento del código. Las dos formas principales de implementar micro-frontends son en tiempo de construcción y en tiempo de ejecución. Module Federation, introducido en Webpack 5, permite actualizaciones dinámicas en tiempo real entre equipos. Los desafíos en la implementación de micro-frontends incluyen obtener seguridad de tipos con TypeScript y probar en tiempo de ejecución. Module Federation 2.0 introdujo la extracción de tipos y actualizaciones de manifiestos. La federación de sitios completos permite probar toda la aplicación. Los micro-frontends implican compensaciones, así que elige lo que más te beneficie.
Available in English: What’s With Micro Frontends
Video transcription and chapters available for users with access.
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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
Adrien Baron
Adrien Baron
Maker of clashofstats.com, Vue GWT and 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.
javascriptmicro-frontendsremixarchitecture
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Ruben Casas
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.
micro-frontendsdeveloper challengesmicro frontends reactcase study
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
Giorgio Boa
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 toolsmicro-frontendsmicro frontends react nativereact microservicesvite react microfrontendvite react module federationmicro frontends reactmodule federation reactvite
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
Daniel Bolivar
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.
monoreposmicro-frontendsarchitecturecase study
“Microfrontends” para móviles en React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Mo Khazali
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.
micro-frontendsreact server componentsmicro frontends react nativereact microservicesmicro frontends reactreact native
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
Eliran Natan
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.
micro-frontendsarchitecturebest practices

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.
reactmicro-frontendsmicro frontends reactmodule federation react
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.
micro frontend react and angularmicro-frontendsmodule federation reactangular