Designing a UI for Microservices - ApiConf 2018 · Designing a UI for Microservices Author: Mauro...
36
@mauroservienti | #apiconf2018 Designing a UI for Microservices Mauro Servienti | @mauroservienti
Transcript of Designing a UI for Microservices - ApiConf 2018 · Designing a UI for Microservices Author: Mauro...
@mauroservienti | #apiconf2018
Designing a UIfor MicroservicesMauro Servienti | @mauroservienti
@mauroservienti | #apiconf2018
100% remote
@mauroservienti | #apiconf2018
bike rider
@mauroservienti | #apiconf2018
bananasmy favorite snack
@mauroservienti | #apiconf2018
What could possibly go wrong…
@mauroservienti | #apiconf2018
Let me buy a “banana holder”
@mauroservienti | #apiconf2018
Mauro Servienti
Solution Architect @ Particular Software
@mauroservienti
//milestone.topics.it
@mauroservienti | #apiconf2018
Does a page like that exist?Or put it in another way: does a “Product” class or aggregate exist?
@mauroservienti | #apiconf2018
“There is no spoon”
Sales
Warehouse
Shipping
Marketing
@mauroservienti | #apiconf2018
Domain Model Decomposition
services owningtheir own piece of
information.Single Responsibility Principle
@mauroservienti | #apiconf2018
How can we design something like that?
@mauroservienti | #apiconf2018
Denormalization Temptations…
Marketing Sales Shipping Warehouse
De-normalized API
Client
“Product”ViewModel…
/products/1
@mauroservienti | #apiconf2018
<rant />That’s a cache!
@mauroservienti | #apiconf2018
Oh…and by the way…
@mauroservienti | #apiconf2018
Whatchoo talkin' 'bout, Willis?
a reportnot a cache
@mauroservienti | #apiconf2018
A report
• We're crossing a “boundary”• Data flow out of each service to the user
• Users are already pulling things on demand• let's benefit of that
@mauroservienti | #apiconf2018
ViewModel Composition
Marketing Sales Shipping Warehouse
Client
/products/1
PK PK PK PK
ViewModel…
@mauroservienti | #apiconf2018
Full vertical ownership
Marketing Sales Shipping Warehouse
@mauroservienti | #apiconf2018
Full vertical ownership
Marketing Sales Shipping Warehouse
Doc DB+
HTTPDB DB
back-end back-end
Web Proxy
APIAPI
Proxy to 3° party
API1 month cache
24 hourscache
No cache10 minutescache
front-endcomponent
front-endcomponent
front-endcomponent
front-endcomponent
client shell
@mauroservienti | #apiconf2018
View Model Appender
@mauroservienti | #apiconf2018
Request matching
@mauroservienti | #apiconf2018
Composition
@mauroservienti | #apiconf2018
Full vertical ownershipMarketing Sales Shipping Warehouse
Doc DB+
HTTPDB DB
back-end back-end
Web Proxy
APIAPI
Proxy to 3° party
API
front-endcomponent
front-endcomponent
front-endcomponent
front-endcomponent
client shell
composition gateway
MarketingAppender
SalesAppender
ShippingAppender
WarehouseAppender
@mauroservienti | #apiconf2018
Composition Gateway
@mauroservienti | #apiconf2018
is all that glitters gold?
@mauroservienti | #apiconf2018
What about grids?
@mauroservienti | #apiconf2018
View model/products/1
ProductNameA
€ 20.00
cover image
A
Supplier A
ProductNameB
€ 20.00
cover image
B
Supplier B
ProductNameC
€ 20.00
cover image
C
Supplier C
ProductNameD
€ 20.00
cover image
D
Supplier D
@mauroservienti | #apiconf2018
Component fromproduct-catalog
View model
Component fromproduct-catalog
/products/1
ProductNameA
€ 20.00
cover image
A
Supplier A
ProductNameB
€ 20.00
cover image
B
Supplier B
ProductNameC
€ 20.00
cover image
C
Supplier C
ProductNameD
€ 20.00
cover image
D
Supplier D
load relatedproducts
@mauroservienti | #apiconf2018
client-side message broker
Component fromproduct-catalog
Component from sales
Component from marketing
View model
Component fromproduct-catalog
Component from sales
Component from marketing
ProductNameA
€ 20.00
cover image
A
Supplier A
ProductNameB
€ 20.00
cover image
B
Supplier B
ProductNameC
€ 20.00
cover image
C
Supplier C
ProductNameD
€ 20.00
cover image
D
Supplier D
publish `RelatedProductsFound`
load relatedproducts
receive event
/products/1
@mauroservienti | #apiconf2018
Component fromproduct-catalog
Component from sales
Component from marketing
View model
Component fromproduct-catalog
Component from sales
Component from marketing
ProductNameA
€ 20.00
cover image
A
Supplier A
ProductNameB
€ 20.00
cover image
B
Supplier B
ProductNameC
€ 20.00
cover image
C
Supplier C
ProductNameD
€ 20.00
cover image
D
Supplier D
load relatedproducts
/products/1
@mauroservienti | #apiconf2018
Composition
@mauroservienti | #apiconf2018
Composition
@mauroservienti | #apiconf2018
Composition
@mauroservienti | #apiconf2018
Recap
• Clearly defined ownership
• SRP is respected
• Different caching strategies
• Business is much more flexible
• Select N+1 is not a concern• # of requests will be “# of services”
@mauroservienti | #apiconf2018
//bit.ly/view-model-composition-demos
@mauroservienti | #apiconf2018
