Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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?

Dani Gámez Franco

January 17, 2017
Tweet

More Decks by Dani Gámez Franco

Other Decks in Programming

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