Why You Need Types in JavaScript

Slide 1

Slide 1 text

Slide 2

Slide 2 text

THE (REAL) PROBLEM Write a function that sends a POST request to the server with some form data: - If it has changed, allow the user to move on. - If it has not changed, show an error to the user. const settings = { method: …, data: … }; netQuery.ajax(url, settings) .done(allowTheUserToMoveOn) .fail(showAnErrorToTheUser);

Slide 3

Slide 3 text

Slide 4

Slide 4 text

THE (REAL) PROBLEM 1. TYPE “SETTINGS.” AND HOPE FOR THE BEST.

Slide 5

Slide 5 text

OH MY GOSH! 1. TYPE “SETTINGS.” AND HOPE FOR THE BEST. IDE SUPPORT AUTOCOMPLETION · NAVIGATION

Slide 6

Slide 6 text

THE (REAL) PROBLEM 2. AS THE FORCE IS NOT WITH YOU TODAY, GO AND CHECK THE… DOCUMENTATION?

Slide 7

Slide 7 text

2. AS THE FORCE IS NOT WITH YOU TODAY, GO AND CHECK THE… DOCUMENTATION? GIVE /* */ SOME REST… DOCUMENTATION SELF DOCUMENTED · LIVING DOCUMENTATION · ADDITIONAL IDE SUPPORT FOR PROPER DOCUMENTATION

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

4. GIVE UP AND ASK SOMEONE… COPYRIGHT © MATUSFI – FLICKR.COM, MODIFIED IMAGE TEAMWORK KNOW OTHER PEOPLE’S CODE · YET AGAIN, CARE ABOUT THE INTERFACE, NOT THE IMPLEMENTATION THERE ARE BETTER THINGS TO TALK ABOUT!

Slide 12

Slide 12 text

THE (REAL) PROBLEM 5. FIX IT! KIND OF… const settings = { method: …, data: …, isModified: true }; netQuery.ajax(url, settings) .done(allowTheUserToMoveOn) .fail(showAnErrorToTheUser);

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Slide 15

Slide 15 text

BE HAPPY! 6. SPEND THE REST OF THE DAY DEBUGGING. QUESTION YOUR CAREER… COPYRIGHT © BIBBIT – FLICKR.COM, MODIFIED IMAGE DEVELOPER EXPERIENCE CODE BETTER, FASTER, STRONGER! · DETECT BUGS EARLIER · FORGET ABOUT RUNTIME TYPE ERRORS · SAVE SOME TYPE CHECKS · REDUCE # OF UNIT TESTS

Slide 16

Slide 16 text

THE (REAL) PROBLEM 7. WAKE UP. GO TO THE OFFICE. TAKE A COFFEE.

Slide 17

Slide 17 text

THE (REAL) PROBLEM 7. WAKE UP. GO TO THE OFFICE. TAKE A COFFEE. OH! IT WAS A TYPO! const settings = { method: …, data: …, ifModified: true }; netQuery.ajax(url, settings) .done(allowTheUserToMoveOn) .fail(showAnErrorToTheUser); isModified

Slide 18

Slide 18 text

THE GOOD IDE SUPPORT PREVENTS SOME BUGS DEVELOPER EXPERIENCE (INDIVIDUAL AND TEAM) PARTIALLY TAKES OVER DOCUMENTATION AND TESTS THE BAD VERBOSE EXTRA TIME (SETUP AND DEV.) COMPLICATED (LEARNING EFFORT)

Slide 19

Slide 19 text

ADDITIONAL THOUGHTS 1. EASIER IN GREENFIELD (TYPESCRIPT) VS BROWNFIELD (FLOW). 2. MUCH EASIER REFACTORING! 3. YOU NEED TO TRY!