JSDoc + TypeScript. Star-crossed lovers

Having type checking is great, it saves from many errors, helps better understand code base, but it also has own price... most of solutions forcing learn own language superset, require compiling stage and generally slow down development.

Is there any way to save JavaScript freedom and receive all typisation benefits? The answer is yes. This slides is gonna show how to achieve this.

https://github.com/godban/jsdoc-and-typescript

Transcript

1. 24.09.2019, React Open Source Meetup
   

   View Slide

2. 24.09.2019, React Open Source Meetup Page 2
   Bogdan Plieshka
   Frontend Engineer at Zattoo
   

   View Slide

3. 24.09.2019, React Open Source Meetup Page 3
   Within very small team of 2.5 engineers
   Progressive Web App and Chromecast
   Projects at Zattoo
   

   View Slide

4. Content pages
   Page 4
   24.09.2019, React Open Source Meetup
   

   View Slide

5. 24.09.2019, React Open Source Meetup Page 5
   We do have a lot of complex business logic scenarios,
   especially for German market where many things are
   legally regulated.
   The more logic you have, the harder it is to understand
   it, and the bigger are the chances to make mistakes.
   

   View Slide

6. 24.09.2019, React Open Source Meetup
   

   View Slide

7. 24.09.2019, React Open Source Meetup
   

   View Slide

8. 24.09.2019, React Open Source Meetup Page 8
   01
   JavaScript linting with ESLint
   02
   Styles linting with Stylelint
   03
   Unit tests with Jest
   04
   Static tests for size, translations, etc.
   05
   Functional tests with Cypress
   06
   Visual tests with Cypress + Jest image snapshot
   

   View Slide

9. - when wrong parameters are passed into function
   - a non-existent method has been called
   - or one value messes up with another
   - and your test coverage is <100%
   24.09.2019, React Open Source Meetup Page 9
   

   View Slide

10. passing all of our tests
    24.09.2019, React Open Source Meetup Page 10
    

    View Slide

11. 24.09.2019, React Open Source Meetup Page 11
    next please
    

    View Slide

12. so wrong type shall not pass
    24.09.2019, React Open Source Meetup Page 12
    

    View Slide

13. 24.09.2019, React Open Source Meetup Page 13
    You’re facing a new, more complex and
    verbose language, lose your speed and
    dynamic freedom
    

    View Slide

14. and check out what the available options are
    24.09.2019, React Open Source Meetup Page 14
    

    View Slide

15. 24.09.2019, React Open Source Meetup Page 15
    + Easy to use
    + No specific syntax needed, patching component
    - validation happens in runtime
    - hardly removable from production code
    - covers only React components
    github.com/facebook/prop-types
    reactjs.org/docs/typechecking-with-proptypes.html
    

    View Slide

16. 24.09.2019, React Open Source Meetup Page 16
    + easy to integrate
    + static checking
    + autocomplete
    + Facebook support
    - poor coverage for public libraries
    - is dead
    flow.org
    

    View Slide

17. 24.09.2019, React Open Source Meetup Page 17
    + easy to implement
    + static checking
    + autocomplete
    + superset of JavaScript
    + great compiler
    + great editors support
    + great third party coverage
    + Microsoft support
    - needs compilation
    - learning curve
    - v1.8
    typescriptlang.org
    

    View Slide

18. 24.09.2019, React Open Source Meetup Page 18
    + solid type system
    + autocompletion
    + future syntax
    + good documentation
    + Facebook support
    - entire new language
    - learning curve
    - needs compilation
    reasonml.github.io
    

    View Slide

19. but….
    24.09.2019, React Open Source Meetup Page 19
    

    View Slide

20. 24.09.2019, React Open Source Meetup Page 20
    We struggled replacing huge,
    unmainatable projects written in
    CoffeeScript and Backbone
    (still not all of them)
    

    View Slide

21. It’s like joining mafia
    24.09.2019, React Open Source Meetup Page 21
    

    View Slide

22. 24.09.2019, React Open Source Meetup Page 22
    

    View Slide

23. 24.09.2019, React Open Source Meetup Page 23
    Markup language used to annotate JS.
    Formed alongside with JavaScript itself, 20 years ago.
    Not evolving much these days. Too good for changes?
    jsdoc.app
    So primal that it
    even has no logo
    

    View Slide

24. 24.09.2019, React Open Source Meetup Page 24
    

    View Slide

25. not just hints
    24.09.2019, React Open Source Meetup Page 25
    

    View Slide

26. 24.09.2019, React Open Source Meetup Page 26
    

    View Slide

27. 24.09.2019, React Open Source Meetup Page 27
    What if we run our JavaScript with JSDoc
    under TypeScript compiler?
    

    View Slide

28. 24.09.2019, React Open Source Meetup Page 28
    

    View Slide

29. What a hell?
    24.09.2019, React Open Source Meetup Page 29
    

    View Slide

30. 24.09.2019, React Open Source Meetup Page 30
    typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc
    

    View Slide

31. 24.09.2019, React Open Source Meetup Page 31
    typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc
    

    View Slide

32. 24.09.2019, React Open Source Meetup Page 32
    + easy to implement
    + easy to write
    + static checking
    + autocomplete
    + it’s JavaScript
    + does not need compilation, unless you want to check types
    + great editors support
    + great third party coverage
    + Microsoft support
    - not everything is supported
    - you are limited by TS limitations, unless you ignore types
    

    View Slide

33. do we still have time?
    24.09.2019, React Open Source Meetup Page 33
    github.com/godban/jsdoc-and-typescript
    

    View Slide

34. 24.09.2019, React Open Source Meetup
    have a nice evening!
    

    View Slide