Why You Need Types in JavaScript

Why should you, as a Software Engineer/Developer, consider adding a type system in your build? Let's see what they can offer us going through an example that will probably be familiar to most of us!

I gave this presentation while working at Netcentric in one of our regular Frontend Talks. Would you like to join us?

Transcript

1. COPYRIGHT © IMAGINEINDIA – FLICKR.COM, MODIFIED IMAGE
   WHY YOU NEED
   TYPES IN
   JAVASCRIPT
   DANI GÁMEZ · JANUARY 2017
   

   View Slide

2. 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);
   

   View Slide

3. function ajax(url: string, settings?: AjaxSettings): AjaxResponse {
   …
   }
   interface AjaxSettings {
   async?: boolean;
   cache?: boolean;
   contentType?: any;
   headers?: { [key: string]: any; };
   ifModified: boolean;
   …
   }
   WHAT IF…
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 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
   

   View Slide

8. THE (REAL) PROBLEM
   3. CHECK THE CODE… LINE. BY. LINE.
   COPYRIGHT © RUIWEN – FLICKR.COM, MODIFIED IMAGE
   

   View Slide

9. TIME IS MONEY!
   3. CHECK THE CODE… LINE. BY. LINE.
   COPYRIGHT © RUIWEN – FLICKR.COM, MODIFIED IMAGE
   TIME
   YOU SHOULDN’T BE DOING THAT… · CARE ABOUT THE
   INTERFACE, NOT THE IMPLEMENTATION
   

   View Slide

10. THE (REAL) PROBLEM
    4. GIVE UP AND ASK SOMEONE…
    COPYRIGHT © MATUSFI – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

11. 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!
    

    View Slide

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

    View Slide

13. View Slide

14. THE (REAL) PROBLEM
    6. SPEND THE REST OF THE DAY DEBUGGING.
    QUESTION YOUR CAREER…
    COPYRIGHT © BIBBIT – FLICKR.COM, MODIFIED IMAGE
    

    View Slide

15. 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
    

    View Slide

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

    View Slide

17. 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
    

    View Slide

18. 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)
    

    View Slide

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

    View Slide

20. COPYRIGHT © IMAGINEINDIA – FLICKR.COM, MODIFIED IMAGE
    WHY YOU NEED
    TYPES IN
    JAVASCRIPT
    DANI GÁMEZ · JANUARY 2017
    

    View Slide