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 Frontends in Angular
Search
Manfred Steyer
PRO
April 25, 2024
Programming
0
120
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
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
44
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
65
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
100
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
90
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
250
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
430
Micro Frontends with Web Standards
manfredsteyer
PRO
1
320
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
WebGLで始める コンピュータグラフィックス入門
heller77
0
330
VS Code をプロダクトにどう取り込むか
onomax
1
770
AppRouter Panel Talk
yosuke_furukawa
PRO
1
490
GitHub Copilotのススメ
marcy731
1
240
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
260
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
480
Hanami and htmx
bkuhlmann
0
230
Elm 0.19.0 Changes
bkuhlmann
0
510
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Open standards for building event-driven applications in the cloud
meteatamel
0
190
AmperとFleetを使ったAndroidアプリ
yoppie
0
270
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Web development in the modern age
philhawksworth
203
10k
Automating Front-end Workflow
addyosmani
1357
200k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Writing Fast Ruby
sferik
622
60k
Embracing the Ebb and Flow
colly
80
4.2k
Producing Creativity
orderedlist
PRO
338
39k
4 Signs Your Business is Dying
shpigford
176
21k
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