No Time for Types

Presented at JSConf US 2018 on August 21st, 2018

We already know the advantages of typed programming languages — from code completion to refactoring to compile-time errors. But saving time in the future doesn’t create a free-flowing subprime time loan we can borrow from to rework our code right now. In this talk, we’ll discuss the various stages of avoidance we go through to justify the position that “types aren’t for us”. We’ll break these down to show the true, non-hyped advantages types bring to any project and will demonstrate gradually adopting typed JavaScript as part of a normal workflow. We’ll discover that having a single champion of typed JavaScript on your project can ease adoption. Finally, we’ll explore workflows that let us find and categorize potential problems when we want to instead of having perpetually squiggly red lines shouting at us from our editor.

Transcript

1. No Time for TYPES
2. Nick Nisi JavaScript Developer @nicknisi
3. Dynamic Language Enthusiast
6. Omaha Dynamic Language Users Group
7. Dynamic Vs. Static Nobody has time for types! • Flexible • Less verbose / Less ceremony • More tolerant to change • Spend less time working on fixing semantic errors • Easier to test • Console / REPL • Earlier detection of mistakes • Better documentation in code • Opportunities for compiler optimization • Increased runtime efficiency • Better design-time developer experience
8. I Wrote my First JavaScript in 2007
9. <script language="JavaScript" type="text/javascript"> var XMLHhttp = new XMLHttpRequest(); window.onload = function() { XMLHttp.open("GET", "data.php?" + Math.random()); XMLHttp.onreadystatechange = handlerFunction; XMLHttp.send(null); with (document.getElementById("loading")) { style.visibility = "visible"; if (navigator.appName == "Microsoft Internet Explorer") { style.posLeft = document.body.clientWidth - 75; style.posTop = 0; } else { style.left = (window.innerWidth - 75) + "px"; style.top = "0px"; } } } function handlerFunction() { if (XMLHttp.readyState == 4) { document.getElementById("loading").style.visibility = "hidden"; } } </script> <span id="loading" style="position:absolute;visibility:hidden;background-color:red;width:75px;">Loading...</span>
10. Do you remember the very first lines of JavaScript you ever wrote? Nick Nisi @nicknisi 10:38 pm - 15 Aug 2018 Link
11. @nicknisi Something like “el.style.color=‘red’” and we called it DHTML. Lucas Scharenbroich @ljscharen 4:54 am - 16 Aug 2018 Link @nicknisi Doing AJAX calls in a jQuery mobile app, and figuring out I need to use sync: true or for some reason I could not “return the result”. It was a big aha moment when I finally understood callbacks and the event loop months later Felix Becker @felixbecker 8:55 am - 16 Aug 2018 Link It was jQuery! Someone called into my call center about wanting to change their website. I hacked my way to a solution and injected it into the site through their footer. Something like $(“p.classname”).text(“whatever”); https://twitter.com/nicknisi/status/1029935294123044865 Carmen Electron @carmalou 11:17 am - 16 Aug 2018 Link @nicknisi It was likely back in 1999, when it was considered “DHTML”. I had a little script that would change the opacity of an item as you mouseover’d it. If only I knew about a little thing called, “CSS”. Jason @scurker 9:38 am - 16 Aug 2018 Link
12. My First Real Job
13. I Embraced the Spaghetti
14. Dojo succeeds at taking all the fun out of JavaScript and making it more like Java. Nick Nisi @nicknisi Sometime in 2011
15. JAVASCRIPT ALWAYS BET ON
17. If Your App Touches the Web, It Probably Has JavaScript
18. JavaScript Has the Benefit of Being Influenced by ALL Languages
20. https://www.slideshare.net/BrendanEich/jslol-9539395/110-Always_bet_on_JS_First They Didn’t Bet on JS
21. • Not trying to be a replacement for JavaScript • Perform computationally-intensive tasks at nearly native speed • We’ll likely see JS and WASM used together What About WebAssembly? “JavaScript has an incredible amount of momentum and will remain the single, privileged dynamic language of the Web.” - WebAssembly FAQ
22. Why All the Attempts Replace JavaScript? JavaScript’s role in an application is too important
23. JS Project Characteristics Size JS codebases are getting HUGE Time Projects are often worked on for years, spanning several iterations Complex Projects are too large for a single dev to understand every detail Lifetime Developers come and go throughout the project’s life
24. These characteristics introduce bottlenecks to understanding the code which leads to increased risk as the code grows and changes
25. JavaScript Wasn’t Designed To Handle Large Projects
26. Risk Mitigation Modularization Encapsulation Reuse Error Detection Annotation https://softwareengineering.stackexchange.com/questions/221615/why-do-dynamic-languages-make-it-more-difficult-to-maintain-large-codebases Code Style
27. ES2015+ ES5
28. Modularization Encapsulation Reuse ES2015+ ES5
29. Error Detection Annotation Code Style ? ES2015+ ES5
30. “Relying on a giant test suite and test infrastructure to prove the correctness of renaming a function or adding a parameter, in practice, is a significant coefficient of friction on the software’s ability to evolve over time.” - Chad Austin https://chadaustin.me/2015/04/the-long-term-problem-with-dynamically-typed-languages/
31. TypeScript • Created by Anders Hejlsberg at Microsoft • Released in 2012 • Adds type annotations, interfaces, generics, and more! • Active community • Version 3 just released • Strict superset of JavaScript
32. Superset TypeScript ES2015+ ES5
33. Types Are the Least Interesting Part! (It’s what they enable)
34. Better Tooling Refactoring IntelliSense Continuous Feedback Loop
38. Thanks! • @nicknisi • @nicknisi • nicknisi.com • Code: github.com/nicknisi/es-ts-need-to-know • Slides: