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
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
490
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
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
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
230
Other Decks in Programming
See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
Testing Trophyは叫ばない
toms74209200
0
880
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
Rancher と Terraform
fufuhu
2
400
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
300
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Thoughts on Productivity
jonyablonski
70
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How STYLIGHT went responsive
nonsquared
100
5.8k
Side Projects
sachag
455
43k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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