Slide 1

Slide 1 text

No Time for TYPES

Slide 2

Slide 2 text

Nick Nisi JavaScript Developer @nicknisi

Slide 3

Slide 3 text

Dynamic Language Enthusiast

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Omaha Dynamic Language Users Group

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

I Wrote my First JavaScript in 2007

Slide 9

Slide 9 text

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"; } } Loading...

Slide 10

Slide 10 text

Do you remember the very first lines of JavaScript you ever wrote? Nick Nisi @nicknisi 10:38 pm - 15 Aug 2018 Link

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

My First Real Job

Slide 13

Slide 13 text

I Embraced the Spaghetti

Slide 14

Slide 14 text

Dojo succeeds at taking all the fun out of JavaScript and making it more like Java. Nick Nisi @nicknisi Sometime in 2011

Slide 15

Slide 15 text

JAVASCRIPT ALWAYS BET ON

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

If Your App Touches the Web, It Probably Has JavaScript

Slide 18

Slide 18 text

JavaScript Has the Benefit of Being Influenced by ALL Languages

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

https://www.slideshare.net/BrendanEich/jslol-9539395/110-Always_bet_on_JS_First They Didn’t Bet on JS

Slide 21

Slide 21 text

• 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

Slide 22

Slide 22 text

Why All the Attempts Replace JavaScript? JavaScript’s role in an application is too important

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

These characteristics introduce bottlenecks to understanding the code which leads to increased risk as the code grows and changes

Slide 25

Slide 25 text

JavaScript Wasn’t Designed To Handle Large Projects

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ES2015+ ES5

Slide 28

Slide 28 text

Modularization Encapsulation Reuse ES2015+ ES5

Slide 29

Slide 29 text

Error Detection Annotation Code Style ? ES2015+ ES5

Slide 30

Slide 30 text

“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/

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Superset TypeScript ES2015+ ES5

Slide 33

Slide 33 text

Types Are the Least Interesting Part! (It’s what they enable)

Slide 34

Slide 34 text

Better Tooling Refactoring IntelliSense Continuous Feedback Loop

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Thanks! • @nicknisi • @nicknisi • nicknisi.com • Code: github.com/nicknisi/es-ts-need-to-know • Slides: