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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Manfred Steyer
PRO
February 15, 2024
Programming
1
550
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
92
Beyond the Basics: Signal Forms
manfredsteyer
PRO
0
63
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
140
All About Angular‘s New Signal Forms
manfredsteyer
PRO
0
29
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
180
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
250
Other Decks in Programming
See All in Programming
CSC307 Lecture 08
javiergs
PRO
0
670
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
MUSUBIXとは
nahisaho
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
620
Data-Centric Kaggle
isax1015
2
780
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
Raku Raku Notion 20260128
hareyakayuruyaka
0
360
今から始めるClaude Code超入門
448jp
8
9.1k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
Fluid Templating in TYPO3 14
s2b
0
130
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
210
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Writing Fast Ruby
sferik
630
62k
How to build a perfect <img>
jonoalderson
1
4.9k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
4 Signs Your Business is Dying
shpigford
187
22k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
200
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
110
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
150
The Cult of Friendly URLs
andyhume
79
6.8k
Visualization
eitanlees
150
17k
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