WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 24, 2021

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Scaling micro-frontends often introduces complex dependency and routing nightmares. Master Webpack 5 Module Federation to dynamically assemble remote modules, prevent version clashes, and orchestrate multi-framework legacy migrations.

Pause
Mute Enter Fullscreen
#1 about 5 min

Overcoming team scaling challenges with module federation

Splitting large applications into decentralized micro frontends improves team agility while maintaining a unified customer experience.

#2 about 7 min

Configuring webpack module federation for hosts and remotes

Using exposed files and dynamic imports seamlessly integrates separate applications at runtime without complex framework workarounds.

#3 about 3 min

Demonstrating runtime integration and shared library loading

Inspecting browser network traffic reveals how micro frontends lazy load remote bundles while sharing common framework dependencies.

#4 about 7 min

Resolving dependency version mismatches in micro frontends

Built-in webpack strategies like semantic version checking and strict singletons prevent conflicting library variations within shared host environments.

#5 about 9 min

Implementing dynamic federation for unknown runtime remotes

Utilizing helper functions and the webpack runtime API allows shell applications to dynamically discover and mount unknown endpoints.

#6 about 7 min

Evaluating monorepo and polyrepo architectures for micro frontends

Engineering teams must choose between the strict boundary isolates of multiple repositories and simplified dependency management of unified monorepos.

#7 about 7 min

Integrating multiple framework versions via wrapper components

Bootstrapping diverse single-page applications inside a unified shell requires dynamic DOM mounting and specialized router synchronization protocols.

#8 about 3 min

Summarizing module federation patterns and architectural choices

Advanced frontend setups leverage dynamic loading and framework agnosticism while demanding careful repository and dependency governance.

Matching moments

6:44 min

Micro frontends and Webpack module federation challenges

Manfred Steyer Manfred Steyer · World Congress 2024

9:16 min

Implementing micro frontends with webpack module federation

Manfred Steyer Manfred Steyer · World Congress 2021

13:09 min

Answering questions on micro-frontend adoption and tooling

Luca Mezzalira Luca Mezzalira · JS Congress

3:39 min

Enabling framework-agnostic modularity with Webpack module federation

Serg Hospodarets · LIVE

5:14 min

Delivering remote modules with Webpack Module Federation

Trishul Goel · JS Congress

3:07 min

Combining micro frontends and the modular monolith pattern

Florian Rappl · World Congress 2022

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
World Congress 2021 • about 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
World Congress 2025 • about 1 year ago

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Manfred Steyer

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular thumbnail
33:18
LIVE • over 5 years ago

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular thumbnail
29:36
World Congress 2024 • about 2 years ago

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular

Manfred Steyer

Front-End Micro Apps thumbnail
35:17
LIVE • over 5 years ago

Front-End Micro Apps

Serg Hospodarets

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • almost 5 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.