@duffleit leitner.io
@duffleit leitner.io
Micro Frontends
a Strive for Fully Verticalized Systems
EnterJS Darmstadt, 27.06.2019
Slide 2
Slide 2 text
@duffleit leitner.io
David Leitner
@duffleit
Slide 3
Slide 3 text
@duffleit leitner.io
“the idea of micro frontends is
to extend the concept of micro services
to the frontend world.”
micro-frontends.org
Slide 4
Slide 4 text
@duffleit leitner.io
Secret 1:
That's fine in 80 % of
the cases.
SPA
API
Gateway
Microservice
Microservice Microservice
DB
DB
DB
Slide 5
Slide 5 text
@duffleit leitner.io
Monolith
API
Gateway
SPA
DB
Secret 2:
That's also fine in 80 %
of the cases.
Slide 6
Slide 6 text
@duffleit leitner.io
Microservice
API
Gateway
SPA
Microservice Microservice
DB
DB
DB
Slide 7
Slide 7 text
@duffleit leitner.io
Sam Newman
“microservices are small
and focused on one thing
to be autonomous.”
Slide 8
Slide 8 text
@duffleit leitner.io
Why autonomous?
✔ Independent Deployments
✔ Distinct Operations
✔ Technology Agnostic
✔ Model around Business Domains
✔ Small Interface Surface
✔ Parallel development
Slide 9
Slide 9 text
@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
Slide 10
Slide 10 text
@duffleit leitner.io
Microservice
API
Gateway
SPA
Microservice Microservice
DB
DB
DB
SPA
API
Gateway
Micro
Frontends
Slide 11
Slide 11 text
@duffleit leitner.io
μService
Ordering
μService
DB
μService μService
DB
DB
Catalogue Profile
μService
DB
DB
Hyperlink Hyperlink
Slide 12
Slide 12 text
@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
Slide 13
Slide 13 text
@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
Slide 14
Slide 14 text
@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
Slide 15
Slide 15 text
@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
Slide 16
Slide 16 text
@duffleit leitner.io
The more coarse-grained you can go,
the more coarse-grained you should go.
Or: Think big.
Slide 17
Slide 17 text
@duffleit leitner.io
But,
Slide 18
Slide 18 text
@duffleit leitner.io
Hyperlink Integration
breaks your SPA.
Slide 19
Slide 19 text
@duffleit leitner.io
Slide 20
Slide 20 text
@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
Slide 21
Slide 21 text
@duffleit leitner.io
Dashboard
Profile
Profile
μService
DB
Catalogue
μService
DB
Catalogue
Ordering
Ordering
μService
DB
Dashboard
μService
DB
Slide 22
Slide 22 text
@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.
Slide 23
Slide 23 text
@duffleit leitner.io
How to integrate them?
Slide 24
Slide 24 text
@duffleit leitner.io
Repository
Build & Deploy
Server
Browser
Composed Application Micro Frontend
Build Time Integration Server Side Integration Runtime Integration
@duffleit 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
@duffleit leitner.io
Repository
Build & Deploy
Server
Browser
Composed Application Micro Frontend
Server Side Integration
Project Mosaic
Slide 28
Slide 28 text
@duffleit 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
@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
Slide 30
Slide 30 text
@duffleit leitner.io
supports Javascript-Isolation
init(fragment-dom){
...
}
How about
account
fragment
μService
html
script
styles
1...n
Slide 31
Slide 31 text
@duffleit 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
@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
Component Driven Development
Routing State Management Dependency Injection ...
Slide 36
Slide 36 text
@duffleit leitner.io
the
Meta
Framework
will be the
Framework.
Slide 37
Slide 37 text
@duffleit leitner.io
the aggregation is done on a single point.
Aggregating UI
Slide 38
Slide 38 text
@duffleit leitner.io
the aggregation and configuration is done on a single point.
Aggregating UI
Slide 39
Slide 39 text
@duffleit leitner.io
the aggregation and configuration is done on a single point.
immutablewebapps.org
index.html
https://12factor.net/
Slide 40
Slide 40 text
@duffleit 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 41
Slide 41 text
@duffleit leitner.io
Ok, which one to use?
Slide 42
Slide 42 text
@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.
Slide 43
Slide 43 text
@duffleit leitner.io
Cool, anything that can go wrong?
Slide 44
Slide 44 text
@duffleit leitner.io
UI/UX Consistency
Shared State
Resilience
Tracing/Analytics
Offline-First
...
Slide 45
Slide 45 text
@duffleit leitner.io
1 Micro-Frontend per Page
Hyperlink Integration
n Micro-Frontends per Page
Buildtime Integration
Serverside Integration
Runtime Integration
Slide 46
Slide 46 text
@duffleit leitner.io
Slide 47
Slide 47 text
@duffleit leitner.io
Mix and Match
Landing Shop Ordering
hyperlink hyperlink
APP SHELL
Header
Footer
Slide 48
Slide 48 text
@duffleit leitner.io
Micro-Frontends are
Distributed Systems.
The Final Secret:
Slide 49
Slide 49 text
@duffleit leitner.io
Everything that can
go wrong will go wrong.
The Final Secret:
Murphy’s law
Slide 50
Slide 50 text
@duffleit leitner.io
Maybe start with a
monolithic first approach.
Slide 51
Slide 51 text
@duffleit leitner.io
by: twitter.com/swardley
Slide 52
Slide 52 text
@duffleit leitner.io
David Leitner
@duffleit
slides: leitner.io/talks