Micro Frontends in the Wild

Slide 1

Slide 1 text

@duﬄeit Micro Frontends in the Wild . NDC London 2020 David Leitner - @duﬄeit

Slide 2

Slide 2 text

@duffleit @duffleit @duffleit [email protected] David Leitner Lead Engineer

Slide 3

Slide 3 text

@duﬄeit “microservices are small and focused on one thing to be autonomous.”

Slide 4

Slide 4 text

@duﬄeit

Slide 5

Slide 5 text

@duﬄeit Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development

Slide 6

Slide 6 text

@duﬄeit Microservice Microservice Microservice DB DB DB Microservice Microservice Microservice DB DB DB

Slide 7

Slide 7 text

@duﬄeit Disclaimer: That's ﬁne in 80 % of the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB

Slide 8

Slide 8 text

@duﬄeit Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith

Slide 9

Slide 9 text

@duﬄeit Microservice API Gateway SPA Microservice Microservice DB DB DB SPA API Gateway Micro Frontends

Slide 10

Slide 10 text

@duﬄeit μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink

Slide 11

Slide 11 text

@duﬄeit

Slide 12

Slide 12 text

@duﬄeit ✔ 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

@duﬄeit 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

Slide 14

Slide 14 text

@duﬄeit 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

@duﬄeit 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

@duﬄeit But,

Slide 17

Slide 17 text

@duﬄeit Hyperlink Integration breaks your SPA.

Slide 18

Slide 18 text

@duﬄeit We introduce another horizontal layer.

Slide 19

Slide 19 text

@duﬄeit μ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 20

Slide 20 text

@duﬄeit Only works on a very coarse grained level. Ordering Catalogue Hyperlink Hyperlink Dashboard

Slide 21

Slide 21 text

@duﬄeit Dashboard Profile Profile μService DB Catalogue μService DB Catalogue Ordering Ordering μService DB Dashboard μService DB

Slide 22

Slide 22 text

@duﬄeit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard Two Deﬁnitions of Micro Frontends One “Micro Frontend” per page. 2...n Micro Frontends per page.

Slide 23

Slide 23 text

@duﬄeit

Slide 24

Slide 24 text

@duﬄeit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard Two Deﬁnitions of Micro Frontends One “Micro Frontend” per page. 2...n Micro Frontends per page.

Slide 25

Slide 25 text

@duﬄeit How to integrate them? @duﬄeit

Slide 26

Slide 26 text

@duﬄeit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration

Slide 27

Slide 27 text

@duﬄeit Repository Build & Deploy Server Browser Mono Repo package.json Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Allows extensive code sharing and reuse. ✔ No Version Conﬂicts and burden with distributing libraries Angular Workspaces

Slide 28

Slide 28 text

@duﬄeit 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 29

Slide 29 text

@duﬄeit Build Time Integration allows Static Site Generation

Slide 30

Slide 30 text

@duﬄeit Product Product Product new Product Product Page Product Page Product Page Product Page Static Files Scully Rebuild

Slide 31

Slide 31 text

Slide 32

Slide 32 text

@duﬄeit Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration e.g. Project Mosaic

Slide 33

Slide 33 text

@duﬄeit Based on the concept of Server Side Includes or Edge Side Includes

Slide 34

Slide 34 text

@duﬄeit 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 35

Slide 35 text

@duﬄeit 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 36

Slide 36 text

@duﬄeit @duﬄeit Round Trips

Slide 37

Slide 37 text

@duﬄeit Repository Build & Deploy Server Browser Composed Application Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading Meta-SPA-Router

Slide 38

Slide 38 text

@duﬄeit A Meta Framework to handle Frameworks.

Slide 39

Slide 39 text

@duﬄeit Meta Framework Isolation & Composition Routing Messaging & Shared State Web Platform Isolation & Composition Routing Frontend 1 Frontend N ... Frontend N Frontend 1 ...

Slide 40

Slide 40 text

@duﬄeit @duﬄeit

Slide 41

Slide 41 text

@duﬄeit @duﬄeit

Slide 42

Slide 42 text

@duﬄeit index.html Meta Framework Isolation & Composition Routing Messaging & Shared State Web Platform Isolation & Composition Routing Messaging & Shared State Frontend N Frontend 1 ... Frontend N Frontend 1 ... Frontend N + 1

Slide 43

Slide 43 text

@duﬄeit our environment is the index.html immutablewebapps.org index.html https://12factor.net/

Slide 44

Slide 44 text

@duﬄeit 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 45

Slide 45 text

@duﬄeit 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.

Slide 46

Slide 46 text

@duﬄeit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration

Slide 47

Slide 47 text

@duﬄeit Complexities: ● UI/UX Consistency ● Shared State ● Resilience ● Tracing/Analytics ● Ofﬂine-First ● ... ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development

Slide 48

Slide 48 text

@duﬄeit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration

Slide 49

Slide 49 text

@duﬄeit

Slide 50

Slide 50 text

@duﬄeit Mix and Match Landing Shop Ordering hyperlink hyperlink APP SHELL Header Footer

Slide 51

Slide 51 text

@duﬄeit Micro-Frontends are Distributed Systems. The Final Secret:

Slide 52

Slide 52 text

@duﬄeit Everything that can go wrong will go wrong. The Final Secret: Murphy’s law