Practical Flow Type

Slides presented at gotanda.js

Nobuhide Yayoshi

Transcript

1. Practical
   FlowType
   @yayoc
   

   View Slide

2. Hello!
   I am
   Nobuhide Yayoshi
   弥吉修英
   You can find me at @yayoc
   Frontend engineer, iOS
   At Fast Retailing
   

   View Slide

3. https://flow.org/
   

   View Slide

4. “ A static type checker for JavaScript
   Made By FB
   Easy to adopt, easy to leave
   

   View Slide

5. Why
   Type Safety?
   ⊙ Efficient team development
   ⊙ Writing code with confident
   ⊙ Documentable
   

   View Slide

6. Flow Type for
   Redux
   

   View Slide

7. Actions
   

   View Slide

8. Action Type
   with
   Union Type
   

   View Slide

9. Action Type
   Alias
   With
   Generics
   

   View Slide

10. Action Type
    Alias
    With
    Generics
    

    View Slide

11. $Exact
    

    View Slide

12. Without
    $Exact
    

    View Slide

13. Without
    $Exact
    

    View Slide

14. With
    $Exact
    

    View Slide

15. Reducer
    

    View Slide

16. Maybe,
    Optional
    

    View Slide

17. Refinements
    

    View Slide

18. $Exact
    Spread
    Object
    Issue!
    http://qiita.com/stomita/items/24a7d223acdc6a8715f4
    https://github.com/facebook/flow/issues/2405
    

    View Slide

19. Flow Type for
    Class
    

    View Slide

20. Model
    Promise immutability
    

    View Slide

21. Model
    Promise immutability
    [flow] property `username` (user.js:20:7)
    Covariant property `username` incompatible with
    contravariant use in assignment of property
    `username`
    

    View Slide

22. Model
    Promise immutability
    

    View Slide

23. Actions as
    Immutable
    

    View Slide

24. Flow Type for
    React
    Component
    

    View Slide

25. React PropTypes
    or
    Flow?
    

    View Slide

26. Components
    Prefer using
    Generic Style
    

    View Slide

27. Components
    Prefer using
    Generic Style
    

    View Slide

28. Components
    Prefer using
    Generic Style
    

    View Slide

29. React
    Component
    with
    $PropertyTypes
    

    View Slide

30. Adding
    Props
    With
    HOC
    

    View Slide

31. Adding
    Props
    With
    HOC
    

    View Slide

32. Adding
    Props
    With
    HOC
    

    View Slide

33. Error Case
    Adding
    Props
    With
    HOC
    

    View Slide

34. Other tips
    

    View Slide

35. https://github.com/flowtype/flow-typed
    flow-typed install
    Third Party
    https://github.com/facebook/immutable-js/blob/master/type
    -definitions/immutable.js.flow
    Finally, Immutable.js supports Flow type in v4.0.0-rc1
    

    View Slide

36. Flow-coverage-report
    https://github.com/rpl/flow-coverage-report
    

    View Slide

37. Compare
    Typescript
    if you use Flow, you'll have much higher
    type coverage much faster and you'll be
    able to sleep soundly.
    http://thejameskyle.com/adopting-flow-and-typescript.html
    

    View Slide

38. Swagger
    Flow Type
    A Swagger file has
    more than 8000 lines
    Writing Type Definitions manually is HARD
    

    View Slide

39. https://github.com/yayoc/swagger-to-flowtype
    https://github.com/yayoc/swagger-to-flowtype
    https://medium.com/@n_yayoshi/swagger-to-flowtype-generates-flow-type-aliases-8fab67776a4
    

    View Slide

40. View Slide

41. swagger.yaml
    

    View Slide

42. flowtype.js
    

    View Slide

43. Conclusion
    ⊙ Utility types are useful
    ○ $Exact
    ○ $PropertyType
    ○ Class
    ○ Immutability
    ⊙ Prefer Flow than Proptypes
    ⊙ Prefer Generic Component
    ⊙ swagger-to-flowtype is useful
    

    View Slide

44. 型安全 is Rock
    

    View Slide

45. We are hiring!!!
    

    View Slide

46. Thanks!
    Any questions?
    You can find me at @yayoc &
    hi@yayoc.com
    

    View Slide

47. Credits Special thanks to all the people who
    made and released these awesome
    resources for free:
    ⊙ Presentation template by
    SlidesCarnival
    ⊙ Photographs by Unsplash
    

    View Slide