Manfred Steyer

Micro-Frontends with Module Federation: Beyond the Basics

Can you integrate a React app inside an Angular app? Discover the 'Frankenstein architecture' and other advanced patterns for building real-world micro-frontends.

Micro-Frontends with Module Federation: Beyond the Basics
#1about 5 minutes

The role of micro-frontends in scaling development teams

Micro-frontends enable scaling by splitting large applications into smaller parts managed by autonomous teams, with module federation providing the necessary runtime integration.

#2about 8 minutes

The basics of configuring module federation

Module federation uses a host and remote model, where the host application uses dynamic imports to load exposed files from separately deployed remote applications.

#3about 7 minutes

Strategies for managing library version mismatches

Module federation handles version mismatches by default by selecting the highest compatible version, but can be configured with singletons or strict version checks for more control.

#4about 8 minutes

Loading micro-frontends with dynamic federation

Dynamic federation allows loading micro-frontends without upfront configuration by using a helper function and the Webpack runtime API to dynamically construct routes.

#5about 6 minutes

Comparing mono-repos and multiple repos for micro-frontends

Choosing between multiple repositories for strict decoupling or a mono-repository for easier code sharing involves trade-offs in dependency management and version control.

#6about 7 minutes

Building a multi-framework Frankenstein architecture

It is possible to integrate applications built with different frameworks like React or Vue by using a wrapper component to bootstrap them inside a host application.

#7about 2 minutes

Key takeaways for advanced module federation usage

A summary of advanced module federation techniques including version mismatch strategies, dynamic loading, repository structures, and multi-framework integration.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

See all videos
Micro Frontends with Module Federation: Why and How?45:40

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

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

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

Manfred Steyer

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios24:47

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

Manfred Steyer

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular33:18

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Stairway to Heaven - Scaling Frontends the Right Way40:05

Stairway to Heaven - Scaling Frontends the Right Way

Florian Rappl

Destructuring Frontend monoliths with MicroFrontends41:49

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
DC
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
Inside last week’s Dev Digest 198 . 🎂 30 years of JavaScript ⏰ How long is a JavaScript second 💻 Clean code in Angular 🤦‍♂️ AI makes different mistakes than humans 👨‍💻 In-browser and offline AI 🟠 Undocumented Hacker News features 🐋 DeepSeek censored...
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI

From learning to earning

Jobs that call for the skills explored in this talk.