Scaling Frontend Architectures with Micro Frontends

@duﬄeit Scaling Architectures with Micro Frontends London Software Craftsmanship Community
David Leitner - @duﬄeit

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

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

@duﬄeit

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

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

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

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

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

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

@duﬄeit

@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

@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

@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

@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

@duﬄeit But,

@duﬄeit Hyperlink Integration breaks your SPA.

@duﬄeit We introduce a horizontal layer.

@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

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

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

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

@duﬄeit

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

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

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

@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

Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development

@duﬄeit Build Time Integration allows Static Site Generation

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

Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development

Frontend Server Side Integration e.g. Project Mosaic

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

@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

Frontend Server Side Integration ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development

@duﬄeit @duﬄeit Round Trips

Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading Meta-SPA-Router

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

@duﬄeit A Meta Framework to handle Frameworks.

@duﬄeit Decomposing Meta Frameworks in real world use cases

@duﬄeit Isolation & Composition Routing Messaging & Shared State Frontend
1 Frontend N ... Option 1: One shared Framework Option 2: Independent “Framework”

1 Frontend N ... Module Federation with Webpack 5 (in beta.17) Option 1: E-Commerce One shared Framework

@duﬄeit Remote Remote Host Container Module Module Module Container Module
Module Module Container Module Module Module fetch from `company.com/remote1` fetch from `company.com/remote2`

@duﬄeit webpack.remote.config.js

@duﬄeit webpack.host.config.js

@duﬄeit shell.js index.html

1 Frontend N ... Option 2: Banking Independent “Framework” Compiler Why “Framework”?

@duﬄeit @duﬄeit

1 Frontend N ... Option 2: Banking Independent “Framework” Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 1: E-Commerce One shared Framework

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

Frontend ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Runtime Integration

@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.

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

@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

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

@duﬄeit

@duﬄeit Mix and Match Landing Shop Ordering hyperlink hyperlink <!–-
SSIs -->   APP SHELL Header Footer

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

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

@duﬄeit Maybe start with a monolithic ﬁrst approach.

@duﬄeit by: twitter.com/swardley

@duffleit @duffleit @duffleit squer.at/slides David Leitner Lead Engineer

Scaling Frontend Architectures with Micro Front...

Scaling Frontend Architectures with Micro Frontends

Transcript

More Decks by SQUER Solutions

Other Decks in Technology

Featured