Verticalized Systems and Micro Frontends

Slide 1

Slide 1 text

@dufﬂeit leitner.io Micro Frontends a Strive for Fully Verticalized Systems Voxxed Days Athen @dufﬂeit leitner.io

Slide 2

Slide 2 text

@dufﬂeit leitner.io David Leitner Senacor Technologies

Slide 3

Slide 3 text

@dufﬂeit leitner.io “the idea of micro frontends is to extend the concept of micro services to the frontend world.”

Slide 4

Slide 4 text

@dufﬂeit leitner.io Secret 1: That's ﬁne in 80 % of the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB

Slide 5

Slide 5 text

@dufﬂeit leitner.io Monolith API Gateway SPA DB Secret 2: That's also ﬁne in 80 % of the cases.

Slide 6

Slide 6 text

@dufﬂeit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB

Slide 7

Slide 7 text

@dufﬂeit leitner.io Sam Newman “microservices are small and focused on one thing to be autonomous.”

Slide 8

Slide 8 text

@dufﬂeit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development

Slide 9

Slide 9 text

@dufﬂeit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith

Slide 10

Slide 10 text

@dufﬂeit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB DB SPA API Gateway Micro Frontends

Slide 11

Slide 11 text

@dufﬂeit leitner.io μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink

Slide 12

Slide 12 text

@dufﬂeit 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

Slide 13

Slide 13 text

@dufﬂeit 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

Slide 14

Slide 14 text

@dufﬂeit 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

Slide 15

Slide 15 text

@dufﬂeit 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

Slide 16

Slide 16 text

@dufﬂeit leitner.io The more coarse-grained you can go, the more coarse-grained you should go. Or: Think big.

Slide 17

Slide 17 text

@dufﬂeit leitner.io But,

Slide 18

Slide 18 text

@dufﬂeit leitner.io Hyperlink Integration breaks your SPA.

Slide 19

Slide 19 text

@dufﬂeit leitner.io

Slide 20

Slide 20 text

@dufﬂeit 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

Slide 21

Slide 21 text

@dufﬂeit leitner.io Dashboard Profile Profile μService DB Catalogue μService DB Catalogue Ordering Ordering μService DB Dashboard μService DB

Slide 22

Slide 22 text

@dufﬂeit 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.

Slide 23

Slide 23 text

@dufﬂeit leitner.io How to integrate them?

Slide 24

Slide 24 text

@dufﬂeit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration

Slide 25

Slide 25 text

@dufﬂeit leitner.io Repository Build & Deploy Server Browser Mono Repo package.json Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Allows extensive code sharing and reuse. ✔ Simpliﬁes Dependency Management. Angular Workspaces

Slide 26

Slide 26 text

@dufﬂeit leitner.io 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

Slide 27

Slide 27 text

@dufﬂeit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration Project Mosaic

Slide 28

Slide 28 text

@dufﬂeit leitner.io Based on the concept of Server Side Includes or Edge Side Includes ⛔ JS and CSS global scoped ⛔ Round-Trips are needed

Slide 29

Slide 29 text

@dufﬂeit 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 proﬁle-template.html

Slide 30

Slide 30 text

@dufﬂeit leitner.io supports Javascript-Isolation init(fragment-dom){ ... } How about account fragment μService html script styles 1...n

Slide 31

Slide 31 text

@dufﬂeit leitner.io supports Javascript-Isolation account fragment μService html script styles 1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM

Slide 32

Slide 32 text

@dufﬂeit 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

Slide 33

Slide 33 text

@dufﬂeit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading

Slide 34

Slide 34 text

@dufﬂeit leitner.io the aggregation is done on a single point. Aggregating UI

Slide 35

Slide 35 text

@dufﬂeit leitner.io the aggregation and conﬁguration is done on a single point. Aggregating UI

Slide 36

Slide 36 text

@dufﬂeit leitner.io the aggregation and conﬁguration is done on a single point. immutablewebapps.org index.html https://12factor.net/

Slide 37

Slide 37 text

@dufﬂeit leitner.io Repository Build & Deploy Server Browser Composed Application Micro Frontend ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Runtime Integration

Slide 38

Slide 38 text

@dufﬂeit leitner.io Ok, which one to use?

Slide 39

Slide 39 text

@dufﬂeit 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.

Slide 40

Slide 40 text

@dufﬂeit leitner.io Cool, anything that can go wrong?

Slide 41

Slide 41 text

@dufﬂeit leitner.io UI/UX Consistency Shared State Resilience Tracing/Analytics Ofﬂine-First ...

Slide 42

Slide 42 text

@dufﬂeit leitner.io 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration

Slide 43

Slide 43 text

@dufﬂeit leitner.io

Slide 44

Slide 44 text

@dufﬂeit leitner.io Micro Frontends in a nutshell Integration and Slicing Is your application big?* Frontend Monolith no Are UI/Domain Parts strongly independent? yes Applications integrated with Hyperlinks yes Server Side Integration no Are Server-Roundtrips a problem? no Runtime Integration yes * an application is big enough to justify using micro frontends, if slight UI/UX differences between the two most unrelated subpages are acceptable.

Slide 45

Slide 45 text

@dufﬂeit leitner.io Mix and Match Landing Shop Ordering hyperlink hyperlink APP SHELL Header Footer

Slide 46

Slide 46 text

@dufﬂeit leitner.io Micro-Frontends are Distributed Systems. The Final Secret:

Slide 47

Slide 47 text

@dufﬂeit leitner.io Everything that can go wrong will go wrong. The Final Secret: Murphy’s law