Tweet
Tweet

Slide 1

Slide 1 text

24.09.2019, React Open Source Meetup

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Content pages Page 4 24.09.2019, React Open Source Meetup

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

24.09.2019, React Open Source Meetup

Slide 7

Slide 7 text

24.09.2019, React Open Source Meetup

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

- 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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

24.09.2019, React Open Source Meetup Page 11 next please

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

but…. 24.09.2019, React Open Source Meetup Page 19

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

24.09.2019, React Open Source Meetup Page 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24.09.2019, React Open Source Meetup Page 24

Slide 25

Slide 25 text

not just hints 24.09.2019, React Open Source Meetup Page 25

Slide 26

Slide 26 text

24.09.2019, React Open Source Meetup Page 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

24.09.2019, React Open Source Meetup Page 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

24.09.2019, React Open Source Meetup have a nice evening!