Introduction to Flow

Transcript

1. Introduction to Flow
   Yuki Yamada @yamadayuki
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   “flow-bin”: “^0.36.0”,
   …
   },
   …
   

   View Slide

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

   View Slide

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
    

    View Slide

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
    …
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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’
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

18. 18
    Demo
    

    View Slide

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.
    

    View Slide

20. 20
    Thank you for listening
    

    View Slide