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
Camel and Eye of a Needle: Integration of SPA-b...
Search
Manfred Steyer
PRO
November 28, 2023
Programming
0
180
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
Manfred Steyer
PRO
November 28, 2023
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
9
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
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
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
92
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
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
990
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
120
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
2.5k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
330
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf 2023
tenderlove
30
1.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A designer walks into a library…
pauljervisheath
207
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Facilitating Awesome Meetings
lara
54
6.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
@ManfredSteyer ManfredSteyer Camel and Eye of a Needle Manfred Steyer,
ANGULARarchitects.io Integration of SPA-based Micro Frontends
@ManfredSteyer Which one is the best?
@ManfredSteyer It’s all about consequences in your very situation!
@ManfredSteyer
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1
Strict Borders
@ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1
Strict Borders
@ManfredSteyer Shared Booking Boarding
@ManfredSteyer Shared Booking Boarding Not officially tested Version Mismatches vs.
Bundle Sizes
@ManfredSteyer #1 Approaches: Traditional SPAs #2 Approaches: "New Wave"
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer µFrontend SPA µFrontend SPA µFrontend SPA
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer µService µFrontend µFrontend µFrontend Shell
@ManfredSteyer iframe Bootstrapping several SPAs Module Federation + meta frameworks
using these approaches e. g. SAP Luigi Framework
@ManfredSteyer <other-spa></other-spa> <script src="other-spa/bundle.js"></script>
@ManfredSteyer const script = document.createElement('script'); script.src = 'other-spa/bundle.js'; document.body.appendChild(script); const
myElement = document.createElement('other-spa'); myElement['visible'] = true; document.body.appendChild(myElement);
@ManfredSteyer Option: Wrap them into Web Components Angular App (MFE)
React App (MFE)
@ManfredSteyer const Component = import('http://other-app/xyz')
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer Single Framework/ Version Multiple Frameworks/ Versions Like Lazy Loading
Like bootstrapping several SPAs + Sharing where same version No workarounds Some workarounds
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer HTML JS DATA FMP
@ManfredSteyer HTML JS DATA TTI FMP
@ManfredSteyer HTML JS DATA TTI "Uncanny Vally" FMP
@ManfredSteyer
@ManfredSteyer HTML DATA FMP JS JS JS JS JS JS
JS JS TTI
@ManfredSteyer HTML DATA FMP JS JS JS JS TTI
@ManfredSteyer
@ManfredSteyer SPAs + MF: Trade-offs Business Apps: Traditional approaches ok
Conversions: New wave very tempting! Evalulate options against requirements!
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io