$30 off During Our Annual Pro Sale. View Details »

Introduction to Flow

Yuki YAMADA
November 24, 2016

Introduction to Flow

Yuki YAMADA

November 24, 2016
Tweet

More Decks by Yuki YAMADA

Other Decks in Programming

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