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
All About Angular's New Signal Forms
manfredsteyer
PRO
0
37
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
86
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
54
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
31
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
380
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
640
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
520
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
止められない医療アプリ、そっと Swift 6 へ
medley
1
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.9k
Le côté obscur des IA génératives
pascallemerrer
0
100
CSC305 Lecture 01
javiergs
PRO
1
390
私はどうやって技術力を上げたのか
yusukebe
43
17k
CSC305 Lecture 04
javiergs
PRO
0
230
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
120
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
130
開発生産性を上げるための生成AI活用術
starfish719
1
150
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
360
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Docker and Python
trallard
46
3.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Why Our Code Smells
bkeepers
PRO
339
57k
We Have a Design System, Now What?
morganepeng
53
7.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Unsuck your backbone
ammeep
671
58k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Designing for humans not robots
tammielis
254
25k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Mobile First: as difficult as doing things right
swwweet
224
9.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