for Microservices Mauro Servienti | @mauroservienti @mauroservienti - PowerPoint PPT Presentation

Designing a UI for Microservices Mauro Servienti | @mauroservienti @mauroservienti | #apiconf2018

100% remote @mauroservienti | #apiconf2018

bike rider @mauroservienti | #apiconf2018

bananas my 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 mauro.servienti@gmail.com @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” Marketing Sales Shipping Warehouse @mauroservienti | #apiconf2018

Domain Model Decomposition services owning their 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 ViewModel… “Product” Client /products/1 @mauroservienti | #apiconf2018

That’s a cache! <rant /> @mauroservienti | #apiconf2018

Oh…and by the way… @mauroservienti | #apiconf2018

a report not a cache Whatchoo talki lkin' 'bout, , Will illis is? @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 PK PK PK PK Client ViewModel… /products/1 @mauroservienti | #apiconf2018

Full vertical ownership Marketing Sales Shipping Warehouse @mauroservienti | #apiconf2018

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

View Model Appender @mauroservienti | #apiconf2018

Request matching @mauroservienti | #apiconf2018

Composition @mauroservienti | #apiconf2018

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

Composition Gateway @mauroservienti | #apiconf2018

is all that glitters gold? @mauroservienti | #apiconf2018

What about grids? @mauroservienti | #apiconf2018

ProductNameA ProductNameB ProductNameC ProductNameD Supplier A Supplier B Supplier C Supplier D cover cover cover cover image image image image A B C D € 20.00 € 20.00 € 20.00 € 20.00 View /products/1 model @mauroservienti | #apiconf2018

ProductNameA ProductNameB ProductNameC ProductNameD Supplier A Supplier B Supplier C Supplier D cover cover cover cover image image image image A B C D € 20.00 € 20.00 € 20.00 € 20.00 View /products/1 model Component from product-catalog load related products Component from product-catalog @mauroservienti | #apiconf2018

ProductNameA ProductNameB ProductNameC ProductNameD Supplier A Supplier B Supplier C Supplier D cover cover cover cover image image image image A B C D € 20.00 € 20.00 € 20.00 € 20.00 View /products/1 model Component from Component from Component from product-catalog sales marketing publish `RelatedProductsFound` receive event load related client-side message broker products Component from Component from Component from product-catalog sales marketing @mauroservienti | #apiconf2018

ProductNameA ProductNameB ProductNameC ProductNameD Supplier A Supplier B Supplier C Supplier D cover cover cover cover image image image image A B C D € 20.00 € 20.00 € 20.00 € 20.00 View /products/1 model Component from Component from Component from product-catalog sales marketing load related products Component from Component from Component from product-catalog sales marketing @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

@mauroservienti | #apiconf2018