How do we design a UI when the back-end system consists of dozens (or more) microservices? We have separation and autonomy on the back end, but on the front end this all needs to come back together. How do we stop it from turning into a mess of spaghetti code? How do we prevent simple actions from causing an inefficient torrent of web requests? Join Mauro in building a Composite UI for Microservices from scratch, using .NET Core. Walk away with a clear understanding of what Services UI Composition is and how you can architect front end to be Microservices ready.

1. @mauroservienti
designing a UI for
Microservices
Mauro Servienti
@mauroservienti

2. @mauroservienti
All I wanna do
when I wake up in
the morning is…
Rosanna, Toto. Toto IV

3. @mauroservienti
Buy a "Banana Protector"

4. @mauroservienti
Does a page like that exist?

5. @mauroservienti
“There is no spoon”
Sales
Warehouse
Shipping
Marketing

6. @mauroservienti
Domain Model Decomposition
services owning
their own piece of
information
Single Responsibility Principle

7. @mauroservienti
How can we design something like that?

8. @mauroservienti
Denormalization Temptations…
Marketing Sales Shipping Warehouse
De-normalized API
Client
“Product”ViewModel…
/products/1

9. @mauroservienti
that’s a
cache

10. @mauroservienti
Oh…and by the way…

11. @mauroservienti
Whatchoo talkin' 'bout, Willis?
a report
not a cache

12. @mauroservienti
It's a reporting and integration issue
• 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

13. @mauroservienti
ViewModel Composition
/products/
Marketing Sales Shipping Warehouse
Client
PKPKPKPK
1
ViewModel…

14. @mauroservienti
ViewModel Composition (details)
Marketing
Sales
Shipping
Warehouse
HTTP Request -> /products/1
composition gateway
Marketing
Appender
Sales
Appender
Shipping
Appender
Warehouse
Appender
• Request matching
HTTP Response -> ViewModel
• Composition
• Composed ViewModel

15. @mauroservienti
View Model Appender

16. @mauroservienti
Request matching

17. @mauroservienti
Composition

18. @mauroservienti
Full vertical ownership
Marketing Sales Shipping Warehouse

19. @mauroservienti
Full vertical ownership
Marketing Sales Shipping Warehouse
Doc DB
+
HTTP
DB DB
back-end back-end
Web
Proxy
API
API
Proxy to
3° party
API
1 month
cache
24 hours
cache
No cache10 minutes
cache
front-end
component
front-end
component
front-end
component
front-end
component
client shell

20. @mauroservienti
Full vertical ownership
Marketing Sales Shipping Warehouse
Doc DB
+
HTTP
DB DB
back-end back-end
Web
Proxy
API
API
Proxy to
3° party
API
front-end
component
front-end
component
front-end
component
front-end
component
client shell
composition gateway
Marketing
Appender
Sales
Appender
Shipping
Appender
Warehouse
Appender

21. @mauroservienti
is all what glitters gold?

22. @mauroservienti
What about grids?

23. @mauroservienti
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

24. @mauroservienti
Component from
product-catalog
View
model
Component from
product-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 related
products

25. @mauroservienti
client-side message broker
Component from
product-catalog
Component from
sales
Component from
marketing
View
model
Component from
product-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 related
products
receive event
/products/1

26. @mauroservienti
Component from
product-catalog
Component from
sales
Component from
marketing
View
model
Component from
product-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 related
products
/products/1

27. @mauroservienti
Composition

28. @mauroservienti
Composition

29. @mauroservienti
Composition

30. @mauroservienti
the 45’ tyranny
Demos
bit.ly/better-composition

31. @mauroservienti
Takeaways
• Boundaries are key to success
• Do not bring in more technology to solve non-
technical problems

32. @mauroservienti
Takeaways
• Boundaries are key to success
• Mental model can badly influence design
• Users/Business analysts tend to think in term
of data presentation

33. @mauroservienti
Takeaways
• Boundaries are key to success
• Mental model can badly influence design
• Do not name things prematurely
• Premature names stick and drive data
aggregation

34. @mauroservienti
Takeaways
• Boundaries are key to success
• Mental model can badly influence design
• Do not name things prematurely
• Behaviors define how to aggregate data
• Group data that change together and that influence each
other
• Use anti-requirements techniques to validate data
grouping
• Follow the coupling

35. @mauroservienti
Takeaways
• Boundaries are key to success
• Mental model can badly influence design
• Do not name things prematurely
• Behaviors define how to aggregate data
• Use ViewModel composition to present data
• No need for complex projections and read
models

36. @mauroservienti
Mauro Servienti
Solution Architect @ Particular Software
the makers of NServiceBus
mauro.servienti@particular.net
@mauroservienti
//milestone.topics.it

37. @mauroservienti