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
190
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
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
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
220
Other Decks in Programming
See All in Programming
AI時代に学習する意味はあるのか?
tomoyakamaji
0
100
tool ディレクティブを導入してみた感想
sgash708
1
160
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
390
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
210
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
140
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
パスタの技術
yusukebe
1
550
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
AHC051解法紹介
eijirou
0
640
時間軸から考えるTerraformを使う理由と留意点
fufuhu
7
1.1k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.7k
Featured
See All Featured
KATA
mclloyd
32
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Designing for humans not robots
tammielis
253
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Navigating Team Friction
lara
189
15k
Optimizing for Happiness
mojombo
379
70k
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