@duffleit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
@duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
@duffleit leitner.io ✔ 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 leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting Approach 1: Hyperlink Connected Applications
@duffleit leitner.io 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 leitner.io 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 leitner.io μ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 leitner.io Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard How to slice? One “Micro Frontend” per page. 2...n Micro Frontends per page.
@duffleit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration
@duffleit leitner.io 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 leitner.io supports Javascript-Isolation account fragment μService html script styles 1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM
@duffleit leitner.io 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 leitner.io Server Browser Server Side Integration Runtime Integration Request Response Model Interactions between different Verticals are done on the Backend. Longliving App State in the frontend & verticals need to interact with each other.
squer
oracle4engineer
shohei1029
microcms
onlinesalon
benevolent0505
nearme_tech
cyberagentdevelopers
irof
trycycle
hikiroku
moyheen
y_iwai
morganepeng
aarron
shpigford
thoeni
mojombo
kastner
akosma
jacobian
denniskardys
chriscoyier
bermonpainter
moore