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.
Matching moments
33:55 MIN
Audience Q&A on practical micro-frontend challenges
Micro-frontends anti-patterns
13:05 MIN
Managing dependencies with Webpack's Module Federation
The Dependency Cookbook - Recipes for Micro Frontend success
08:18 MIN
Using Webpack 5 Module Federation for micro-frontends
Front-End Micro Apps
01:54 MIN
Integrating micro frontends with module federation
Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
14:26 MIN
How Module Federation enables runtime integration
Micro Frontends with Module Federation: Why and How?
41:06 MIN
Conclusion and key takeaways on micro frontends
Micro Frontends with Module Federation: Why and How?
17:08 MIN
Choosing a strategy and final recommendations
The Dependency Cookbook - Recipes for Micro Frontend success
06:24 MIN
Exploring the challenges and downsides of micro-frontends
Stairway to Heaven - Scaling Frontends the Right Way
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
29:36Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular
Manfred Steyer
24:47Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
Manfred Steyer
59:03Multiple Ships to the Island - Micro Frontends & Island Architectures
Florian Rappl
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
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
Frontend Entwickler - VueJS / JavaScript / SCSS
Neuffer Fenster + Türen GmbH
Remote
CSS
HTML
React
jQuery
+3
Frontend Web Developer - JavaScript | React - bis 6000 Euro
Tech Solutions Gmbh
€42-70K
Intermediate
API
CSS
GIT
REST
+3
Frontend Web Developer - JavaScript | React - bis 6000 Euro
Tech Solutions Gmbh
€42-70K
Intermediate
API
CSS
GIT
REST
+3