$30 off During Our Annual Pro Sale. View Details »

Beer.js - Flow

Beer.js - Flow

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

Radoslav Stankov

December 16, 2016
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

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; }
  20. None
  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';
  29. None
  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