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 · WWC 2024

9:16 min

Implementing micro frontends with webpack module federation

Manfred Steyer Manfred Steyer · WWC 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 · WWC 2022

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

Merging at Scale: From Broken Builds to Green Mainline

Manjari Akella, Preetam Dwivedi

Manjari Akella
Preetam Dwivedi
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

It’s Alive! Taming the MLOps Franken-Stack: Write, Run, and Serve with Michelangelo

Paul Zimmerman, Eric Wang

Paul Zimmerman
Eric Wang
Open session

World Congress 2026 North America

From Cloud Native to Multi-Cloud Native: Write Once, Deploy Anywhere

Sandeep Pal

Principal Member of Technical Staff at Salesforce

Sandeep Pal

Related videos

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
WWC 2021 • almost 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
WWC 2025 • 12 months ago

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

Manfred Steyer

Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular thumbnail
29:36
WWC 2024 • almost 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 • over 4 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

The Dependency Cookbook - Recipes for Micro Frontend success thumbnail
21:06
WWC 2025 • 12 months ago

The Dependency Cookbook - Recipes for Micro Frontend success

Lucas Braeschke, Stefan Bley

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.