Flow Bro, your friendly Flow helper

At my current company, Costa Digital, we value the quality of our software a lot. For that reason, we chose to integrate Flow in our React Native application. Flow allows us to integrate type checking information directly into our source code and is a useful tool.

It helps to catch potential bugs before they occur, simply by finding mismatching type through the application. It keeps our test suite up to date by warning us if we haven’t updated our tests yet (having over 700 unit tests it is sometimes a challenge).

Last but not least it also helps to stay clear and precise with the data involved when prototyping a new feature.

With all these advantages in mind, there is only one problem: Not everything is flow-typed.

We imported definitions for most of the libraries we use from the flow-typed project, but our code needs to be typed by ourselves, of course. We chose to introduce flow typing gradually, including it in every new feature, adding it every time we touch a file on our way to a feature. We also improve the flow typing as we see problems arise and also if there is some time left from time to time. Look for good times to improve your flow coverage, such as when you did your first code review in the morning and are not yet a 100% there: add flow typing. You have some spare time before the daily standup: add flow typing. You want to do something while the app gets deployed by the CI: add flow typing.

How Do I Know Where To Best Add Types?

Your time is important and valuable. In conclusion, you want to add type definitions for the least typed files. Flow can use these to interfere types of values or functions in other files and increase the overall coverage by a lot more than you would think (or at least than I expected). But how do you get these files? Flow has a coverage command that allows you to query the percentage of typed versus untyped lines for a single file. I chose to build a tool that gets you the least typed files so that you can use your time in the most efficient way.

Intro: flow-bro

I chose to develop the CLI tool named flow-bro:

The idea is to build a CLI helper that allows you to get every help you need with your application:

  • get the least typed files: flow-bro get-untyped <number>
  • get the general coverage: flow-bro project-coverage

The future

I want to make flow-bro an even better bro by helping you with other matters, too. There is a very cool codemod out there in the open source realm that translates your React PropTypes into flow type annotations. It, unfortunately, has some issues and and is not usable in every scenario (e.g. spreading PropTypes of another component). It would be cool if flow-bro could tell you which files are easily translated and which files would not cause any interferences to be resolved. Having this information in an interactive way which allows developers to translate the files on the spot would be awesome. It would reduce the mental overhead by a lot, and it would allow developers to translate to flow type annotations even faster.

Further listening