Design by Contract with Flow, React, and ESLintThu, 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.
As of version 22, Flow understands the “shape” defined in
getInitialState and will field names and types-
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
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):