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
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. function ajax(url: string, settings?: AjaxSettings): AjaxResponse { … } interface AjaxSettings { async?: boolean; cache?: boolean; contentType?: any; headers?: { [key: string]: any; }; ifModified: boolean; … } WHAT IF…
4. THE (REAL) PROBLEM 1. TYPE “SETTINGS.” AND HOPE FOR THE BEST.
5. OH MY GOSH! 1. TYPE “SETTINGS.” AND HOPE FOR THE BEST. IDE SUPPORT AUTOCOMPLETION · NAVIGATION
6. THE (REAL) PROBLEM 2. AS THE FORCE IS NOT WITH YOU TODAY, GO AND CHECK THE… DOCUMENTATION?
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
8. THE (REAL) PROBLEM 3. CHECK THE CODE… LINE. BY. LINE. COPYRIGHT © RUIWEN – FLICKR.COM, MODIFIED IMAGE
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
10. THE (REAL) PROBLEM 4. GIVE UP AND ASK SOMEONE… COPYRIGHT © MATUSFI – FLICKR.COM, MODIFIED IMAGE
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!
12. THE (REAL) PROBLEM 5. FIX IT! KIND OF… const settings = { method: …, data: …, isModified: true }; netQuery.ajax(url, settings) .done(allowTheUserToMoveOn) .fail(showAnErrorToTheUser);
14. THE (REAL) PROBLEM 6. SPEND THE REST OF THE DAY DEBUGGING. QUESTION YOUR CAREER… COPYRIGHT © BIBBIT – FLICKR.COM, MODIFIED IMAGE
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
16. THE (REAL) PROBLEM 7. WAKE UP. GO TO THE OFFICE. TAKE A COFFEE.
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
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)
19. ADDITIONAL THOUGHTS 1. EASIER IN GREENFIELD (TYPESCRIPT) VS BROWNFIELD (FLOW). 2. MUCH EASIER REFACTORING! 3. YOU NEED TO TRY!
20. COPYRIGHT © IMAGINEINDIA – FLICKR.COM, MODIFIED IMAGE WHY YOU NEED TYPES IN JAVASCRIPT DANI GÁMEZ · JANUARY 2017