Flow, du strong, static typing pour JavaScript

Présentation de Flow et de ses capacités en matière de type-checking

Transcript

1. Flow
   du strong, static typing pour JavaScript
   

   View Slide

2. Matthias Le Brun
   @bloodyowl
   Lead front end developer @ BeOpinion
   Putain de code
   

   View Slide

3. View Slide

4. Node Element
   

   View Slide

5. JavaScript
   • undefined is not a function
   • TypeError: Cannot read property "bar" of undefined
   • "undefined commentaires"
   • "You have [object Object] messages"
   • TypeError: TypeError
   • ReferenceError: Can't find variable: foo
   • NaN
   

   View Slide

6. JavaScript
   Weakly typed
   

   View Slide

7. JavaScript
   Dynamically typed
   

   View Slide

8. JavaScript
   …
   

   View Slide

9. «Workarounds»
   On peut documenter
   

   View Slide

10. «Workarounds»
    On peut vérifier les types au runtime
    

    View Slide

11. «Workarounds»
    On peut «ignorer» les soucis ¯\_(ϑ)_/¯
    

    View Slide

12. View Slide

13. View Slide

14. Flow
    A static type checker for JavaScript
    

    View Slide

15. View Slide

16. View Slide

17. Flow
    Détecte les incompatibilités
    

    View Slide

18. Flow
    Détecte les incompatibilités
    

    View Slide

19. Flow
    Permet d'annoter son code
    

    View Slide

20. Flow
    

    View Slide

21. Flow
    Comprend les built-ins
    

    View Slide

22. Flow
    Aliases
    

    View Slide

23. Flow
    Aliases
    

    View Slide

24. Flow
    Generics
    

    View Slide

25. Flow
    Generics
    

    View Slide

26. Flow
    Interfaces
    

    View Slide

27. Flow + React
    

    View Slide

28. Transformer en JS valide
    

    View Slide

29. Flow
    Peut fonctionner sans transformation
    

    View Slide

30. Flow
    Code externe
    

    View Slide

31. TypeScript
    • Différences de syntaxe mineures
    • Flow commence à fonctionner sans annotations et
    s'intègre mieux à un projet existant
    • TypeScript n'analyse pas les call-sites
    

    View Slide

32. Merci
    Questions ?
    Matthias Le Brun
    @bloodyowl
    

    View Slide