leitner.io - @duffleit
micro frontends
a strive for fully verticalized systems_
leitner.io - @duffleit
Voxxed Days Bucharest
Slide 2
Slide 2 text
leitner.io - @duffleit
micro frontends
just another buzzword_
leitner.io - @duffleit
Voxxed Days Bucharest
Slide 3
Slide 3 text
leitner.io - @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 4
Slide 4 text
leitner.io - @duffleit
A definition of micro frontends
The idea of micro frontends is
to extend the concepts of micro services
to the frontend world.
Slide 5
Slide 5 text
leitner.io - @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 6
Slide 6 text
leitner.io - @duffleit
why autonomous?
✅Independent deployments
✅Small interface surface
✅Technology agnostic
✅Based on standards
✅Autonomous operations
✅Parallel Development
Slide 7
Slide 7 text
leitner.io - @duffleit
„Microservices are stated
as a contrast system to monoliths.“
Where they came from
Slide 8
Slide 8 text
leitner.io - @duffleit
the application
the database
Ball of Mud
Brian Foote
Joseph Yoder
Slide 9
Slide 9 text
leitner.io - @duffleit
database layer
the database
business layer
frontend layer
Slide 10
Slide 10 text
leitner.io - @duffleit
database layer
the database
business layer
frontend layer
Change
#rippleEffect
Slide 11
Slide 11 text
leitner.io - @duffleit
payment
the database
products
user shipping
Slide 12
Slide 12 text
leitner.io - @duffleit
DB
DB
DB DB DB DB
DB
DB
DB
Slide 13
Slide 13 text
leitner.io - @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 14
Slide 14 text
leitner.io - @duffleit
Slide 15
Slide 15 text
leitner.io - @duffleit
But wait, …
our microservices have
actual human users.
- Stefan Tilkov
Slide 16
Slide 16 text
leitner.io - @duffleit
Slide 17
Slide 17 text
leitner.io - @duffleit
the frontend
Slide 18
Slide 18 text
leitner.io - @duffleit
The frontend is …
not an implementation detail,
it is a critical part of a
microservice architecture.
Slide 19
Slide 19 text
leitner.io - @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
Slide 20
Slide 20 text
leitner.io - @duffleit
Slide 21
Slide 21 text
leitner.io - @duffleit
an approach
driven comparison
of micro frontends
leitner.io - @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 37
Slide 37 text
leitner.io - @duffleit
#3: Transclusion
Slide 38
Slide 38 text
leitner.io - @duffleit
Flavour #3: Transclusion
BUNDLED FRONTED
UI-Shared-Stuff (e.g. SPA-Framework, Components)
The bundling is done
by the webserver.
Slide 39
Slide 39 text
leitner.io - @duffleit
Flavour #3: Server Side Includes or Edge Side Includes
Slide 40
Slide 40 text
leitner.io - @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 41
Slide 41 text
leitner.io - @duffleit
#4: App Shell Integration
Slide 42
Slide 42 text
leitner.io - @duffleit
Flavour #4: App Shell Integration
APP SHELL
Header
Footer
The aggregation is
done on the client.
Slide 43
Slide 43 text
leitner.io - @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 44
Slide 44 text
leitner.io - @duffleit
#5: Metaframework
Slide 45
Slide 45 text
leitner.io - @duffleit
Flavour #5: Metaframework
Route-based
modularisation is
handled by a
Metaframework
Metaframework
/catalogue /checkout
Slide 46
Slide 46 text
leitner.io - @duffleit
• they are implemented with iframes.
• or start using web components now.
Flavour #5: Technology agnostic
Slide 47
Slide 47 text
leitner.io - @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
leitner.io - @duffleit
„a consistent UI“
1) CDN – for static files
2) CMS – for static content
3) A Component Library
Slide 49
Slide 49 text
leitner.io - @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
leitner.io - @duffleit
>> A little copying is better than
a little dependency.
Rob Pike
Slide 51
Slide 51 text
leitner.io - @duffleit
Low Fidelity High Fidelity Design Toolkits Design
Specifications
Source of truth
Even if something has to look equal,
it does not have to be technically
the same.
a design system != component library
Component
Libraries
Slide 52
Slide 52 text
leitner.io - @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 53
Slide 53 text
leitner.io - @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 54
Slide 54 text
leitner.io - @duffleit
https://codeburst.io/building-efficient-components-6ee2bdaea542
the metaframework will be the framework
leitner.io - @duffleit
every consultant.
always.
it depends
Slide 58
Slide 58 text
leitner.io - @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
leitner.io - @duffleit
Key-Takeaways
„Think twice if a frontend
monolith does not fit your needs
and start with a monolith first
approach.“
Slide 61
Slide 61 text
leitner.io - @duffleit
Key-Takeaways
„the 8 fallacies of distributed
computing are called fallacies for
a reason“
Slide 62
Slide 62 text
leitner.io - @duffleit
Key-Takeaways
„Consider the frontend as part of
your microservice architecture –
and solve UI specific problems
with UI specific solutions.“
Slide 63
Slide 63 text
leitner.io - @duffleit
Use the right tool
for the right job.
@duffleit