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
95
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
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
45
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
65
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
100
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
90
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
250
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
430
Micro Frontends with Web Standards
manfredsteyer
PRO
1
320
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Other Decks in Programming
See All in Programming
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
200
Documentation for users with AsciiDoc and Antora
ahus1
0
370
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
PHPはいつから死んでいるかの調査
chiroruxx
2
420
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
410
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
見た目から始める生産性向上
ikumatadokoro
10
1.5k
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
470
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
340
Elm Form Validation
bkuhlmann
0
520
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Featured
See All Featured
Code Review Best Practice
trishagee
56
15k
Building an army of robots
kneath
300
41k
Building Applications with DynamoDB
mza
88
5.6k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Become a Pro
speakerdeck
PRO
13
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Six Lessons from altMBA
skipperchong
22
3k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A better future with KSS
kneath
231
16k
A Tale of Four Properties
chriscoyier
153
22k
Web Components: a chance to create the future
zenorocha
306
41k
Ruby is Unlike a Banana
tanoku
96
10k
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