Colocation is king
Alex Moldovan
@alexmoldovan.dev
Founder @ JSHeroes
Product Engineer @ together.ai
Disclaimer
<CODE>
Product Roadmap
Business Priorities
Time
Staff Change
Architecture Change
Tech Stack Change
<CODE>
Product Roadmap
Business Priorities
Time
Staff Change
Architecture Change
Tech Stack Change
Resilience
https://alexmoldovan.dev/code-bites/colocation-is-king
What is colocation?
Colocation or the proximity principle ensures that coupled code units are also phisically grouped together.
https://speakerdeck.com/didoo/let-there-be-peace-on-css?slide=62
const HardwareList = () => {
const { data: hardwareList = [] } = useQuery(...);
return (
<ul className="flex flex-col gap-2">
{ hardwareList.map(hw => (
<li key={hw.id}>
{ hw.name }
</li>
))}
</ul>
)
}const HardwareList = () => {
const { data: hardwareList = [] } = useQuery(...);
return (
<ul className="flex flex-col gap-2">
{ hardwareList.map(hw => (
<HardwareListItem key={hw.id} hardware={hw} />
))}
</ul>
)
}
const HardwareListItem = ({ hardware }) => {
return (
<li className="flex item-center gap-1">
<Icon type="harddisk" size={4} />
{ hardware.gpuCount }x { hardware.gpuType } {hardware.gpuLink}
</li>
)
}const HardwareList = () => {
const { data: hardwareList = [] } = useQuery(...);
return (
<ul className="flex flex-col gap-2">
{ hardwareList.map(hw => (
<HardwareListItem hardware={hw} />
))}
</ul>
)
}
const HardwareListItem = ({ hardware }) => {
return (
<li className="flex item-center gap-1">
<Icon type="harddisk" size={4} />
{formatHardwareDisplayLabel(hardware)}
</li>
)
}
const formatHardwareDisplayLabel = (hw) => {
return `${hw.gpuCount}x ${hw.gpuType}-${hardware.gpuLink}`
}
Domain
Colocated units
const HardwareList = () => {
const { data: hardwareList = [] } = useQuery(...);
return (
<ul className="flex flex-col gap-2">
{ hardwareList.map(hw => (
<HardwareListItem hardware={hw} />
))}
</ul>
)
}
const HardwareListItem = ({ hardware }) => {
return (
<li className="flex item-center gap-1">
<Icon type="harddisk" size={4} />
{formatHardwareDisplayLabel(hardware)}
</li>
)
}
const formatHardwareDisplayLabel = (hw) => {
return `${hw.gpuCount}x ${hw.gpuType}-${hardware.gpuLink}`
}export const HardwareList = () => {
const { data: hardwareList = [] } = useQuery(...);
return (
<ul className="flex flex-col gap-2">
{ hardwareList.map(hw => (
<HardwareListItem hardware={hw} />
))}
</ul>
)
}
const HardwareListItem = ({ hardware }) => {
return (
<li className="flex item-center gap-1">
<Icon type="harddisk" size={4} />
{formatHardwareDisplayLabel(hardware)}
</li>
)
}
const formatHardwareDisplayLabel = (hw) => {
return `${hw.gpuCount}x ${hw.gpuType}-${hardware.gpuLink}`
}Remember our initial goal?
Write
Read
👩💻
function whoYouGonnaCall() {
return "GHOSTBUSTERS!";
}👨🏽💻
👩🏿💻
👩💻
1
3
1
10
Read phase
Read* phase
👨🏽💻
HardwareList.jsxHardwareListItem.jsxformatHardwareDisplayLabel.jsWhen should I colocate?
When should I extract?
When should you extract
2. Unit Testing
3. Different domain
1. Reusability
Mental shift
one component per file
one component export per file
unit test
integration test
role based folders
domain based folders
...
...
Accidental over-engineering
Intentional under-engineering
Thank you! Q&A?
Alex Moldovan
@alexmoldovan.dev
Founder @ JSHeroes
Product Engineer @ together.ai
Colocation is king
By Alex Moldovan
