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
29
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
100
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
97
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
350
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
PicoRuby on Rails
makicamel
3
140
NEWT Backend Evolution
xpromx
1
140
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
Goで作る、開発・CI環境
sin392
0
260
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
189
11k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Rails Girls Zürich Keynote
gr2m
95
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
We Have a Design System, Now What?
morganepeng
53
7.7k
Statistics for Hackers
jakevdp
799
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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