Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
530
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
60
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
170
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
70
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
140
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
manfredsteyer
PRO
0
67
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
98
The Missing Link in Angular's Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
manfredsteyer
PRO
0
83
Reactivity, Reimagined: Angular Signals at Every Layer
manfredsteyer
PRO
0
97
Other Decks in Programming
See All in Programming
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
marcoroth
0
230
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2k
JJUG CCC 2025 Fall Javaコミュニティの歩き方 〜参加から貢献まで、すべて教えます〜
takasyou
0
410
スタートアップを支える技術戦略と組織づくり
pospome
8
14k
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
170
チーム開発の “地ならし"
konifar
8
6.7k
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
6
2.8k
JEP 496 と JEP 497 から学ぶ耐量子計算機暗号入門 / Learning Post-Quantum Crypto Basics from JEP 496 & 497
mackey0225
2
530
251126 TestState APIってなんだっけ?Step Functionsテストどう変わる?
east_takumi
0
290
Google Antigravity and Vibe Coding: Agentic Development Guide
mickey_kubo
2
110
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
400
All(?) About Point Sets
hole
0
240
Featured
See All Featured
Scaling GitHub
holman
464
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
990
GraphQLとの向き合い方2022年版
quramy
49
14k
How STYLIGHT went responsive
nonsquared
100
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
68k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Automating Front-end Workflow
addyosmani
1371
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
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