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-based Micro Frontends
Search
Manfred Steyer
PRO
November 28, 2023
Programming
0
110
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
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
20240706_CDKConf
takuyay0ne
0
1.2k
Namespace on read
tagomoris
2
370
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 07
javiergs
PRO
0
220
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
小さな開発会社を作った理由
polidog
0
1.9k
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Agile that works and the tools we love
rasmusluckow
325
20k
Raft: Consensus for Rubyists
vanstee
134
6.5k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Git: the NoSQL Database
bkeepers
PRO
423
64k
The Cult of Friendly URLs
andyhume
75
5.9k
For a Future-Friendly Web
brad_frost
173
9.2k
Designing the Hi-DPI Web
ddemaree
276
34k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Music & Morning Musume
bryan
43
5.9k
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