Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View Slide

  2. Radoslav Stankov
    @rstankov

    http://rstankov.com

    http://github.com/rstankov

    View Slide

  3. https://github.com/facebook/flow

    View Slide

  4. function double(a) {
    return a * 2;
    }

    View Slide

  5. function double(a) {
    return a * 2;
    }
    var a = double("a");

    View Slide

  6. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double("a");

    View Slide

  7. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double("a");
    ^ string.
    The operand of an arithmetic
    operation must be a number.

    View Slide

  8. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double("a");

    View Slide

  9. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double(1);

    View Slide

  10. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double(1);
    a.length;

    View Slide

  11. /* @flow */
    function double(a) {
    return a * 2;
    }
    var a = double(1);
    a.length;
    ^ property `length`
    Property not found in Number

    View Slide

  12. export type User = {
    id: number,
    name: string,
    followersCount: number,
    postsCount: number,
    tagline: ?string,
    imageUuid?: string,
    };

    View Slide

  13. function isFollowing(user: CurrentUser, topic: Topic): boolean {
    return user.followedTopicsIds.indexOf(topic.id) !== -1;
    }

    View Slide

  14. function isFollowing(user: CurrentUser, topic: Topic): boolean {
    return user.followedTopicsIds.indexOf(topic.id) !== -1;
    }
    isFollowing(null, topic);
    isFollowing(user, null);
    isFollowing(user, somethingElse);

    View Slide

  15. function isFollowing(user: CurrentUser, topic: Topic): boolean {
    return user.followedTopicsIds.indexOf(topic.id) !== -1;
    }
    isFollowing(null, topic);
    isFollowing(user, null);
    isFollowing(user, somethingElse);

    View Slide

  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);

    View Slide

  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);

    View Slide

  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);

    View Slide

  19. function isFollowing(
    user: { followedTopicsIds: Array },
    topic: { id: number }
    ): boolean {
    return user.followedTopicsIds.indexOf(topic.id) !== -1;
    }

    View Slide

  20. View Slide



  21. View Slide





  22. View Slide





  23. View Slide





  24. class UserImage extends React.Component {
    props:
    {| user: User, width: number, height: number |} |
    {| user: User, variant: 'big' | 'medium' | 'small' |};
    render() { /* ... */ }
    }

    View Slide

  25. const COUNTRIES = {
    BG: 'Bulgaria',
    US: 'United States',
    IT: 'Italy',
    FR: 'France',
    };
    type Country = $Keys;

    View Slide

  26. const COUNTRIES = {
    BG: 'Bulgaria',
    US: 'United States',
    IT: 'Italy',
    FR: 'France',
    };
    type Country = $Keys;
    const missing: Country = 'missing';

    View Slide

  27. const COUNTRIES = {
    BG: 'Bulgaria',
    US: 'United States',
    IT: 'Italy',
    FR: 'France',
    };
    type Country = $Keys;
    const missing: Country = 'missing';

    View Slide

  28. const COUNTRIES = {
    BG: 'Bulgaria',
    US: 'United States',
    IT: 'Italy',
    FR: 'France',
    };
    type Country = $Keys;
    const missing: Country = 'missing';
    const italy: Country = 'IT';

    View Slide

  29. View Slide

  30. Flow vs TypeScript
    static type checker
    structural type system
    no nullable by default
    no extra language features
    opt-in

    no runtime cost

    View Slide

  31. https://github.com/facebook/flow

    View Slide

  32. https://speakerdeck.com/rstankov/beer-dot-js-flow

    View Slide

  33. Thanks

    View Slide