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
Micro Frontends with Web Standards
Search
Manfred Steyer
PRO
February 15, 2024
Programming
1
300
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
40
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
84
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
130
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Elm Form Validation
bkuhlmann
0
510
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Goのmultiple errorsについて (2024年4月版)
syumai
4
960
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
130
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
GitHub Copilotのススメ
marcy731
1
200
2 週間で Twitter Bot を作ってみた
contour_gara
0
590
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
260
Featured
See All Featured
KATA
mclloyd
15
12k
Designing for humans not robots
tammielis
248
25k
Adopting Sorbet at Scale
ufuk
68
8.6k
A designer walks into a library…
pauljervisheath
200
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Code Review Best Practice
trishagee
55
15k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Fireside Chat
paigeccino
21
2.6k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Web Standards
@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 & Standalone & esbuild Frankenstein w/ Web Components
Deferred Loading
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@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 @defer on viewport { @main { <heavy-cmp /> }
@placeholder { <img src="ph.png"> } […] }
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new
Signal Store 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