Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Micro Frontends with Module Federation: Beyond the Basics
Search
Manfred Steyer
PRO
May 03, 2023
Programming
0
270
Micro Frontends with Module Federation: Beyond the Basics
Manfred Steyer
PRO
May 03, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Trial
cairolibrary720
1
130
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
CSC307 Lecture 11
javiergs
PRO
0
240
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
AHC035解説
terryu16
0
730
CSC307 Lecture 10
javiergs
PRO
0
310
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Teambox: Starting and Learning
jrom
130
8.6k
Designing for Performance
lara
604
67k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
How to train your dragon (web standard)
notwaldorf
79
5.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
We Have a Design System, Now What?
morganepeng
46
7k
Happy Clients
brianwarren
94
6.6k
KATA
mclloyd
20
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
What's new in Ruby 2.0
geeforr
338
31k
Transcript
@ManfredSteyer ManfredSteyer Make Module Federation Work Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions
@ManfredSteyer #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions #0 Module Federation 101
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in //
webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Make sure, your Angular-based code sees exactly the same
Angular version at runtime it was built with! (Don't use ^ or ~ in your package.json)
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 11.0 10.1
@ManfredSteyer shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
@ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront
@ManfredSteyer
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Publish shared libs seperately via npm Repository n Repository 2 Repository 1 Version Mismatches? Strict Borders
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System
@ManfredSteyer
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "http://..." } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap();
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap(); const rootElm =
document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); // Self-Bootstrapping const rootElm = document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('app-root') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Conclusion Baked-in Strategies for Version Mismatches Monorepo vs. Multirepo:
Self-restriction vs. (Costly) Freedom Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io