Technical Debt

Hello friends. Hope you're all well. Checking in.

April is the month of technical debt reparations! Some of you know what's up but for the rest, this is all about making good on past choices. 

In software development, technical debt (also known as design debt or code debt) is the implied cost of additional rework caused by choosing an easy (limited) solution now instead of using a better approach that would take longer.

Straight from Wikipedia. Some corrections though, I didn't choose easy or fast solutions! I always do what I think is best with my limited skillset! 😂 I've tried this all before and failed several times, just as I did when first trying to learn and use React!

Let's get technical. Braytech is a large codebase based on React using common libraries such as react-router and react-redux. I've long avoided "ejecting" from create-react-app, a template-like project from some of the original maintainers of react that most users of react start out with or sometimes never go without. It's great but it's restrictive. Other projects exist that allow you to retain the safety and simplicity of create-react-app while enabling more options, such as react-rewired and CRACO. I've been using the latter for well over a year.

This past week, a new major version of React was released and some months ago, a new version of create-react-app. This updates bring these foundational components better in line with the requirements of Braytech.

The problem? Detaching from the thorny creeper vines of what was. One of my biggest hurdles has been breaking changes with these major new versions. In software dev, major versions (i.e. version 16.1 to version 17.0) bring new features but also, breaking changes to how code works and how you use them.

React-router (does it exactly what it sounds like - handles page routing for your app, clicking between views, etc.,) changed much of how you use it. In fact, it currently lacks feature parity (no RegEx in pathnames for example), but due to changes in other libraries, React itself for example, updating was required. 

So why am I doing all this - it sounds horrible! The the more you put it off, the worse it gets and the harder it is to resolve. Age old bond dfgdfgfdg story, I mean. 

So, I've been spending my days slowly working through all of these upgrades. As I fix things, more things are broken. I've been keeping a handwritten list of things to go back and address and I've crossed almost everything off. Unfortunately, there's a few things I still need to straighten out or acquire clarity on (why is this broken? is it me or React? should I just rewrite the component to work around it?).

Things I'm exceedingly excited to experience: new hooks with React 18 and finally being able to make use of fast refresh. Until now, every time I've made a code change to Braytech, I've needed to wait for the entire project to rebuild and refresh, loading screen and all. This time adds up to a lot.

The rewrites required to support these new major library updates open the door to many potential bugs (don't worry, unlike DIM, I will never delete your items). The most anxiety-inducing part of this job is thinking you've got them all, checking again, and then checking once more, only to find something goes horribly, inexplicably wrong for a user. So here's to hoping.

I hope you enjoyed my April Fool's Day treats.

Thanks,
Tom 💖