Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Write Robust & Type-Safe JavaScript with Flow

Write Robust & Type-Safe JavaScript with Flow

JavaScript is great because of it's rich and expressive syntax. But on the other side, the lack of type-enforcement, use of anonymous functions, dynamic function argument lists and contexts makes it very hard to document, analyse and safely execute code for both, humans and machines.
Besides TypeScript, there is another very powerful static type checker for JavaScript mostly utilised in the React ecosystem, called Flow. In this talk, I'll introduce you to it's basic features, how to set up an ES6 project with commonly used tools and highlight some pain points I had when I started writing typed JavaScript.

Presented on:
April 27th, 2016 - ViennaJS
May 17th, 2016 - Runtastic HQ
May 19th, 2016 - StahlstadtJS

Patrick Stapfer

April 27, 2016
Tweet

More Decks by Patrick Stapfer

Other Decks in Programming

Transcript

  1. & Type-Safe JavaScript
    with
    Write Robust
    May 19th, 2016 - Stahlstadt.js
    @ryyppy Patrick Stapfer
    JavaScript Engineer / Runtastic

    View full-size slide

  2. Types - good or bad?
    “Safetiness”
    “Annoyance”
    Typed

    View full-size slide

  3. ● A Static Type Checker for JavaScript
    ● Helps you keep your sanity
    ● Maintained by Facebook -> React
    ● Seamless superset of ES(2015)

    View full-size slide

  4. Why ?
    function getSomeData(queryObj) {
    // Without looking...
    }
    How do we use this function ?
    Return Type?
    Parameter Type?
    /**
    * @param {Object} queryObj
    * @return {Promise}
    **/

    View full-size slide

  5. brew install flow
    cd ~/MyProject
    npm install flow-bin --save-dev
    Install globally...
    ...or locally in your Project

    View full-size slide

  6. flow init
    flow start
    flow stop
    FLOW BINARY USAGE
    [ignore]
    [include]
    [libs]
    [options]
    creates .flowconfig
    Server
    Process
    - /* @flow */ files
    - declaration files
    parses...

    View full-size slide

  7. $ flow check
    src/locale/de.js:6
    6: [tkey: Unit]: string,
    ^^^^^^ string. This type is incompatible with
    6: [tkey: Unit]: {
    ^ object type. See: src/locale/index.js:6
    src/locale/index.js:6
    6: [tkey: Unit]: {
    ^ object type. This type is incompatible with
    6: [tkey: Unit]: string,
    ^^^^^^ string. See: src/locale/de.js:6
    Found 2 errors
    flow check

    View full-size slide

  8. Editor plugins

    View full-size slide

  9. Practical Example
    Setting up a project

    View full-size slide

  10. .babelrc
    npm install babel-plugin-transform-flow-strip-types --save-dev
    {
    plugins: [
    'transform-flow-strip-types',
    ],
    presets: [ 'es2015' ]
    }

    View full-size slide

  11. .eslintrc
    npm install babel-eslint eslint-plugin-flow-vars --save-dev
    {
    "parser": "babel-eslint",
    "plugins": [
    "flow-vars"
    ],
    "rules": {
    "eqeqeq": [2, "smart"]
    }
    }

    View full-size slide

  12. Practical Example
    Let’s code! (DEMO)
    https://github.com/runtastic/flow-guide/tree/master/tutorial

    View full-size slide

  13. Declaration Files / Libdefs
    ● “Header” files for flow
    ● Describe interfaces for modules
    ● Easy to write yourself
    ● Try to prevent ‘any’ types

    View full-size slide

  14. /* @flow */
    declare module 'url' {
    declare type UrlObject = {
    href?: string,
    protocol?: string,
    slashes?: string,
    //...
    path?: string,
    query?: string,
    hash?: string
    };
    declare function format(urlObj: Object): string;
    declare function parse(url: string): UrlObject;
    }
    [ignore]
    [include]
    [libs]
    flow-typed/
    [options]
    .flowconfig flow-typed/url.js

    View full-size slide

  15. >> https://github.com/flowtype/flow-typed

    View full-size slide

  16. ● Moderate learning curve
    ● Cross-Learning
    Conclusion
    ● More Awareness about your Code
    ● I see no downsides using it ;-)

    View full-size slide