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

• CSS-in-JS(A Unified Styling Language. In the past few years we’ve seen the… | by Mark Dalgleish | SEEK blog | Medium)

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