Javascript | Type Driven Development

A major overhaul in the world of manufacturing was spawned with the birth of Six Sigma. A statistically-driven approach to Industrial Engineering that focuses heavily on reliability.

Engineers realized that there are lots of external conditions that can affect the quality of your product. Components might wear down, machine upgrades might be buggy, a technician could be tired — these are all factors that could mean that the product you’re trying to manufacture doesn’t turn out the way you expected. Six Sigma builds logic into the setup whereby the end-product passes quality control even when these external factors come in to play.

This is in many ways analogous to Type Driven Development. Being a great coder means not only writing efficient code — it’s also about writing reliable code. Code that produces what’s expected even in sight of external factors that are threatening to throw you off-balance.

This blog starts to scrape the surface of Type Driven Development and its usage with Javascript.

What is Type & Why Consider It?

A type is a kind of boundary condition for a variable within any programming language. It is used to describe what the variable is and what properties it has. JavaScript has six primitives types: string, number, undefined, null, boolean and symbol. There is also a compound type which is object.

With respect to programming languages there are two flavors of languages: statically typed and dynamically typed. The difference between the two is that statically typed languages verify variable types at compilation, dynamically typed languages do this at run-time. Examples of statically typed languages are Java, C & C++. Examples of dynamically typed languages are Ruby, Python & Javascript. Static type checking helps to fix bugs during development — the compilation will throw an error unless all type checks are passed. This creates far more reliable code.

Static Type Checking with Javascript

It was stated above that Javascript is a dynamically typed language. There are two popular means to coerce it into being statically typed: Typescript and Flow. Typescript is backed by Microsoft and Flow by Facebook. Both approaches are well-regarded in the industry. I have been using Flow because of its seamless integration with React which I use on a daily basis. If you’d like to do a deep-dive into the differences here is a fantastic comparison: Typescript vs Flow.

Getting Started with Flow

Before delving into Flow I’d like to emphasize that there is a difference between Type Driven Development and Test Driven Development which both confusingly have the acronym ‘TDD’ associated with them. Test Driven Development is focused more around functionality of your code, i.e. when a user interacts with your application does it work as expected. Type Driven Development is focused around debugging complex syntax errors and data structures in your code. These two approaches to streamlining your code are not mutually exclusive and modern platforms lean on both of them heavily during development.

Let’s start by installing Flow. If you’re using this on a new Node.js project then start by initializing your project with NPM / Yarn. I prefer using Yarn.

yarn init

Now add the Flow package as a dev dependency.

yarn add --dev flow-bin

Initialize flow with the command below (this will create a .flowconfig file):

yarn flow init

Now whenever we want to run Flow we use the command:

yarn flow

Using Flow

The Flow website provides a simple yet useful example to show how Flow works. I’ve shown it below with some comments. We always need to initialize Flow in a Javascript file with the comment // @flow. Types are defined using a colon after an argument or function declaration followed by the required type.

When we run yarn flow on the code block above the descriptive output below is printed to the console. We passed in an argument of a string and it required a number hence the error.

It is important to note that this is not conventional Javascript. Yarn uses a compiler such as Babel to convert the Flow types into vanilla Javascript. If we were to run the code above using node . instead of yarn flow we’d get an error saying that : is an unexpected token. If you’d like to write functions that can be used outside of the Flow ecosystem, without having to remove the type-setting, then you could wrap the type declarations inside comments as shown below. This code block will work in Node and its type-setting will still be detected by Flow. It is, however, much messier writing code in this format. It’s good to be clear about when and where to use Flow at the beginning of a project.

Where To Go From Here?

I know I’ve only provided a single example which seems like a bit of a cop-out. The reason for this is only partially that I’m lazy and I’m writing this on a Sunday. It’s mostly because the team at Facebook has put together really clear and concise documentation for Flow. So, If this has piqued your interest in the topic, I’d recommend starting out over here: Flow Type Docs. Happy coding!