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
Native Federation: The Future of Micro Frontend...
Search
Manfred Steyer
PRO
April 25, 2024
Programming
0
610
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
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
13
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
38
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
21
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
32
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
78
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
150
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
200
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
120
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
マイコンでもRustのtestがしたい/KernelVM Kansai 11
tnishinaga
1
890
GitHub Copilot for Azureを使い倒したい
ymd65536
1
330
VibeCoding時代のエンジニアリング
daisuketakeda
0
200
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
140
ニーリーQAのこれまでとこれから
nealle
2
810
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
130
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
120
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.4k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
220
医療系ソフトウェアのAI駆動開発
koukimiura
1
110
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
110
Featured
See All Featured
Navigating Team Friction
lara
185
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
24
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
RailsConf 2023
tenderlove
30
1.1k
Adopting Sorbet at Scale
ufuk
76
9.4k
Typedesign – Prime Four
hannesfritz
41
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Producing Creativity
orderedlist
PRO
344
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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