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

Micropuzzling

By Tobias Deekens

Made with Slides.com

Micropuzzling

Implications of slicing web frontends according to Microservices

  • 2,126

More from Tobias Deekens