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
510
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
240
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
550
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
440
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
140
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
200
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
340
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
120
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
100
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
コーディングエージェント時代のNeovim
key60228
1
100
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
900
Flutterと Vibe Coding で個人開発!
hyshu
1
260
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
470
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
Langfuseと歩む生成AI活用推進
licux
3
290
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
690
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
460
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Invisible Side of Design
smashingmag
301
51k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Embracing the Ebb and Flow
colly
87
4.8k
Docker and Python
trallard
45
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Into the Great Unknown - MozCon
thekraken
40
2k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Gamification - CAS2011
davidbonilla
81
5.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
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