Reading, understanding, and refactoring a TypeScript+React application can be challenging, even if it's small. I will tell you my story of when I jumped on the codebase of a small product to implement some last-minute changes before going live. I had an overall idea of what the product does, and the external team that worked on it received comprehensive documentation of our coding patterns and thorough code reviews. Despite that, being effective since the first day was hard for me. Why? Because four of the most important details that make a codebase immediately readable were missing, which are:

- TypeScript' Discriminated Unions instead of optional properties (helpful to describe the domain)
- Straightforward JSX code (ease reading and jumping through the code)
- Explicit State Machines (describe what the app does from an internal perspective)
- Cypress integration tests (tell what the app does from an external perspective)
Apart from a long series of best practices, the listed ones are the most used in WorkWave RouteManager, a 250k-LOC front-end application.


Comments are closed.

Alessandro at 12:29 on 21 Oct 2022

Nice talk. Thanks


Really inspired me. Gonna reuse some of the approaches discussed in future projects. I have clearer ideas about how to setup a successful codebase

Luca Maroni at 14:03 on 21 Oct 2022

Very interesting as always!

Rosario at 18:01 on 21 Oct 2022


Great summary of good practices