Our COVID-19 refactor

COVID-19 and measures to mitigate it make daily life in the coming year hard to predict. When lockdown hit, we focused on the needs of the coming years, not weeks. We invested in the parts of OXO’s product that will need to exist in many possible futures. We built a cleaner, leaner codebase to increase our speed of development and give OXO the agility to meet evolving needs.

It started with Elliott — a Software Engineer at OXO. OXO has two apps: one for car owners and one for drivers. There was a lot of overlapping code. Elliott proposed merging them into a single codebase. At first I was afraid of an if owner else driver hellscape, however the ensuing refactor completely changed my mind about using a single frontend repository.

Tackling tech debt during lockdown

Shipping new features quickly means making tradeoffs between robustness and speed. When adding a new feature we built it fresh and layered it on. Limited time went into perfecting how it “fit” into the rest of the code. These layers of fresh code covered older code. Entrenched code became harder to interpret and change. It became tempting to make fixes by adding even more fresh code. The cycle continued. The debt piled-up. So how did we fix it?

First, the debt

1. UI components were often custom-built for each page
2. Our file structure had no good place to put shared components, Redux actions, Redux selectors, or interfaces with 3rd party APIs
3. Server requests were specific, not generic. They were brittle. We could not reuse them when something needed to be adjusted
4. Naming conventions and standardize network requests were not followed
5. Everything was still JavaScript (not TypeScript)
6. Redux was underused. This made it clunky — barely better than rolling our own state management

Then, the fixes

1. Fix base configuration. Setting-up TypeScript properly makes development easier with environment variables and sufficient linting. Starting from greenfield gives us no leeway to fudge our configuration. Every line must comply with our linting rules and TypeScript. The effort paid for itself in terms of saved dev hours in the first month.
2. Rethink the libraries we use. We examined every library we used, if we already employed a library that could get the job done, we used it and did not include another. This enforces consistency in implementation and user experience.¹ In some cases we were fighting against patterns enforced by popular libraries because we did not give them enough time to really internalize why those patterns existed.
3. Create reusable services for business logic. Error handling, constants, and integration with 3rd-party services (Segment, Sentry, etc) are repeated across multiple screens. These now live in a single place, making the code more readable and maintainable.
4. Rebuild state management with hindsight. We had written these apps once. We knew now what data we needed from our servers and which pages needed it. Taking this hindsight as the starting point, we rebuilt our state management. This included a deep dive into Redux — which we now love. All network requests, error handling, and loading statuses are now handled through middleware. (More on this coming soon)
5. Implement ruthless pruning to prevent cross-contamination. It was tempting to copy and paste code from the old apps into the new combined codebase. We fought this. We examined every line of code and uncovered huge chunks of inefficiencies. There is a tendency to believe legacy code that works is essential, even sacred. What if I cut this out and it makes other parts collapse? Sometimes you have to be brave and make the deep cuts. This was our chance to.

and finally, results

There are no Before and After photos to show you from our codebase’s 8-week transformation (just a beautifully clean tsc).The apps are now 99.8% TypeScript. They are significantly easier to maintain and more visually consistent for the user. We also shrank the number of lines of code we maintain by >70%. How’s that for weight loss!

And most wonderfully, I updated a network request yesterday and it worked the FIRST time.

1. React Native Paper, React Navigation, lodash, and Expo libraries for everything else

With ❤ from Team OXO (pre-COVID photo)