Lessons for building
resilient codebases
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/5516538/ReactConf-Day2-0117-headshot.jpg)
Alex Moldovan
https://alexmoldovan.dev
Founder @ JSHeroes
Product Engineer @ CodeSandbox
https://bit.ly/alex-jsnation
Lessons for building
resilient codebases
Lessons for building
resilient codebases
<code />
Team changes
Priorities shifting
Product roadmap
Business pivots
Time passing
<code />
Team changes
Priorities shifting
Product roadmap
Business pivots
Time passing
<code />
Team changes
Priorities shifting
Product roadmap
Business pivots
Time passing
Lesson #1
Accept imperfection
"Perfect is the enemy of good"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11393148/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11394410/pasted-from-clipboard.png)
Repo reference: https://github.com/codesandbox/codesandbox-client
The imperfect architecture model
Architecture must not stand in your way
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Resonable shortcuts can be taken when needed
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Exceptions are tolerated (but well documented)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Lesson #2
Colocation is king
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11343354/pasted-from-clipboard.png)
https://alexmoldovan.dev/code-bites/colocation-is-king
Write
Read
👩💻
function whoYouGonnaCall() {
return "GHOSTBUSTERS!";
}
👨🏽💻
👩🏿💻
👩💻
Write phase
Let's look at some code 👀 👀 👀
Read phase
A case against reusability?
Lesson #3
Reusability is a double edged sword
The good
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11393100/pasted-from-clipboard.png)
The bad
Abstraction
De-duplication
Separation of concerns
Zombie code
Unnecessary abstraction
Change propagation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11395124/ezgif-4-b2c97fd0a3.gif)
Should I reuse it?
Will these things change together?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
How often do you change the reusable code?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Do you need to understand the reusable code?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Lesson #4
Leave traces behind
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11395185/ezgif-6-89386082cd.gif)
👩💻
function whoYouGonnaCall() {
return "GHOSTBUSTERS!";
}
👨🏽💻
👩💻
function whoYouGonnaCall() {
return "GHOSTBUSTERS!";
}
function whoYouGonnaCall() {
return "GHOSTBUSTERS!";
}
⌛ 3 months
⌛ 3 months
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11400803/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11400825/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11400809/pasted-from-clipboard.png)
Leave traces behind
Comment branch intensive code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Break algorithm in smaller readable steps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Hoist clear values used in conditional rendering
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Lesson #5
Better strict than sorry
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11405591/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11405595/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11405597/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11395233/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11402668/pasted-from-clipboard.png)
https://www.typescriptlang.org/tsconfig/#strictNullChecks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11402670/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/11405600/pasted-from-clipboard.png)
Better strict than sorry
Use TypeScript as "strict" as you can
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Explicitly type all states for your data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Handle all these possible states
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/4090999/sign-check-icon.png)
Recap
1. Accept imperfection
2. Colocation is king
3. Reusability is a double edged sword
4. Leave traces behind
5. Better strict than sorry
Thank you ❤️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/107234/images/5516538/ReactConf-Day2-0117-headshot.jpg)
Alex Moldovan
Founder @ JSHeroes
Product Engineer @ CodeSandbox
https://bit.ly/alex-jsnation
https://alexmoldovan.dev
Lessons for building resilient codebases
By Alex Moldovan
Lessons for building resilient codebases
- 314