Introduction to Flow

Febd813a64ed871a144f4947d57ba156?s=47 Yuki YAMADA
November 24, 2016

Introduction to Flow

Febd813a64ed871a144f4947d57ba156?s=128

Yuki YAMADA

November 24, 2016
Tweet

Transcript

  1. Introduction to Flow Yuki Yamada @yamadayuki

  2. About me 2 Name: ࢁా ༔ᏻ / Yuki Yamada GitHub:

    @yamadayuki Programming Languages - JavaScript - Ruby - Go
  3. 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
  4. 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
  5. 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
  6. 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
  7. How to use Flow? 7 You need files as below.

    - package.json - .babelrc - .flowconfig
  8. How to use Flow? 8 “package.json” … “devDependencies”: { …

    “babel-plugin-transform-flow-strip-types”: “^6.18.0”,
 “flow-bin”: “^0.36.0”, … }, …
  9. How to use Flow? 9 “.babelrc” … “plugins”: [ …

    [ "transform-flow-strip-types" ], … ], …
  10. 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
  11. 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 …
  12. Dive into Flow 12 function add(a, b) { return a

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

    + b; } const three = add(1, 2); console.log(three); // => 3
  14. 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
  15. 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’
  16. 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);
  17. 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);
  18. 18 Demo

  19. 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.
  20. 20 Thank you for listening