WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Aug 29, 2021

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Are massive frontend monoliths slowing your development teams down? Discover how Webpack 5's Module Federation dynamically orchestrates micro frontends without the heavy overhead of custom meta-frameworks.

Pause
Mute Enter Fullscreen
#1 about 4 min

Introduction to micro frontends and architectural consequences

Evaluating consequences over absolute best practices helps determine if scaling with independent teams justifies the complexity of an application shell.

#2 about 11 min

Why companies scale application development with micro frontends

Case studies reveal that isolating business domains and scaling teams are the primary drivers for splitting large codebases.

#3 about 10 min

Implementing micro frontends with webpack module federation

Decoupling the compilation process with webpack plugins enables host applications to load separate remote bundles on demand without upfront knowledge.

#4 about 11 min

Live coding a static module federation architecture

Extending angular compilation with a custom builder adds the necessary configuration for mapping remotes and sharing dependencies.

#5 about 3 min

Fetching remotes at runtime with dynamic federation

Defining remote paths using runtime variables instead of static maps allows backend services to control available frontend integrations.

#6 about 5 min

Mixing framework versions using web components and federation

Combining web components with module federation allows developers to mix incompatible frameworks safely inside a single browser window.

#7 about 3 min

Reviewing tradeoffs and testing risks of micro frontends

Shifting build-time dependencies to runtime requires rigorous integration testing to catch version mismatches before production.

#8 about 3 min

Q&A on source code sharing and library coupling

Applying version mismatch strategies manages the inherent tradeoff between isolated module safety and shared application bundle size.

Matching moments

6:44 min

Micro frontends and Webpack module federation challenges

Manfred Steyer Manfred Steyer · WWC 2024

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

4:38 min

Overcoming team scaling challenges with module federation

Manfred Steyer Manfred Steyer · JS Congress

2:26 min

Summarizing module federation patterns and architectural choices

Manfred Steyer Manfred Steyer · JS Congress

5:14 min

Delivering remote modules with Webpack Module Federation

Trishul Goel · JS Congress

More from World Congress 2021

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Angular <> Angular CDK - Awesomeness Combined thumbnail
35:49
about 5 years ago

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Upcoming sessions on this topic

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

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

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
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

Merging at Scale: From Broken Builds to Green Mainline

Preetam Dwivedi, Manjari Akella

Preetam Dwivedi
Manjari Akella

Related videos

Micro-Frontends with Module Federation: Beyond the Basics thumbnail
44:35
JS Congress • over 4 years ago

Micro-Frontends with Module Federation: Beyond the Basics

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

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

Front-End Micro Apps

Serg Hospodarets

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

Destructuring Frontend monoliths with MicroFrontends thumbnail
41:49
JS Congress • over 4 years ago

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.