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
670
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
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
manfredsteyer
PRO
0
37
Reactivity, Reimagined: Angular Signals at Every Layer
manfredsteyer
PRO
0
53
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
46
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
All About Angular's New Signal Forms
manfredsteyer
PRO
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
220
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
150
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
78
Other Decks in Programming
See All in Programming
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
210
SODA - FACT BOOK(JP)
sodainc
1
8.9k
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
Go言語はstack overflowの夢を見るか?
logica0419
0
620
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
チームの境界をブチ抜いていけ
tokai235
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
NIKKEI Tech Talk#38
cipepser
0
270
Featured
See All Featured
Designing for Performance
lara
610
69k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Raft: Consensus for Rubyists
vanstee
140
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Gamification - CAS2011
davidbonilla
81
5.5k
Optimizing for Happiness
mojombo
379
70k
How to Ace a Technical Interview
jacobian
280
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
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