Implications of slicing web frontends according to Microservices

Micropuzzling:

@tdeekens

tdeekens.name

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