Starting Flow in 2020

It’s 2020 and you do a search for “state of flow in 2020”. You’ll find some blogs from Flow, maybe some blogs comparing Flow with TypeScript, some unrelated stuff with the keyword “flow” and maybe this blog. Really not that much.

But 2020 was the year I started using Flow and at this point I would never consider going back to vanilla JavaScript. I’m going to be sharing my journey with Flow in this post, but if you’re looking for a getting started guide you may have to look elsewhere.

I’ve been developing in JavaScript with React for around 5 years. I’ve used Java in the past but I really enjoyed the dynamic nature of JS and never really missed the types. Plus you can do cool things like const [value, setValue] = useState() where the first index could be a string and the second a function.

So 2020 roles around and I’m happily coding JS, and working on a company internal component library. There’s quite a wide usage at this point and I’m thinking, how can I ship code that’s more stable, reliable, and won’t have random introduction of bugs. I’m already running unit tests and usability interaction tests with Enzyme/React-testing-library and storybook respectively.

I began my search and it turned out what I was looking for was exactly Flow’s goal, soundness.

“The state of being in good condition; robustness.”

For reference, in comparison to TypeScript their major goal is completeness. There’s a really great video that goes into depth on the differences here, https://youtu.be/uJHD2xyv7xo.

I was quite happy with my current tooling, transpiling with Babel, Airbnb eslint configs, etc. So it made me happier to know that Flow works as a supplementary tool that you simply bolt to your existing toolchain. It also allowed me to incrementally add Flow to my library, which was major as I could use it internally in the project until I was ready to expose it to my consumers.

I wrote a small bash script that kept track of all flow typed files and when I finally migrated all my source code, I added it to my lint-staged config.

#!/bin/bash
targetFolder="src"
files=$(find ${targetFolder} -type f)

echo "The following files are not flow typed, consider adding \"// @flow\" to the top of the file"
echo "---"
notype=()
for f in ${files}; do
  value=`cat ${f}`
  if [ "${value:0:8}" != '// @flow' ]; then
    notype+=($f)
    echo ${f}
  fi
done
echo "---"
# Pass or fail check
if [ ${#notype[@]} -eq 0 ]; then
  echo "✨ All src files flowtyped, congrats! 🎉"
else
  echo "💥 Please flowtype the files above and try again"
  exit 1
fi

#flow #javascript #flowtype #programming

medium.com

Starting Flow in 2020