Flow

A static Typechecker for JavaScript

Overview- What is Flow?- How does it work?- Basic Setup- What does it look like?

- Code Examples

- Flow vs TypeScript- Conclusion- Resources

What is Flow?- Static Typechecker for JavaScript- Written in OCAML- Supports gradual typing- Developed at Facebook- It tracks types as they flow through the program- Main goal: finding errors- IDE/Editor integration- Plugins for Gulp/Grunt/Webpack ...

How does it work?- Phase 1: Parse Code and generate AST- Phase 2: Inference phase

- Traverse AST and gather information- Create Flow Graph

- Phase 3: Evaluation- Traverse Flow Graph and find errors

- For multiple modules- First, create Flow Graph for each module in parallel- Then connect Flow Graphs at their touch points

Flow Graph- Not the typical eager approach for type checking

- Type is decided as late as possible

- Possibilities beyond type-checking- Tracking data through the application- Dead code elimination (inverse approach of tree-shaking)-

Basic Setup- Download and Install the flow binary

- E.g.: brew, aptitude- Or npm install -g flow-bin

- Windows- OCamlPro is currently trying to port flow to windows- A few versions behind- You can use docker, though!

- flow init- Creates .flowconfig file

- Add “// @flow” to files to be checked- flow

Examples #1

Examples #1

Examples #2

Examples #2

Examples #3

Examples #3

Examples #3

Examples #4

Examples #4

Examples #5

Examples #5

Examples #6

Examples #6

Examples #6

Examples #6

Examples #6

Features...- Built-in Types- Arrays and Tuples- Classes- Objects- Functions- Maybe Types- Destructuring

- Union and Intersection Types

- Type Aliases- Typeof types- Dynamic Type Tests- Disjoint Unions- Modules- Declarations

Flow vs. TypeScriptFlow

- Checker- Non-nullable by default- Focused on Soundness- Written in OCAML- Works without any

annotations- Works out of the box with

React

TypeScript

- Compiler- Nullable by default- Focused on Tooling &

Scalability- Written in TypeScript- Great IDE/Editor

integration- Used as default by more

and more libraries

Conclusion- It’s good to have options (Flow vs. TypeScript)

- They influence and push each other

- Great potential for code optimization in the future- “Small” footprint/commitment in projects

- Piece-by-piece migration possible

- Gentle learning curve- Far away from TypeScript in terms of maturity and

community / adoption

Resources- Flow vs. TypeScript

(http://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/)

- A deep dive into flow (https://www.youtube.com/watch?v=VEaDsKyDxkY)

- Official Docs (https://flowtype.org/docs/getting-started.html#_)

Thanks!