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 mit Module Federation: Der Beginn einer neuen Ära? @WDC2021
Search
Manfred Steyer
PRO
April 28, 2021
Programming
0
210
Micro Frontends mit Module Federation: Der Beginn einer neuen Ära? @WDC2021
Manfred Steyer
PRO
April 28, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
上手な探索的テストとその上達方法について
matsu802
1
430
CSC308B Lecture 12
javiergs
PRO
0
110
Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
860
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
400
BuefyのMaintainerを引き継いだ件
kikuomax
0
410
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
150
マイ隙間家具OSSたちのご紹介
karupanerura
2
130
Flutterアプリを GitHub Actions & Xcode Cloud で社内配布する / Distribute Flutter apps internally
takasfz
0
130
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
Не учите алгоритмы
hellsquirrel
1
700
Featured
See All Featured
How to name files
jennybc
62
91k
Scaling GitHub
holman
456
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
18
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Rebuilding a faster, lazier Slack
samanthasiow
72
8.1k
For a Future-Friendly Web
brad_frost
170
8.8k
Unsuck your backbone
ammeep
660
56k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Visualization
eitanlees
135
14k
A designer walks into a library…
pauljervisheath
199
23k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends mit Module Federation: Der Beginn einer
neuen Ära? Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #3: Federated
Angular #4: Dynamic Module Federation #5: Possible Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!
@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer Default Behavior Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Default Behavior Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1
• MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true }
} 11.0 10.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } } 11.0 10.1
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5: final @angular-architects/module-federation: final CLI 11:
Experimental webpack 5 support CLI 12: Official webpack 5 support (May 2021)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Scaling Teams!
Version Mismatches Federated Angular Dynamic Federation
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io