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: Yesterday, Today, Tomorrow
Search
Manfred Steyer
PRO
September 29, 2022
Programming
0
590
Micro Frontends: Yesterday, Today, Tomorrow
Manfred Steyer
PRO
September 29, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
パスタの技術
yusukebe
1
550
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Kiroで始めるAI-DLC
kaonash
2
490
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.4k
私の後悔をAWS DMSで解決した話
hiramax
4
180
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
3
250
AHC051解法紹介
eijirou
0
640
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
🔨 小さなビルドシステムを作る
momeemt
2
630
複雑なドメインに挑む.pdf
yukisakai1225
4
820
Namespace and Its Future
tagomoris
6
670
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Faster Mobile Websites
deanohume
309
31k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fireside Chat
paigeccino
39
3.6k
A Tale of Four Properties
chriscoyier
160
23k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
It's Worth the Effort
3n
187
28k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Invisible Side of Design
smashingmag
301
51k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Transcript
@ManfredSteyer Micro Frontends: Yesterday, Today, Tomorrow
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer #1 When? #2 How? #3 Future
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer Shared Booking Boarding Strict Borders
@ManfredSteyer Shared Booking Boarding Strict Borders
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Shared Booking Boarding SPA: Download to the Client Version
Mismatches?
@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)
@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)
@ManfredSteyer Huge European Bank Domain A Domain B Domain C
Domain D Domain E Domain F eBanking
@ManfredSteyer
@ManfredSteyer Server- side Client- side
@ManfredSteyer iframes: Legacy & Isolation Hyper Links: Easy – No
Meta Framework needed Web Components: Load into SPA, Hide Frameworks
@ManfredSteyer Web Component-Wrapper abstracts differences away Other Wrapper are fine
too, e. g. Meta Frameworks Angular App (MFE) React App (MFE)
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer Optimized Bundles Self-restriction No workarounds Max. amount of flexibility
Monorepo or Governance Bigger Bundles Workarounds ahead!
@ManfredSteyer Module Federation iframes Hyperlinks Web Components Module Federation +
Web Components
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns';
const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
@ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns';
const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
@ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } }
</script>
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer HTML JS DATA FMP
@ManfredSteyer HTML JS DATA TTI FMP
@ManfredSteyer HTML DATA FMP JS JS JS JS JS JS
JS JS TTI
@ManfredSteyer HTML DATA FMP JS JS JS JS TTI
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer It's about Scaling Teams! Runtime Integration is hard Module
Federation is tempting New Wave: Hyperlinks Integration
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io