Beer.js - Flow

A lightning presented at Beer.js Sofia about Flow. Flow is static type checker for JavaScript, made by Facebook.

Transcript

1. Flow Radoslav Stankov 16/12/2016
2. Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov
3. https://github.com/facebook/flow
4. function double(a) { return a * 2; }
5. function double(a) { return a * 2; } var a = double("a");
6. /* @flow */ function double(a) { return a * 2; } var a = double("a");
7. /* @flow */ function double(a) { return a * 2; } var a = double("a"); ^ string. The operand of an arithmetic operation must be a number.
8. /* @flow */ function double(a) { return a * 2; } var a = double("a");
9. /* @flow */ function double(a) { return a * 2; } var a = double(1);
10. /* @flow */ function double(a) { return a * 2; } var a = double(1); a.length;
11. /* @flow */ function double(a) { return a * 2; } var a = double(1); a.length; ^ property `length` Property not found in Number
12. export type User = { id: number, name: string, followersCount: number, postsCount: number, tagline: ?string, imageUuid?: string, };
13. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }
14. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
15. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse);
16. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse); const variable: number = isFollowing(user, topic);
17. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse); const variable: number = isFollowing(user, topic);
18. function isFollowing(user: CurrentUser, topic: Topic): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; } isFollowing(null, topic); isFollowing(user, null); isFollowing(user, somethingElse); const variable: number = isFollowing(user, topic); const variable: boolean = isFollowing(user, topic);
19. function isFollowing( user: { followedTopicsIds: Array<number> }, topic: { id: number } ): boolean { return user.followedTopicsIds.indexOf(topic.id) !== -1; }
21. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" />
22. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" />
23. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" />
24. <UserImage user={user} width={50} height={30} /> <UserImage user={user} variant="small" /> <UserImage user={user} width={50} variant="small" /> <UserImage user={user} width={50} height={30} variant="small" /> class UserImage extends React.Component { props: {| user: User, width: number, height: number |} | {| user: User, variant: 'big' | 'medium' | 'small' |}; render() { /* ... */ } }
25. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>;
26. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing';
27. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing';
28. const COUNTRIES = { BG: 'Bulgaria', US: 'United States', IT: 'Italy', FR: 'France', }; type Country = $Keys<typeof COUNTRIES>; const missing: Country = 'missing'; const italy: Country = 'IT';
30. Flow vs TypeScript static type checker structural type system no nullable by default no extra language features opt-in
 no runtime cost
31. https://github.com/facebook/flow
32. https://speakerdeck.com/rstankov/beer-dot-js-flow
33. Thanks