This document provides a history of JavaScript development from 1995 to the present. It describes how JavaScript evolved from a scripting language created in 10 days for Netscape (Mocha/LiveScript) to an industry standard (ECMAScript). It outlines major developments like Node.js, npm, and the rise of JavaScript modules/tooling. It recommends choosing technologies based on your specific needs rather than trends, investing in great tooling, and continuing to learn as the ecosystem rapidly changes.

1. DownTheRabbitHole.js
How to Stay Sane in an Insane Ecosystem

2. Space Forensics
• Government contract…
• For an educational…
• Lucas Arts style game…
• For NASA!

3. I feel like I’m taking
crazy pills.

4. First, a bit of history.

5. In the beginning
• 1995 - Over 10 days Brendan Eich of Netscape made Mocha
• Renamed to LiveScript
• And then JavaScript (licensing a ride on Java’s coattails…)
• 1997 - ECMAScript v1 (ECMA-262) standard defined
• 1998 - ECMAScript v2 - now an ISO standard (ISO/IEC 16262)
• 1999 - ECMAScript v3 - first “modern” javascript

6. Power Struggle
• Plugins for non-trivial interactivity
• Big fights over ECMAScript v4
• End result was v3.1 v5 in…
2009
sigh.

7. In the meantime…
• 2005 - AJAX white paper
• 2006 - jQuery, Mootools, Prototype, & Dojo
• Make working with the DOM easier
• Smooth over cross-platform issues
• Bring common patterns to JS (observables, promises, etc)

8. node.js & npm
• 2009 - node.js released
• Powered by Google’s v8 JS engine for Webkit
• Async I/O
• JS on the server anywhere!
• 2011 - npm released
• Package manager for JS
• Which results in…

9. The Javascript
Cambrian Explosion

10. JavaScript Modules
• Easy to publish to npm
• Zero gatekeeping
• Massive overlap
• Quality varies wildly
• Lots, and lots of dodos
263,081modules on npm as of 4/16/2016

11. Wait… “modules”?
• No language support for modules!
• Work arounds it is!
• CommonJS (server)
• AMD (browser)
• Incompatible! Solution?
• MORE JAVASCRIPT!

12. JavaScript Tooling
• Scaffold
• Yeoman, Slush, etc.
• Transpile
• Coffeescript, TypeScript, Dart,
Babel, Clojurescript, Elm, etc.
• Build
• Grunt, Gulp, Webpack, Brunch,
etc.

13. On the horizon
• asm.js
• Strict subset of JavaScript that acts as a compiler target
• Compile C, C++, Lua, Ruby, Python, etc. to JS
• ECMAScript v6 (ES6) - Modules! Tons of new syntax!
• WebComponents - emerging standard (Polymer polyfill)
• HTTP/2 - everything you know about HTTP is wrong

14. Rein in the madness

15. One size does not fit all
• What are you building?
• How big will the codebase be?
• Who is your audience?
• What does your team know?
• When is the project due?
• How long will your code last?

16. Not just a technical problem!
• Affects hiring
• Affects employee moral
• Affects internal training

17. Transpiled Languages
• Need to know JS too
• Matters less than discipline
• More complex tooling
• Longer ramp-up
• Just the “good parts”
• Strong typing
• Improved syntax
• Domain specificity
ConsPros

18. ES6 via Babel
Our choice:

19. Invest in great tooling
• The best setups have the tightest feedback loops
• One-click is great, no clicks is better
• Automate all the things!
• Bootstrapping
• Building (including sourcemaps!)
• Testing
• Deploying
• Document your tools like crazy

20. Our choice:
webpack

21. Philosophy
• What’s the core idea?
• Can they explain it?
• What is their inspiration?
• Are they solving your problems?
• Does it play well with others?

22. Small vs. Big
• Monolithic = consistency
• Centralized documentation
• Reduced flexibility
• Larger mental load

23. Documentation
• Bad docs = bad software
• Unit tests
• Code coverage
• Read the docs! (Yes, all of them!)
• Read the code! (Yes, all of it!)

24. Functional Programming
• “Lisp in C’s Clothing”
• Prefer functions
• Immutability
• One-way data binding
• Chaining
• Reactive

25. Our choice:
lodash + react + redux

26. Options from the “Big Boys”
• zepto - jQuery
• riot - react
• vue - angular/ember
• meteor - full stack!

27. Other great libraries
• d3 - data visualization
• paper - vector graphics
• socket.io - real-time data
• moment - dates & times
• superagent - ajax

28. You cannot stop swimming
• Picking a “winner” is a bad idea
• Find what works for you…
• But never stop searching for better

29. Thank You
www.automatastudios.com
@automatastudios
go.nasa.gov/spaceforensics
bhall@automatastudios.com
@waxpraxis