@duffleit Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
@duffleit Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
@duffleit ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Based on the assumption to have fully verticalized systems. μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Connected Applications
@duffleit Approach 1: Hyperlink Connected Applications μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting
@duffleit Approach 1: Hyperlink Connected Applications with Backend for Frontends μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB BFF Service BFF Service BFF Service BFF Service https://samnewman.io/patterns/architectural/bff/ Presentation Process Flow Domain Logic Data Presentation Process Flow Domain Logic Data
@duffleit Approach 1: Hyperlink Connected Applications with GraphQL μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB GraphQL Presentation Process Flow Domain Logic Data
@duffleit μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB View Aggregation Layer Horizontal Layer Ripple Effect
@duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
@duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
@duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration
@duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
@duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
@duffleit Tailor is a Layout Server header fragment μService account fragment μService catalogue fragment μService maps your request to a template checkout-template.html ... dashboard.template.html profile-template.html
@duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
@duffleit Server Browser Runtime Integration Longliving App State in the frontend & verticals need to interact with each other. Server Side Integration Request Response Model Interactions between different Verticals are done on the Backend.
squer
niwatakeru
masasuzu
yamamuteki
sat
yuj1osm
tomoaki25
cmusudakeisuke
hanayo04
fujiwara3
antimon2
rakus_dev
hhiroshell
destraynor
morganepeng
chriscoyier
tammielis
eileencodes
cherdarchuk
shpigford
carmenintech
nonsquared
sugarenia
malarkey
smashingmag