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
96
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
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
69
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
78
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
160
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
70
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
110
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
94
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
260
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
440
Micro Frontends with Web Standards
manfredsteyer
PRO
1
330
Other Decks in Programming
See All in Programming
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
15k
SIMD Parallel Programming with the Vector API
josepaumard
0
250
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
An adventure of Happy Eyeballs
coe401_
0
110
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
13
1.6k
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
120
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.3k
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
110
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
Sheets API使ってみた
toshi0383
2
180
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Thoughts on Productivity
jonyablonski
60
3.9k
What's in a price? How to price your products and services
michaelherold
238
11k
Six Lessons from altMBA
skipperchong
22
3k
Docker and Python
trallard
35
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Designing for humans not robots
tammielis
247
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Scaling GitHub
holman
457
140k
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