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

Using Webpack 5 Module Federation for micro-frontends
08:18 MIN

Using Webpack 5 Module Federation for micro-frontends

Front-End Micro Apps

Managing dependencies with Webpack's Module Federation
13:05 MIN

Managing dependencies with Webpack's Module Federation

The Dependency Cookbook - Recipes for Micro Frontend success

Integrating micro frontends with module federation
01:54 MIN

Integrating micro frontends with module federation

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

How Module Federation enables runtime integration
14:26 MIN

How Module Federation enables runtime integration

Micro Frontends with Module Federation: Why and How?

Conclusion and key takeaways on micro frontends
41:06 MIN

Conclusion and key takeaways on micro frontends

Micro Frontends with Module Federation: Why and How?

Audience Q&A on practical micro-frontend challenges
33:55 MIN

Audience Q&A on practical micro-frontend challenges

Micro-frontends anti-patterns

Understanding Webpack 5 Module Federation concepts
04:25 MIN

Understanding Webpack 5 Module Federation concepts

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Implementing dynamic federation at runtime
32:36 MIN

Implementing dynamic federation at runtime

Micro Frontends with Module Federation: Why and How?

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

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

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

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

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

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

Front-End Micro Apps35:17

Front-End Micro Apps

Serg Hospodarets

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
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
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

From learning to earning

Jobs that call for the skills explored in this talk.

Lead Full-Stack Engineer

Lead Full-Stack Engineer

Hubert Burda Media
München, Germany

€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1