Design by Contract with Flow, React, and ESLint

Thu, Feb 18, 2016

TLDR: Tired of undefined? PropTypes + Flow will give you superpowers.

Please… think of the Programmers

Component Users need to know the props for your component. Quickly.

That means propTypes above the fold: at the top of the file. Use ES7 property initializers for your ES6 classes.

Requiring propTypes with ESLint

eslint-plugin-react’s propTypes rule makes sure that props are documented.

Checking State

As of version 22, Flow understands the “shape” defined in getInitialState and will field names and types-

Feedback loops

On the developer’s machine, you can setup feedback loops when files change. I show how to do this with onchange in the screencast.

Propagating Constraints with Flow

Flow understands propTypes and can propagate the constraints throughout your codebase. This is insanely powerful.

Build Machine: The Buck Stops here

Run ESLint and Flow on your CI server. They run in under 10 seconds each, and ensure you have accurate, enforced properties in your codebase.

Doesn’t that beat runtime errors? Here’s the repo if you want to try it out!

Here’s a talk I gave at Boston ReactJS, it’s 10 minutes. (Opinions are my own, not my employers):