Colocation

A great blog written by Kent
Colocation

Principles

  • "Place code as close to where it's relevant as possible"
  • "Things that change together should be located as close as reasonable."

Comments

  • No one puts their comment in a separate file or directory, but have their comments co-located with the code they're explaining

HTML/View

  • Modern frameworks puts your view logic and your view templates in the exact same file, for example React or Vue

CSS

Tests

  • co-locate our tests files with the file or group of files they are testing ⇒ we can see immediately that the module is tested

State

  • Localize your state
    • Maintainability
    • Performant ⇒ e-render a lot fewer components

"Reusable" utility files

  • "Huh... I'll bet a lot of people could use this." ⇒ the component uses that util function is deleted, but the utility you wrote is out of sight, out of mind and it remains

My Thoughts

  • I will try to practice "Place code as close to where it's relevant as possible"
  • I often have the situation where separating a function to utilities. I will think carefully from next time

23

Tags:

WebdevProgrammingFrontend