Design a UI for your Microservices @ Do IT Better
Report
Mauro ServientiFollow
Oct. 31, 2018•0 likes•424 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
Design a UI for your Microservices @ Do IT Better
Oct. 31, 2018•0 likes•424 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
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.
Mauro ServientiFollow
Recommended
Progettare una UI per i MicroservicesMauro Servienti
Designing a ui for microservicesMauro Servienti
Designing a ui for microservicesMauro Servienti
Chat will be the next big platformBart De Waele
Management and Design of Digital Products Jovana Tokic
Complete guide on how to start hat business (1)Brush Your Ideas
Design a UI for your Microservices @ Do IT Better
- @mauroservienti designing a UI for Microservices Mauro Servienti @mauroservienti
- @mauroservienti All I wanna do when I wake up in the morning is… Rosanna, Toto. Toto IV
- @mauroservienti Buy a "Banana Protector"
- @mauroservienti Does a page like that exist?
- @mauroservienti “There is no spoon” Sales Warehouse Shipping Marketing
- @mauroservienti Domain Model Decomposition services owning their own piece of information Single Responsibility Principle
- @mauroservienti How can we design something like that?
- @mauroservienti Denormalization Temptations… Marketing Sales Shipping Warehouse De-normalized API Client “Product”ViewModel… /products/1
- @mauroservienti that’s a cache
- @mauroservienti Oh…and by the way…
- @mauroservienti Whatchoo talkin' 'bout, Willis? a report not a cache
- @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
- @mauroservienti ViewModel Composition /products/ Marketing Sales Shipping Warehouse Client PKPKPKPK 1 ViewModel…
- @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
- @mauroservienti View Model Appender
- @mauroservienti Request matching
- @mauroservienti Composition
- @mauroservienti Full vertical ownership Marketing Sales Shipping Warehouse
- @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
- @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
- @mauroservienti is all what glitters gold?
- @mauroservienti What about grids?
- @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
- @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
- @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
- @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
- @mauroservienti Composition
- @mauroservienti Composition
- @mauroservienti Composition
- @mauroservienti the 45’ tyranny Demos bit.ly/better-composition
- @mauroservienti Takeaways • Boundaries are key to success • Do not bring in more technology to solve non- technical problems
- @mauroservienti Takeaways • Boundaries are key to success • Mental model can badly influence design • Users/Business analysts tend to think in term of data presentation
- @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
- @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
- @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
- @mauroservienti Mauro Servienti Solution Architect @ Particular Software the makers of NServiceBus mauro.servienti@particular.net @mauroservienti //milestone.topics.it
- @mauroservienti
Editor's Notes
- I’m a remote worker We live in a small flat, thus I have a small office I enjoy going to the office by bike And I enjoy bananas for my breaks Bike riding and bananas in the backpack are not a great idea, so…
- While showing ownership in overlay....Lots of components, or in SOA lingo services, each one owing different data. Otherwise it's a clear violation of responsibilities.
- It's very tempting to design a technical solution
- It's very tempting to design a technical solution
- It's very tempting to design a technical solution
- It's very tempting to design a technical solution