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
The Microfrontend Revolution: Module Federatio...
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
420
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
96
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
31
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
90
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
59
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
250
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
370
Other Decks in Programming
See All in Programming
Amazon Qを使ってIaCを触ろう!
maruto
0
400
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
170
Jakarta EE meets AI
ivargrimstad
0
150
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
Facilitating Awesome Meetings
lara
50
6.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Visualization
eitanlees
145
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
It's Worth the Effort
3n
183
27k
Optimizing for Happiness
mojombo
376
70k
For a Future-Friendly Web
brad_frost
175
9.4k
Bash Introduction
62gerente
608
210k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #3: Federated
Angular #4: 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 ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io