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

7dce9b480f93b02761519348359c4b71?s=128

Patrick Stapfer

April 27, 2016
Tweet

Transcript

  1. & Type-Safe JavaScript with Write Robust May 19th, 2016 -

    Stahlstadt.js @ryyppy Patrick Stapfer JavaScript Engineer / Runtastic
  2. Types - good or bad? “Safetiness” “Annoyance” Typed

  3. Flow

  4. • A Static Type Checker for JavaScript • Helps you

    keep your sanity • Maintained by Facebook -> React • Seamless superset of ES(2015)
  5. Why ? function getSomeData(queryObj) { // Without looking... } How

    do we use this function ? Return Type? Parameter Type? /** * @param {Object} queryObj * @return {Promise} **/
  6. brew install flow cd ~/MyProject npm install flow-bin --save-dev Install

    globally... ...or locally in your Project
  7. flow init flow start flow stop FLOW BINARY USAGE [ignore]

    [include] [libs] [options] creates .flowconfig Server Process - /* @flow */ files - declaration files parses...
  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
  9. Editor plugins

  10. Practical Example Setting up a project

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

    presets: [ 'es2015' ] }
  12. .eslintrc npm install babel-eslint eslint-plugin-flow-vars --save-dev { "parser": "babel-eslint", "plugins":

    [ "flow-vars" ], "rules": { "eqeqeq": [2, "smart"] } }
  13. Practical Example Let’s code! (DEMO) https://github.com/runtastic/flow-guide/tree/master/tutorial

  14. Declaration Files / Libdefs • “Header” files for flow •

    Describe interfaces for modules • Easy to write yourself • Try to prevent ‘any’ types
  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
  16. >> https://github.com/flowtype/flow-typed

  17. • Moderate learning curve • Cross-Learning Conclusion • More Awareness

    about your Code • I see no downsides using it ;-)
  18. Questions? @ryyppy p.stapfer@deadlock.at