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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
99
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
7.7k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
4.8k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.9k
C++20 射影変換
faithandbrave
0
560
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
Select API from Kotlin Coroutine
jmatsu
1
220
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
GitHub's CSS Performance
jonrohan
1031
460k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Side Projects
sachag
455
42k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Done Done
chrislema
184
16k
Thoughts on Productivity
jonyablonski
69
4.7k
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