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

Transcript

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

   View Slide

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

   View Slide

3. Flow
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. $ 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 Slide

9. Editor plugins
   

   View Slide

10. Practical Example
    Setting up a project
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. /* @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 Slide

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

    View Slide

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

    View Slide

18. Questions?
    @ryyppy
    p.stapfer@deadlock.at
    

    View Slide