@duffleit
David Leitner
▪ Technical Consultant for Senacor Technologies
▪ Lecturer for post diploma courses at UAS
Technikum Vienna
▪ I do a couple of things around the tech-
community
I‘m writing code
Slide 5
Slide 5 text
@duffleit
A definition of micro frontends
The idea of micro frontends is
to extend the concepts of micro services
to the frontend world.
Slide 6
Slide 6 text
@duffleit
Sam Newman:
▪ small and focused
on one thing
▪ … to be autonomous
▪ That‘s it
WHY we do them?
Microservices
* UBERHDTV - https://imgur.com/gallery/nup4lfX
CVDD
HDD/EDD
*
Slide 7
Slide 7 text
@duffleit
why autonomous?
✅Independent deployments
✅Small interface surface
✅Technology agnostic
✅Based on standards
✅Autonomous operations
✅Parallel Development
Slide 8
Slide 8 text
@duffleit
„Microservices are stated
as a contrast system to monoliths.“
Where they came from
Slide 9
Slide 9 text
@duffleit
the application
the database
Ball of Mud
Brian Foote
Joseph Yoder
Slide 10
Slide 10 text
@duffleit
database layer
the database
business layer
frontend layer
Slide 11
Slide 11 text
@duffleit
database layer
the database
business layer
frontend layer
Change
#rippleEffect
Slide 12
Slide 12 text
@duffleit
payment
the database
products
user shipping
Slide 13
Slide 13 text
@duffleit
DB
DB
DB DB DB DB
DB
DB
DB
Slide 14
Slide 14 text
@duffleit
DB
DB
DB DB DB DB
DB
DB
DB
Independent deployments
Autonomous operations
Technology agnostic
Based on standards
Parallel Development
Small interface surface
Slide 15
Slide 15 text
@duffleit
Slide 16
Slide 16 text
@duffleit
But wait, …
our microservices have
actual human users.
- Stefan Tilkov
Slide 17
Slide 17 text
@duffleit
Slide 18
Slide 18 text
@duffleit
the frontend
Slide 19
Slide 19 text
@duffleit
The frontend is …
not an implementation detail,
it is a critical part of a
microservice architecture.
Slide 20
Slide 20 text
@duffleit
frontend
platform
backend
platform
Independent deployments
Autonomous operations
Technology agnostic
Based on standards
Parallel Development
Small interface surface
a frontend monolith was born
a micro frontend
TO THE RESCUE
Independent deployments
Autonomous operations
Technology agnostic
Based on standards
Parallel Development
Small interface surface
@duffleit
Flavour #2: Build Time Integration
Independent deployments
Autonomous operations
Technology agnostic
Parallel Development
A consistent UI/UX
Smooth user interaction
Fast loading*
BUNDLED FRONTED
UI-Shared-Stuff (e.g. SPA-Framework, Components)
Slide 35
Slide 35 text
@duffleit
#3: Transclusion
Slide 36
Slide 36 text
@duffleit
Flavour #3: Transclusion
BUNDLED FRONTED
UI-Shared-Stuff (e.g. SPA-Framework, Components)
The bundling is done
by the webserver.
Slide 37
Slide 37 text
@duffleit
Flavour #3: Server Side Includes or Edge Side Includes
Slide 38
Slide 38 text
@duffleit
Flavour #3: Transclusion
Independent deployments
Autonomous operations
Technology agnostic
Parallel Development
A consistent UI/UX
Smooth user interaction
Fast loading
BUNDLED FRONTED
UI-Shared-Stuff (e.g. SPA-Framework, Components)
Slide 39
Slide 39 text
@duffleit
#4: App Shell Integration
Slide 40
Slide 40 text
@duffleit
Flavour #4: App Shell Integration
APP SHELL
Header
Footer
The aggregation is
done on the client.
Slide 41
Slide 41 text
@duffleit
Flavour #4: App Shell Integration
Independent deployments
Autonomous operations
Technology agnostic
Parallel Development
A consistent UI/UX
Smooth user interaction
Fast loading
APP SHELL
Header
Footer
Slide 42
Slide 42 text
@duffleit
#5: Metaframework
Slide 43
Slide 43 text
@duffleit
Flavour #5: Metaframework
Route-based
modularisation is
handled by a
Metaframework
Metaframework
/catalogue /checkout
Slide 44
Slide 44 text
@duffleit
/catalogue /checkout
APP SHELL
Header
Footer
A matter of modularisation
Hyperlink Integration App Shell Integration Metaframework
Slide 45
Slide 45 text
@duffleit
Flavour #5: Metaframework
Route-based
modularisation is
handled by a
Metaframework
Metaframework
/catalogue /checkout
Slide 46
Slide 46 text
@duffleit
• they are implemented with iframes.
• or start using web components now.
Flavour #5: Technology agnostic
Slide 47
Slide 47 text
@duffleit
Flavour #5: Metaframework
Metaframework
/catalogue /checkout
Independent deployments
Autonomous operations
Technology agnostic
Parallel Development
A consistent UI/UX
Smooth user interaction
Fast loading
Slide 48
Slide 48 text
@duffleit
„a consistent UI“
1) CDN – for static files
2) CMS – for static content
3) A Component Library
Slide 49
Slide 49 text
@duffleit
„a component library in code“
SPA-C
SPA-B
SPA-A
component
library
Time
Effort
2019 2020 2021
component
library
component
library
a promise that you will save time in the future by reusage.
you introduce a dependency
between your projects.
copy & own
Slide 50
Slide 50 text
@duffleit
>> A little copying is better than
a little dependency.
Rob Pike
Slide 51
Slide 51 text
@duffleit
„a component library“
If you really need a component library,
then build it framework agnostic.
If Angular can be ignored JSX + CSS Modules
worked good for us.
And, of course web components.
Slide 52
Slide 52 text
@duffleit
Web Components
in
2019
Think
they
do
What
they really
do
Say
they
do
what people…
* If you have real world project
experience with a web-component
based component library which is
running in production, let’s chat
afterwards – I pay the beer.
Slide 53
Slide 53 text
@duffleit
a design system > component library
png component
Even if something has to look equal,
it does not have to be technically
the same.
Source of truth Technical Representation
Slide 54
Slide 54 text
@duffleit
Flavour #5: Metaframework
Metaframework
/catalogue /checkout
Independent deployments
Autonomous operations
Technology agnostic
Parallel Development
A consistent UI/UX
Smooth user interaction
Fast loading
Slide 55
Slide 55 text
@duffleit
https://codeburst.io/building-efficient-components-6ee2bdaea542
the metaframework will be the framework
Slide 56
Slide 56 text
@duffleit
Hyperlink Integration
Build Time Integration
Transclusion
App Shell Integration
Metaframework
the agony
of choice
Slide 57
Slide 57 text
@duffleit
every consultant.
always.
it depends
Slide 58
Slide 58 text
@duffleit
A general decision advice
Your
application
is big?*
The need for
smooth user
interaction
Build Time
Integration
Hyperlink
Integration
Strongly
Independent
UI/Domain
Parts
Complex
modularisation
needed
Transclusion
App Shell
Integration
Meta-
Framework
* an application is big enough to justify using micro frontends, if slight UI/UX
differences between the two most unrelated subpages are acceptable.
Yes
No