Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing a ui for microservices

144 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Designing a ui for microservices

  1. 1. @mauroservienti | #apiconf2018 Designing a UI for Microservices Mauro Servienti | @mauroservienti
  2. 2. @mauroservienti | #apiconf2018 100% remote
  3. 3. @mauroservienti | #apiconf2018 bike rider
  4. 4. @mauroservienti | #apiconf2018 bananas my favorite snack
  5. 5. @mauroservienti | #apiconf2018 What could possibly go wrong…
  6. 6. @mauroservienti | #apiconf2018 Let me buy a “banana holder”
  7. 7. @mauroservienti | #apiconf2018 Mauro Servienti Solution Architect @ Particular Software mauro.servienti@gmail.com @mauroservienti //milestone.topics.it
  8. 8. @mauroservienti | #apiconf2018 Does a page like that exist? Or put it in another way: does a “Product” class or aggregate exist?
  9. 9. @mauroservienti | #apiconf2018 “There is no spoon” Sales Warehouse Shipping Marketing
  10. 10. @mauroservienti | #apiconf2018 Domain Model Decomposition services owning their own piece of information. Single Responsibility Principle
  11. 11. @mauroservienti | #apiconf2018 How can we design something like that?
  12. 12. @mauroservienti | #apiconf2018 Denormalization Temptations… Marketing Sales Shipping Warehouse De-normalized API Client “Product”ViewModel… /products/1
  13. 13. @mauroservienti | #apiconf2018 <rant /> That’s a cache!
  14. 14. @mauroservienti | #apiconf2018 Oh…and by the way…
  15. 15. @mauroservienti | #apiconf2018 Whatchoo talkin' 'bout, Willis? a report not a cache
  16. 16. @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
  17. 17. @mauroservienti | #apiconf2018 ViewModel Composition Marketing Sales Shipping Warehouse Client /products/1 PK PK PK PK ViewModel…
  18. 18. @mauroservienti | #apiconf2018 Full vertical ownership Marketing Sales Shipping Warehouse
  19. 19. @mauroservienti | #apiconf2018 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. 20. @mauroservienti | #apiconf2018 View Model Appender
  21. 21. @mauroservienti | #apiconf2018 Request matching
  22. 22. @mauroservienti | #apiconf2018 Composition
  23. 23. @mauroservienti | #apiconf2018 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
  24. 24. @mauroservienti | #apiconf2018 Composition Gateway
  25. 25. @mauroservienti | #apiconf2018 is all that glitters gold?
  26. 26. @mauroservienti | #apiconf2018 What about grids?
  27. 27. @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
  28. 28. @mauroservienti | #apiconf2018 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
  29. 29. @mauroservienti | #apiconf2018 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
  30. 30. @mauroservienti | #apiconf2018 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
  31. 31. @mauroservienti | #apiconf2018 Composition
  32. 32. @mauroservienti | #apiconf2018 Composition
  33. 33. @mauroservienti | #apiconf2018 Composition
  34. 34. @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”
  35. 35. @mauroservienti | #apiconf2018 //bit.ly/view-model-composition-demos
  36. 36. @mauroservienti | #apiconf2018

×