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 full-size slide

  2. Radoslav Stankov
    @rstankov

    http://rstankov.com

    http://github.com/rstankov

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide





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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    no runtime cost

    View full-size slide

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

    View full-size slide

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

    View full-size slide