Slide 1

Slide 1 text

Introduction to Flow Yuki Yamada @yamadayuki

Slide 2

Slide 2 text

About me 2 Name: ࢁా ༔ᏻ / Yuki Yamada GitHub: @yamadayuki Programming Languages - JavaScript - Ruby - Go

Slide 3

Slide 3 text

What is Flow? 3 Created by Facebook. Implemented by OCaml. Adds static typing to JavaScript to improve developer productivity and code quality https: //github.com/facebook/flow

Slide 4

Slide 4 text

What is Flow? 4 Created by Facebook. Implemented by OCaml. Adds static typing to JavaScript to improve developer productivity and code quality https: //github.com/facebook/flow

Slide 5

Slide 5 text

Installation 5 Globally… $ npm install -g flow-bin $ yarn global add flow-bin $ brew install flow Per Project… $ npm install —save-dev flow-bin $ yarn add —dev flow-bin https: //github.com/facebook/flow#installing-flow

Slide 6

Slide 6 text

Editor Support 6 - Atom https: //nuclide.io/docs/languages/flow - Visual Studio Code https: //github.com/flowtype/flow-for-vscode - Vim https: //github.com/flowtype/vim-flow - Emacs https: //github.com/flowtype/flow-for-emacs

Slide 7

Slide 7 text

How to use Flow? 7 You need files as below. - package.json - .babelrc - .flowconfig

Slide 8

Slide 8 text

How to use Flow? 8 “package.json” … “devDependencies”: { … “babel-plugin-transform-flow-strip-types”: “^6.18.0”,
 “flow-bin”: “^0.36.0”, … }, …

Slide 9

Slide 9 text

How to use Flow? 9 “.babelrc” … “plugins”: [ … [ "transform-flow-strip-types" ], … ], …

Slide 10

Slide 10 text

How to use Flow? 10 “.flowconfig” [ignore] … [include] ../myProject/.* [libs] ./flow-typed ./src/interfaces [options] module.system.node.resolve_dirname=node_modules esproposal.class_static_fields=enable esproposal.class_instance_fields=enable suppress_comment= \\(. \\|\n \\)* \\$FlowFixMe

Slide 11

Slide 11 text

How to use Flow? 11 In src/add.js … // @flow function add(a: number, b: number): number { return a + b; } const three: number = add(‘1’, 2); $ flow check …

Slide 12

Slide 12 text

Dive into Flow 12 function add(a, b) { return a + b; } const three = add(1, 2);

Slide 13

Slide 13 text

Dive into Flow 13 function add(a, b) { return a + b; } const three = add(1, 2); console.log(three); // => 3

Slide 14

Slide 14 text

Dive into Flow 14 function add(a: number, b: number): number { return a + b; } // 3 : number const three: number = add(1, 2); console.log(three); // => 3

Slide 15

Slide 15 text

Dive into Flow 15 function add(a: number, b: number): number { return a + b; } // ’12’ : string const three: number = add(‘1’, 2); console.log(three); // => ‘12’

Slide 16

Slide 16 text

Dive into Flow 16 $ flow check ↑ `check` command prints the result of a full Flow check. function add(a: number, b: number): number { return a + b; } // ’12’ : string const three: number = add(‘1’, 2);

Slide 17

Slide 17 text

Dive into Flow 17 $ flow check src/add.js:7 7: const three = add('1', 2); ^^^^^^^^^^^ function call 7: const three = add('1', 2); ^^^ string. This type is incompatible with 3: function add(a: number, b: number): number { ^^^^^^ number function add(a: number, b: number): number { return a + b; } // ’12’ : string const three: number = add(‘1’, 2);

Slide 18

Slide 18 text

18 Demo

Slide 19

Slide 19 text

Conclusion 19 1. Flow is type checker tool. 2. Improve the developers’ productivity. 3. Save the quality of code. 4. You can introduce Flow easily.

Slide 20

Slide 20 text

20 Thank you for listening