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 @WAD 2025, Berlin
manfredsteyer
PRO
0
25
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
87
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
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
93
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
100
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Is Xcode slowly dying out in 2025?
uetyo
1
270
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Hack Claude Code with Claude Code
choplin
4
2k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
効率的な開発手段として VRTを活用する
ishkawa
0
140
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Invisible Side of Design
smashingmag
301
51k
It's Worth the Effort
3n
185
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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