Jake Pruitt

This is where I write.

← Home

Flow

The announcement of Facebook’s new project Flow hit the open source community today with an explosion of positive feedback. Within 14 hours of its v0.1.0 release, the project already has 1.4 thousand stars on GitHub and 550 followers on Twitter. I was incredibly anxious to find out what the project does, and when I figured it out, I ran a victory lap around my room in excitement.

The project does static type checking for JavaScript (cue fireworks and marching band and champaign).

So… what?

While some of you may be running around the room like I was, most people probably are confused about why static type checking warrants fireworks and champaign.

Static code analysis is a lot like spell-check for your code. As you write your code, you recieve warnings that the code you are writing might not work correctly when you run it. The code checker is not actually running the code, it’s just reading your file and looking for patterns that will cause errors.

There are a lot of tools out there that allow you to do this. There are programming editors called Integrated Developer Environments (usually called IDE’s) that have the ability to statically check your code. Some examples are Xcode, Visual Studio, Eclipse, and WebStorm. There are also static code analysis tools like JSHint and Cppcheck that can tell you whether there are errors in your code before you run them.

So what makes Flow special?

In other languages, like C++ and Java, variables must be declared as specific static types, such as string for text and int for integers. In JavaScript, variables can be any type, and can flow from one type to another in very dynamic and complex ways. This fact about the language can make it very difficult to scale to enterprise levels, where the codebase has millions of variables with no defined type. Lots of errors can occur when you expect to be adding 10 + 2 and instead add 10 + "frog".

The great people behind Flow have created a static code analysis tool that will read through your code, figure out what static types things should be, and give you a report about where you might experience a type error.

For example, say I had a file like this:

/* @flow */
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

I am trying to call a function foo with a string argument, which will be multiplied by 10. This would make no sense and should throw an error, but in JavaScript, all that happens is that the function foo returns NaN. Very unhelpful.

With Flow, we can run a command to check our JavaScript file that will interpret our types, and tell us where things could go wrong:

$> flow
hello.js:5:5,19: string
This type is incompatible with
  hello.js:3:10,15: number

This next example showcases specifying special types in Flow:

/* @flow */

function size(arr: Array<number | string>): number {
	return arr.length;
}

var total = size(["One string"]) + size([2, "string"]);

Considerations

Before you jump off the deep end and try to use Flow on your thousand-line codebase, let me warn you that the number of errors you initially recieve will be daunting. Flow is meant to be introduced incrementally to a project, and can be rather strict on projects that utilize the dynamic nature of JavaScript. Flow has a lot of nice features on their website to get you started slowly with the project.

Since there is notation in Flow that is not really part of JavaScript, the code must be stripped of that notation before served to the browser. The jsx utility for React allows you to strip the types from the code, and there are ways to have the browser transform your code using the JSXTransformer.

Also, Flow is not yet available on Windows, so you have to be using OS X or Linux.

Learning

Here are some good articles and resources on learning about Flow:

I personally hope a plugin is released soon for SublimeText to have inline Flow error messages, much like the plugins for JSHint. This is a huge step in moving the language of JavaScript into full maturity.