Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Flow

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

$ 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

Slide 9

Slide 9 text

Editor plugins

Slide 10

Slide 10 text

Practical Example Setting up a project

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

/* @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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Questions? @ryyppy [email protected]