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 · World Congress 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
over 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
over 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
over 5 years ago

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Related videos

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

Micro-Frontends with Module Federation: Beyond the Basics

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

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

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
World Congress 2024 • about 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 • 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.