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.jsx
HardwareListItem.jsx
formatHardwareDisplayLabel.js

When 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

Made with Slides.com