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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
100
All About Angular‘s New Signal Forms
manfredsteyer
PRO
0
24
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
250
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
170
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
120
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
240
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
manfredsteyer
PRO
0
110
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
510
CSC307 Lecture 05
javiergs
PRO
0
490
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
540
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
17
5.8k
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
110
ThorVG Viewer In VS Code
nors
0
760
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.5k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
500
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.2k
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
600
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.7k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
12k
GraphQLとの向き合い方2022年版
quramy
50
14k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
69
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
310
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Practical Orchestrator
shlominoach
191
11k
Amusing Abliteration
ianozsvald
0
92
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
240
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
270
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
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