$30 off During Our Annual Pro Sale. View Details »

Flow, du strong, static typing pour JavaScript

Flow, du strong, static typing pour JavaScript

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

Matthias Le Brun

May 25, 2016
Tweet

More Decks by Matthias Le Brun

Other Decks in Programming

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