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

▶
for microservices
SMART_READER_LITE
LIVE PREVIEW

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

Dec 21, 2022 6 likes •369 views

Designing a UI for Microservices Mauro Servienti | @mauroservienti @mauroservienti | #apiconf2018 100% remote @mauroservienti | #apiconf2018 bike rider @mauroservienti | #apiconf2018 bananas my favorite snack @mauroservienti | #apiconf2018

slide-1
SLIDE 1

@mauroservienti | #apiconf2018

Designing a UI for Microservices

Mauro Servienti | @mauroservienti

slide-2
SLIDE 2

@mauroservienti | #apiconf2018

100% remote

slide-3
SLIDE 3

@mauroservienti | #apiconf2018

bike rider

slide-4
SLIDE 4

@mauroservienti | #apiconf2018

bananas

my favorite snack

slide-5
SLIDE 5

@mauroservienti | #apiconf2018

What could possibly go wrong…

slide-6
SLIDE 6

@mauroservienti | #apiconf2018

Let me buy a “banana holder”

slide-7
SLIDE 7

@mauroservienti | #apiconf2018

Mauro Servienti

Solution Architect @ Particular Software mauro.servienti@gmail.com @mauroservienti //milestone.topics.it

slide-8
SLIDE 8

@mauroservienti | #apiconf2018

Does a page like that exist?

Or put it in another way: does a “Product” class or aggregate exist?

slide-9
SLIDE 9

@mauroservienti | #apiconf2018

“There is no spoon”

Sales Warehouse Shipping Marketing

slide-10
SLIDE 10

@mauroservienti | #apiconf2018

Domain Model Decomposition

services owning their own piece of information.

Single Responsibility Principle

slide-11
SLIDE 11

@mauroservienti | #apiconf2018

How can we design something like that?

slide-12
SLIDE 12

@mauroservienti | #apiconf2018

Denormalization Temptations…

Marketing Sales Shipping Warehouse

De-normalized API Client

“Product”

ViewModel…

/products/1

slide-13
SLIDE 13

@mauroservienti | #apiconf2018

<rant />

That’s a cache!

slide-14
SLIDE 14

@mauroservienti | #apiconf2018

Oh…and by the way…

slide-15
SLIDE 15

@mauroservienti | #apiconf2018

Whatchoo talki lkin' 'bout, , Will illis is?

a report

not a cache

slide-16
SLIDE 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
slide-17
SLIDE 17

@mauroservienti | #apiconf2018

ViewModel Composition

Marketing Sales Shipping Warehouse

Client

/products/1

PK PK PK PK

ViewModel…

slide-18
SLIDE 18

@mauroservienti | #apiconf2018

Full vertical ownership

Marketing Sales Shipping Warehouse

slide-19
SLIDE 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 cache 10 minutes cache

front-end component front-end component front-end component front-end component

client shell

slide-20
SLIDE 20

@mauroservienti | #apiconf2018

View Model Appender

slide-21
SLIDE 21

@mauroservienti | #apiconf2018

Request matching

slide-22
SLIDE 22

@mauroservienti | #apiconf2018

Composition

slide-23
SLIDE 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
slide-24
SLIDE 24

@mauroservienti | #apiconf2018

Composition Gateway

slide-25
SLIDE 25

@mauroservienti | #apiconf2018

is all that glitters gold?

slide-26
SLIDE 26

@mauroservienti | #apiconf2018

What about grids?

slide-27
SLIDE 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
slide-28
SLIDE 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

slide-29
SLIDE 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

slide-30
SLIDE 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

slide-31
SLIDE 31

@mauroservienti | #apiconf2018

Composition

slide-32
SLIDE 32

@mauroservienti | #apiconf2018

Composition

slide-33
SLIDE 33

@mauroservienti | #apiconf2018

Composition

slide-34
SLIDE 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”
slide-35
SLIDE 35

@mauroservienti | #apiconf2018

//bit.ly/view-model-composition-demos

slide-36
SLIDE 36

@mauroservienti | #apiconf2018