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
   

   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