@duffleit
Scaling Architectures with
Micro Frontends
London Software Craftsmanship Community
David Leitner - @duffleit
Slide 2
Slide 2 text
@duffleit
@duffleit
@duffleit
[email protected]
David Leitner
Lead Engineer
Slide 3
Slide 3 text
@duffleit
“microservices are small
and focused on one thing
to be autonomous.”
Slide 4
Slide 4 text
@duffleit
Slide 5
Slide 5 text
@duffleit
Why autonomous?
✔ Independent Deployments
✔ Distinct Operations
✔ Technology Agnostic
✔ Model around Business Domains
✔ Small Interface Surface
✔ Parallel development
Slide 6
Slide 6 text
@duffleit
Microservice
Microservice Microservice
DB
DB
DB
Microservice
Microservice Microservice
DB
DB
DB
Slide 7
Slide 7 text
@duffleit
Disclaimer:
That's fine in 80 % of
the cases.
SPA
API
Gateway
Microservice
Microservice Microservice
DB
DB
DB
Slide 8
Slide 8 text
@duffleit
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
@duffleit
Microservice
API
Gateway
SPA
Microservice Microservice
DB
DB
DB
SPA
API
Gateway
Micro
Frontends
Slide 10
Slide 10 text
@duffleit
μService
Ordering
μService
DB
μService μService
DB
DB
Catalogue Profile
μService
DB
DB
Hyperlink Hyperlink
Slide 11
Slide 11 text
@duffleit
Slide 12
Slide 12 text
@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
Slide 13
Slide 13 text
@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
Slide 14
Slide 14 text
@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
Slide 15
Slide 15 text
@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
Slide 16
Slide 16 text
@duffleit
But,
Slide 17
Slide 17 text
@duffleit
Hyperlink Integration
breaks your SPA.
Slide 18
Slide 18 text
@duffleit
We introduce a
horizontal layer.
Slide 19
Slide 19 text
@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
Slide 20
Slide 20 text
@duffleit
Only works on a very
coarse grained level.
Ordering
Catalogue
Hyperlink Hyperlink
Dashboard
Slide 21
Slide 21 text
@duffleit
Dashboard
Profile
Profile
μService
DB
Catalogue
μService
DB
Catalogue
Ordering
Ordering
μService
DB
Dashboard
μService
DB
Slide 22
Slide 22 text
@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.
Slide 23
Slide 23 text
@duffleit
Slide 24
Slide 24 text
@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.
Slide 25
Slide 25 text
@duffleit
How to integrate them?
@duffleit
Slide 26
Slide 26 text
@duffleit
Repository
Build & Deploy
Server
Browser
Composed Application Micro Frontend
Build Time Integration Server Side Integration Runtime Integration
Slide 27
Slide 27 text
@duffleit
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 Conflicts and
burden with distributing
libraries
Angular
Workspaces
Slide 28
Slide 28 text
@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
Slide 29
Slide 29 text
@duffleit
Build Time Integration allows
Static Site Generation
@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
Slide 32
Slide 32 text
@duffleit
Repository
Build & Deploy
Server
Browser
Composed Application Micro Frontend
Server Side Integration
e.g. Project Mosaic
Slide 33
Slide 33 text
@duffleit
Based on the concept of Server Side Includes
or Edge Side Includes
Slide 34
Slide 34 text
@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
Slide 35
Slide 35 text
@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
Isolation &
Composition
Routing
Messaging &
Shared State
Frontend 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
Slide 51
Slide 51 text
@duffleit
our environment is the index.html
immutablewebapps.org
index.html
https://12factor.net/
Slide 52
Slide 52 text
@duffleit
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 53
Slide 53 text
@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.
Slide 54
Slide 54 text
@duffleit
1 Micro-Frontend per Page
Hyperlink Integration
n Micro-Frontends per Page
Buildtime Integration
Server Side Integration
Runtime Integration
Slide 55
Slide 55 text
@duffleit
Complexities:
● UI/UX Consistency
● Shared State
● Resilience
● Tracing/Analytics
● Offline-First
● ...
✔ Independent
Deployments
✔ Distinct
Operations
✔ Technology
Agnostic
✔ Model around
Business Domains
✔ Small Interface
Surface
✔ Parallel
development
Slide 56
Slide 56 text
@duffleit
1 Micro-Frontend per Page
Hyperlink Integration
n Micro-Frontends per Page
Buildtime Integration
Serverside Integration
Runtime Integration
Slide 57
Slide 57 text
@duffleit
Slide 58
Slide 58 text
@duffleit
Mix and Match
Landing Shop Ordering
hyperlink hyperlink
APP SHELL
Header
Footer
Slide 59
Slide 59 text
@duffleit
Micro-Frontends are
Distributed Systems.
The Final Secret:
Slide 60
Slide 60 text
@duffleit
Everything that can
go wrong will go wrong.
The Final Secret:
Murphy’s law
Slide 61
Slide 61 text
@duffleit
Maybe start with a
monolithic first approach.
Slide 62
Slide 62 text
@duffleit
by: twitter.com/swardley
Slide 63
Slide 63 text
@duffleit
@duffleit
@duffleit
squer.at/slides
David Leitner
Lead Engineer