Implications of slicing web frontends according to Microservices
Micropuzzling:
Hypothesis
Symptoms
Clue to the Puzzle
Hypothesis
Monolithic Trap
Hypothesis: Monolithic Trap
Level of interactivity determines
probability of
building a frontend monolith
Hypothesis: Interactivity
...growing interactivity
-
User input
-
Propagating state
...reaction & validation
...change here - update there
static
dynamic
Symptoms
Symtoms for Hypothesis
Symptoms: Occupied with Churn
-
Framework vs. problem
-
TodoMVC syndrome
...bandwagon issue
...few lines makes scaling easy
Symptoms: Lack of Boundaries
-
Complexity rises
-
Entanglement
...over time incidentally
...solutions are complecting
Symptoms: Losing Focus
-
Obesity vs. minimalism
-
Undefined interactivity
...gain is easy - dieting hard
...technology exageration
Monolithic application
Hypothesis: The Big Rewrite
👏🏻
👏🏻
...development speed
slow
fast
Kickoff advantages lost
...1st gear again
Clue to the Puzzle
Let's puzzle
...avoiding symptoms
Clue to the Puzzle: Guiding Principles
-
Forced boundaries
-
API affinity
-
Define interactivity
-
Use documents
...the escape causes complexity
...boundaries relate to endpoint
...not app vs. website
...as higher order boundaries
Clue to the Puzzle: Composition
Composition
...complex things out of simple things!
Clue to the Puzzle: Visual Separation I
Clue to the Puzzle: Visual Separation II
Clue to the Puzzle: Componentization
Component Library
Styleguide
API
Events
Browser
Orchestration & Caching
Unit test
Component test
E2E test
}
}
Clue to the Puzzle: Vertical Architecture
Clue to the Puzzle: Orchestration
-
Number of manifests
-
Inject dependencies
-
Cache all the things
...in order
...one per vertical
...in browser
{
"rootUrl": "vertical-1",
"hashes": {
"version": "as321sa",
"02ad0s92": {
"hash": "02ad0s92",
"file": "1.js",
"extension": ".js"
},
...
}
}
{
"rootUrl": "vertical-2",
"hashes": {
"version": "88ssas2",
"0299ass": {
"hash": "0299ass",
"file": "1.css",
"extension": ".css"
},
...
}
}
{
"rootUrl": "vertical-3",
"hashes": {
"version": "dd8a8as",
"0299ass": {
"hash": "9s9sks8",
"file": "1.js",
"extension": ".js"
},
...
}
}
Clue to the Puzzle: Assembly
-
Dynamic dependencies
-
Reasembly & upgrade
-
Independent deployments
...n-1th & background refresh
...assembly at runtime
...enforces boundaries
{
"rootUrl": "vertical-1",
"hashes": {
"version": "as321sa",
"02ad0s92": {
"hash": "02ad0s92",
"file": "1.js",
"extension": ".js"
},
...
}
}
{
"rootUrl": "vertical-2",
"hashes": {
"version": "88ssas2",
"0299ass": {
"hash": "0299ass",
"file": "1.css",
"extension": ".css"
},
...
}
}
{
"rootUrl": "vertical-3",
"hashes": {
"version": "dd8a8as",
"0299ass": {
"hash": "9s9sks8",
"file": "1.js",
"extension": ".js"
},
...
}
}
Clue to the Puzzle: Technical Leads
-
Libraries > frameworks
-
No shared code
-
Prefer mono repository
...avoid duplication
...frameworks infantilize
...replaceability & autonomy
Clue to the Puzzle: The Iffy Bits
-
CSS is a mess
-
URL is global state
-
Inbetween HTTP/2
...treat CSS as code
...requests become cheaper
↪ respect the web platform it will be in constant movement!
...please don't break it
❗️ ❗️
Enjoy @microxchg
Thanks
🍰 ☕️
🍻 🍕
Feedback on
dactylographsy
Micropuzzling
By Tobias Deekens
Micropuzzling
Implications of slicing web frontends according to Microservices
- 1,655