Manfred Steyer
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.
Featured Partners
Related Videos
45:40Micro Frontends with Module Federation: Why and How?
Manfred Steyer
33:18The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular
Manfred Steyer
35:17Front-End Micro Apps
Serg Hospodarets
40:05Stairway to Heaven - Scaling Frontends the Right Way
Florian Rappl
41:49Destructuring Frontend monoliths with MicroFrontends
Trishul Goel
43:20Microfrontends at Scale
Josh Goldberg
47:05Micro-frontends anti-patterns
Luca Mezzalira
40:17Micro-frontends anti-patterns
Luca Mezzalira
From learning to earning
Jobs that call for the skills explored in this talk.
Lead Full-Stack Engineer
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
React
Vue.js
Node.js
MongoDB
+1
Fullack Developer - NodeJS / Typescript / HTML / SCSS / Angular / NextJs
Codext GmbH
Ilshofen-Vellberg, Germany
€55K
API
CSS
HTML
NestJS
+4