$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Native Federation: The Future of Micro Frontend...
Search
Manfred Steyer
PRO
April 25, 2024
Programming
0
680
Native Federation: The Future of Micro Frontends in Angular
Manfred Steyer
PRO
April 25, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
120
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
97
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
200
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
84
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
180
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
manfredsteyer
PRO
0
73
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
The Missing Link in Angular's Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
160
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
manfredsteyer
PRO
0
93
Other Decks in Programming
See All in Programming
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
600
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.3k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
6
2.1k
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
1.3k
認証・認可の基本を学ぼう前編
kouyuume
0
190
Cap'n Webについて
yusukebe
0
130
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
1k
SwiftUIで本格音ゲー実装してみた
hypebeans
0
110
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
140
How Software Deployment tools have changed in the past 20 years
geshan
0
28k
Building AI Agents with TypeScript #TSKaigiHokuriku
izumin5210
6
1.3k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
698
190k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Typedesign – Prime Four
hannesfritz
42
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Navigating Team Friction
lara
191
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
For a Future-Friendly Web
brad_frost
180
10k
Transcript
@ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in
Angular
@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