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
July 18, 2024
Programming
0
280
Native Federation: The Future of Micro Frontends in Angular
Manfred Steyer
PRO
July 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
32
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
220
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
110
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
340
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
Meet BrowserEngineKit
swiftty
0
190
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
180
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
330
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
100
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
7
5k
dotfiles について話したい #湘なんか
stefafafan
2
280
数値を文字列に整形する際の落とし穴とその解決策(iOSDC2024 ルーキーズLT) / iOSDC Japan 2024 Formatting Floating-Point Numbers
glassfiber
0
250
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
48
7.1k
Embracing the Ebb and Flow
colly
83
4.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Scaling GitHub
holman
458
140k
Music & Morning Musume
bryan
46
6k
Faster Mobile Websites
deanohume
304
30k
Into the Great Unknown - MozCon
thekraken
28
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
33
1.7k
Unsuck your backbone
ammeep
667
57k
Docker and Python
trallard
39
3k
Transcript
@ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in
Angular WeAreDevelopers World Congress
@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
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@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