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 with Angular @μCon 2021
Search
Manfred Steyer
PRO
April 14, 2021
Programming
1
460
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
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
190
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
130
Understanding Ast By Looking
inouehi
0
120
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
Parallel Socket Communication in Swift
s_shimotori
0
220
Honoとhtmx
yusukebe
6
1.2k
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
1
500
TDDと今まで
kanayannet
0
140
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Visualization
eitanlees
135
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
In The Pink: A Labor of Love
frogandcode
137
21k
Documentation Writing (for coders)
carmenintech
59
3.8k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
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