One of the largest single-page apps at WeWork consists of roughly 140K lines of code. A myriad of React components connected with Redux (and Reflux, in some of the older, to-be-refactored parts), juggling data from various backend services, styled with different systems (CSS modules, Radium), sprinkled with dozens of utility libraries.
Managing a beast of such size is no small feat.
Enter static typing — a language feature known to reduce the number of times someone has to fix a critical bug in the middle of the night, swearing to never write a single line of code again. In recent years, type annotations gained popularity in the front-end world, thanks to the excellent tools like Flow and TypeScript.
The story that follows is one filled with tears of both joy and sorrow, as we’ve spent the last nine months annotating the app with Flow.
The biggest takeaway? Adding end-to-end static typing to a React/Redux app is a lot of work — you’ll run into issues with Flow, third-party annotations, duplication, broken types along the boundaries of decorated or exported components, and a severe lack of documentation on how it should all be wired together. Nevertheless, the end result will be an undoubtedly higher-quality codebase that’s easier to work with and is more secure.
Read more
|