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 Modern Angular and Island ...
Search
Manfred Steyer
PRO
April 10, 2024
Programming
0
260
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
Manfred Steyer
PRO
April 10, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
60
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
99
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
79
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
480
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
26
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
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
390
Other Decks in Programming
See All in Programming
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
590
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
読まないコードリーディング術
hisaju
0
110
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
240
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
290
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
730
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
290
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
420
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
170
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
650
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualization
eitanlees
146
15k
Being A Developer After 40
akosma
89
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fireside Chat
paigeccino
35
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Scaling GitHub
holman
459
140k
Automating Front-end Workflow
addyosmani
1369
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Modern Angular and Island Architectures
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & esbuild Frankenstein w/ Web Components Island Architectures
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@ManfredSteyer
@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Host Remote Remote HTML HTML
@ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:
Load MF via Federation (Hydration)
@ManfredSteyer Easy No Version Conflicts Lot of Experience
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF
Frankenstein Biz Apps B2C Team Autonomy →
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters
@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io