Getting started with Flow

@charliedowler

Intro

• Junior Software Engineer @ Hindsight Software

• Working with Backbone, React, ImmutableJS

Typed Javascript

• Elm

• Typescript (Microsoft)

• Dart (Google)

• Flow (Facebook)

What is ?

• “Improvement on Typescript”

• Type checking for your javascript applications

• Catch compile time errors

• Can be introduced with small gradual changes

Why write typed JS using Flow?

• Dynamic + Static typed code can mix

• Scalable

• Maintainable

• Small learning curve

• Compatible with existing vanilla JS and JSX

Unsafe code

function size(str) { return str.length;}

size(null);

// Property length not found on null

Safe codefunction size(str) { if (!str) {

return 0; } return

str.length;}size(null);size(10);

Types• number

• string

• boolean

• void

• mixed

• any

Variables

var $name: string = “Charlie”;

Functions

function getName(): string { return $name;}

function setName(name: string): void { $name = name;}

Classesclass StateMachine { function log(msg: mixed): void; function transition(nextState: string): void;}

class CustomMachine extends StateMachine { constructor() {

this.log(“instance of CustomMachine has been created”); this.transition(StateConstants.READY);}

}

Objectstype User = { id: number, verified: boolean, email: string, firstName: string, lastName: string}

function updateUser(updatedUser: User) { ...}

More typesvar scene: GameScene = new GameScene()

var scene2: typeof scene = GameScene.create()

var name: ?string = nulltype T = Array<string>

var a: T = [“hello” “world”]

Even safer code

function size(str: ?string): number {

return str.length;}

size(2);

if (!str) {retur

n 0;}

// Error: Property number…

Getting started1. Install Flow

2. Prefix your JS file with the /* @flow weak */ annotation

3. Run Flow at the root of your project

@flow weak

• Infers type of unannotated variables as `any`

• Provides a manageable amount of errors to fix

• Ignores unknown modules

Declarations

declare var __dirname: string;

declare function setTimeout(callback: () => void , ms: number): any;

Stub unknown/browser/node methods

Build tools

• gulp-flowtype

• sbt-flow

• grunt-flow

Links

• http://tryflow.org

• https://spyder.wordpress.com/2014/03/16/why-ocaml-why-now

• http://potomushto.com/2015/01/26/facebook-flow-on-server-and-client.html

• https://github.com/Microsoft/TypeScript/issues/1265

@charliedowler

Questions?