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 Federation...
Search
Manfred Steyer
PRO
April 14, 2021
Programming
1
480
The Microfrontend Revolution: Module Federation with Angular @μCon 2021
Manfred Steyer
PRO
April 14, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
820
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
460
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
23
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
430
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
370
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
180
Other Decks in Programming
See All in Programming
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Datadog Workflow Automation で圧倒的価値提供
showwin
1
140
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
980
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
290
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
270
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
2
410
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
A Philosophy of Restraint
colly
203
16k
A better future with KSS
kneath
238
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Scaling GitHub
holman
459
140k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing Experiences People Love
moore
140
23k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Microfrontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding
#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 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated
@ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module
Federation and Alternatives (~100 pages)
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io