Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016
-
Upload
codemotion -
Category
Technology
-
view
41 -
download
2
Transcript of Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016
![Page 1: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/1.jpg)
![Page 2: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/2.jpg)
me, hi!
![Page 3: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/3.jpg)
Software engineer at buildo
![Page 4: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/4.jpg)
![Page 5: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/5.jpg)
What is Flowtype?
![Page 6: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/6.jpg)
DEMO!
![Page 7: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/7.jpg)
What is Flowtype?function add(x, y) { return x + y;}add(2, 3);add(2, true); // oh, come on!
![Page 8: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/8.jpg)
What is Flowtype static typing?function add(x: number, y: number) { return x + y;}add(2, 3); // ok!add(2, true); // boolean. This type is incompatible ...
![Page 9: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/9.jpg)
Static typing
![Page 10: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/10.jpg)
SAFETY
![Page 11: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/11.jpg)
![Page 12: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/12.jpg)
CLARITY
![Page 13: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/13.jpg)
Clarityfunction addListener( event: string, listener: Function): EventEmitter;
vs
function addListener(event, listener); // good luck
![Page 14: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/14.jpg)
Especially when/** * Adds a listener * @param {string} event - The event * @param {string} listener - The listener * @return {object} An EventEmitter */ function addListener(event, listener); // types, nah..
![Page 15: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/15.jpg)
but also
![Page 16: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/16.jpg)
![Page 17: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/17.jpg)
Static typingin JS (?!)
![Page 18: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/18.jpg)
Flowtype "vs" TypescriptIt's a bit like React vs Angular.
Different scopes.
Let's see what are we talking about.
![Page 19: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/19.jpg)
Flowtype "vs" Typescript (cont'd)Typescript is a language that compiles to JS.
It has language features that are not present in JS.
Examples: enums, visibility modifiers, short-hand constructors...
![Page 20: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/20.jpg)
Flowtype "vs" Typescript (cont'd)Flow is a typechecker.
It doesn't compile to anything, it just typechecks.
![Page 21: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/21.jpg)
Flowtype + Babel ~= Typescript(or at least you can compare them)
and actually
Flowtype + Babel + Webpack ~= Typescript
![Page 22: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/22.jpg)
Flowtype "vs" Typescript (cont'd)Type systems facts:
• Typescript is a lot more stable• Typescript cares a lot less about soundness• Typescript's type system is less powerful
![Page 23: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/23.jpg)
Flowtype, get startednpm install -g flow-bin
# per projectflow init
![Page 24: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/24.jpg)
Flowtype, get started (cont'd)Add the @flow pragma to all the files you want Flow to consider
/* @flow */const answer = 42; // typechecks!
![Page 25: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/25.jpg)
Easy on-boardingSince you have to whitelist files, on-boarding is really easy.
You can tinker with JS, and then progressively make your code base more solid.
You have an option, which is very unobstrutive and easy to bail from.
![Page 26: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/26.jpg)
Optionality is the property of asymmetric upside with correspondingly limited downside— Nassim Taleb
![Page 27: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/27.jpg)
Easy on-boarding (cont'd)Flow's type inference is extremely aggressive and you may benefit from it even without type annotations.
![Page 28: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/28.jpg)
DEMO!Type inference
![Page 29: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/29.jpg)
Type inference// oh, I see, an array of stringsconst names = [" foo", "bar ", "baz"];
// ah no, an array of strings and numbersnames.push(2);
// wait, you can't trim a number!names.map(name => name.trim());
![Page 30: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/30.jpg)
Native typesSo, yes Flow knows about string, number and all the other native types you would expect.
Also, it ships with typings for the JS standard library and some very common API such as the DOM, Node.js and React.
![Page 31: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/31.jpg)
Special types• mixed is supertype of all types.
• any type can be used where a mixed is required.
• any is both supertype and subtype of all the types
• any type can be used where a any is required.• it can fit where anything is required
![Page 32: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/32.jpg)
DEMO!any vs mixed
![Page 33: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/33.jpg)
any vs mixedIn general, prefer mixed.
![Page 34: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/34.jpg)
Composite typesconst user: { name: string, age: number } = {// |-------- the type ---------| name: 'Gabriele', age: 27};
![Page 35: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/35.jpg)
Type aliasestype User = { name: string, age: number };
const user: User = { name: 'Gabriele', age: 27 };
function getFriendsOf(user: User): Array<User> { ...}
![Page 36: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/36.jpg)
Quiz!const names = ['foo', 42];
What's the type of names?
![Page 37: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/37.jpg)
Union typesconst names = ['foo', 42];
So, what's the type of names?
Answer:
Array<string | number>
string | number is what we call union type
![Page 38: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/38.jpg)
DEMODealing with union types
![Page 39: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/39.jpg)
Dealing with union typesfunction getUser(userId: string): Error | User { ... }const result = getUser("foo");
if (result instanceof Error) { console.log('AAAAAHHH!');} else { console.log(result.name);}
![Page 40: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/40.jpg)
Quiz!What's the (inferred) return type of foo?
function foo(x: number) { if (x > 42) { return x; }}
![Page 41: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/41.jpg)
Let's try!function foo(x: number): number { if (x > 42) { return x; }}
NOPE!We return number in some cases, but in others we can return undefined.
![Page 42: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/42.jpg)
Let's try again!function foo(x: number): number | typeof undefined { if (x > 42) { return x; }}
(undefined is a value, typeof undefined is its type)
YEP! That's the return type.
![Page 43: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/43.jpg)
Ok, that seems pretty common...A | typeof undefined | null
has a syntax shorthand in Flow
Meet
?Athe nullable type
![Page 44: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/44.jpg)
Our final attemptfunction foo(x: number): ?number { if (x > 42) { return x; }}
![Page 45: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/45.jpg)
DEMO!Dealing with nullable types
![Page 46: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/46.jpg)
Dealing with nullable typesconst longName = names.find(name => name.length > 20);if (longName) { longName.substring(0, 1);}
// orif (longName != null) { longName.substring(0, 1);}
![Page 47: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/47.jpg)
Demo
![Page 48: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/48.jpg)
Adopting Flowvademecum
![Page 49: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/49.jpg)
$FlowFixMetype User = { name: string };// $FlowFixMeconst u: User = { foo: 'hey' };
Disables typechecking on the next line
![Page 50: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/50.jpg)
weak mode// @flow weak
less aggressive type inference, useful when starting on a new project.
![Page 51: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/51.jpg)
force the hand of the typechekerconst x: number = 'foo'; // sorry, nopeconst y: number = (('foo': any): number); // oh, ok
![Page 52: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/52.jpg)
Third-party modulesYou have some dependencies right?
npm install -g flow-typednpm install --save-dev flow-binflow-typed install
It will install every compatible type definition it finds.
![Page 53: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/53.jpg)
Stripping typesWith Babel
npm install -D babel-plugin-transform-flow-strip-types
{ "plugins": ["transform-flow-strip-types"] }
With flow-remove-types
npm install -g flow-remove-typesflow-remove-types src/ --out-dir lib/flow-node index.js # or run directly
![Page 54: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/54.jpg)
Useful resources• https://flowtype.org/docs/• https://flowtype.org/try/• Jeff Morrison - A Deepdive into Flow https://www.youtube.com/
watch?v=VEaDsKyDxkY• https://medium.com/@gcanti
![Page 55: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/55.jpg)
Wrap up• a typechecker, not a language• powerful type system• easy to adopt, easy to leave
![Page 56: Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016](https://reader031.fdocuments.in/reader031/viewer/2022030305/5870817b1a28ab57368b6763/html5/thumbnails/56.jpg)
THANK YOU!Questions?function speaker(question): ?answer { // TODO}
Twitter: @gabro27