Why You Need Types in JavaScript

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?

Ff1de7f1a325c8005379a310949f7f23?s=128

Dani Gámez Franco

January 17, 2017
Tweet

Transcript

  1. 1.

    COPYRIGHT © IMAGINEINDIA – FLICKR.COM, MODIFIED IMAGE WHY YOU NEED

    TYPES IN JAVASCRIPT DANI GÁMEZ · JANUARY 2017
  2. 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);
  3. 3.

    function ajax(url: string, settings?: AjaxSettings): AjaxResponse { … } interface

    AjaxSettings { async?: boolean; cache?: boolean; contentType?: any; headers?: { [key: string]: any; }; ifModified: boolean; … } WHAT IF…
  4. 5.

    OH MY GOSH! 1. TYPE “SETTINGS.” AND HOPE FOR THE

    BEST. IDE SUPPORT AUTOCOMPLETION · NAVIGATION
  5. 6.

    THE (REAL) PROBLEM 2. AS THE FORCE IS NOT WITH

    YOU TODAY, GO AND CHECK THE… DOCUMENTATION?
  6. 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
  7. 8.

    THE (REAL) PROBLEM 3. CHECK THE CODE… LINE. BY. LINE.

    COPYRIGHT © RUIWEN – FLICKR.COM, MODIFIED IMAGE
  8. 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
  9. 10.

    THE (REAL) PROBLEM 4. GIVE UP AND ASK SOMEONE… COPYRIGHT

    © MATUSFI – FLICKR.COM, MODIFIED IMAGE
  10. 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!
  11. 12.

    THE (REAL) PROBLEM 5. FIX IT! KIND OF… const settings

    = { method: …, data: …, isModified: true }; netQuery.ajax(url, settings) .done(allowTheUserToMoveOn) .fail(showAnErrorToTheUser);
  12. 13.
  13. 14.

    THE (REAL) PROBLEM 6. SPEND THE REST OF THE DAY

    DEBUGGING. QUESTION YOUR CAREER… COPYRIGHT © BIBBIT – FLICKR.COM, MODIFIED IMAGE
  14. 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
  15. 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
  16. 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)
  17. 19.
  18. 20.

    COPYRIGHT © IMAGINEINDIA – FLICKR.COM, MODIFIED IMAGE WHY YOU NEED

    TYPES IN JAVASCRIPT DANI GÁMEZ · JANUARY 2017