Getting started with Flow

Getting started with Flow

• 1.
  Getting started with Flow @charliedowler
• 2.
  Intro • Junior SoftwareEngineer @ Hindsight Software • Working with Backbone, React, ImmutableJS
• 3.
  Typed Javascript • Elm •Typescript (Microsoft) • Dart (Google) • Flow (Facebook)
• 4.
  What is ? •“Improvement on Typescript” • Type checking for your javascript applications • Catch compile time errors • Can be introduced with small gradual changes
• 5.
  Why write typedJS using Flow? • Dynamic + Static typed code can mix • Scalable • Maintainable • Small learning curve • Compatible with existing vanilla JS and JSX
• 6.
  Unsafe code function size(str){ return str.length; } size(null); // Property length not found on null
• 7.
  Safe code function size(str){ if (!str) { return 0; } return str.length; } size(null);size(10);
• 8.
  Types • number • string •boolean • void • mixed • any
• 9.
  Variables var $name: string= “Charlie”;
• 10.
  Functions function getName(): string{ return $name; } function setName(name: string): void { $name = name; }
• 11.
  Classes class StateMachine { functionlog(msg: mixed): void; function transition(nextState: string): void; } class CustomMachine extends StateMachine { constructor() { this.log(“instance of CustomMachine has been created”); this.transition(StateConstants.READY); } }
• 12.
  Objects type User ={ id: number, verified: boolean, email: string, firstName: string, lastName: string } function updateUser(updatedUser: User) { ... }
• 13.
  More types var scene:GameScene = new GameScene() var scene2: typeof scene = GameScene.create() var name: ?string = null type T = Array<string> var a: T = [“hello” “world”]
• 14.
  Even safer code functionsize(str: ?string): number { return str.length; } size(2); if (!str) { return 0; } // Error: Property number…
• 15.
  Getting started 1. InstallFlow 2. Prefix your JS file with the /* @flow weak */ annotation 3. Run Flow at the root of your project
• 16.
  @flow weak • Inferstype of unannotated variables as `any` • Provides a manageable amount of errors to fix • Ignores unknown modules
• 17.
  Declarations declare var __dirname:string; declare function setTimeout(callback: () => void , ms: number): any; Stub unknown/browser/node methods
• 18.
  Build tools • gulp-flowtype •sbt-flow • grunt-flow
• 19.
  Links • http://tryflow.org • https://spyder.wordpress.com/2014/03/16/why- ocaml-why-now •http://potomushto.com/2015/01/26/facebook-flow- on-server-and-client.html • https://github.com/Microsoft/TypeScript/issues/1265
• 20.
  @charliedowler Questions?