�ݺ�ߣ

A Pragmatic Introduction to Facebook’s Flow
Eric Merritt
August 22, 2018

What we wont be doing
• Teaching Javascript
• Teaching alternative approaches
• Being un-opinionated
1

Javascript isn’t Javascript
• Flow Syntax
• Babel
• Grunt
• Yarn
• Eslint
• Prettier
2

Javascript Compilation Flow
Babel Transpiler Flow Analyzer ESLint Webpack
Executable Javascript
3

Vanilla Javascript
export const foo = ( x ) => {
r e t u r n x ∗ 10;
}
foo ( 1 0 ) ;
4

Modern Javascript
export const foo = ( x ) => {
r e t u r n x ∗ 10;
}
foo ( 1 0 ) ;
5

Modern Javascript with Flow Types
/∗ @flow ∗/
export const foo = ( x : number ) : number => {
r e t u r n x ∗ 10;
}
foo ( 1 0 ) ;
6

Types: Primitives
type MaybeObj : { foo ?: s t r i n g }
const myVar1 : boolean = true ;
const myVar2 : s t r i n g = ” h e l l o ”;
const myVar3 : number = 3 . 1 4 ;
const myVar4 : n u l l = n u l l ;
const myVar5 : void = undefined ;
const maybeVar : ? s t r i n g = ” foo ”;
const myVar6 : MaybeObj = {};
const myVar7 : MaybeObj = { foo : ” bar ”};
7

Types: Literals
// @flow
export const getColor =
(name : ” success ” | ” warning ” | ” danger ” ) :
” green ” | ” yellow ” | ” red ” => {
switch (name) {
case ” success ” : r e t u r n ” green ”;
case ” warning ” : r e t u r n ” yellow ”;
case ” danger ” : r e t u r n ” red ”;
}
}
getColor (” s uccess ” ) ; // Works !
getColor (” danger ” ) ; // Works !
// $ExpectError
getColor (” e r r o r ” ) ; // Error ! 8

Types: Mixed
// @flow
export const s t r i n g i f y B a s i c V a l u e = ( value : s t r i n g |
r e t u r n ’ ’ + value ;
}
export const i d e n t i t y = <T>( value : T) : T => {
r e t u r n value ;
}
9

Types: Classes
// @flow
c l a s s MyClass {
// . . .
}
l e t myInstance : MyClass = new MyClass ( ) ;
10

Prettier
https://github.com/prettier/prettier
13

Webpack
https://webpack.js.org/
14

�ݺ�ߣ

Flow based javascript

More Related Content

Flow based javascript