DownTheRabbitHole.jsHow to Stay Sane in an Insane Ecosystem

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

I feel like I’m taking crazy pills.

First, a bit of history.

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

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

2009sigh.

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)

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…

The Cambrian Javascript Explosion

JavaScript Modules

• Easy to publish to npm

• Zero gatekeeping

• Massive overlap

• Quality varies wildly

• Lots, and lots of dodos

329,149modules on npm as of 9/22/2016

Wait… “modules”?

• No language support for modules!

• Work arounds it is!

• CommonJS (server)

• AMD (browser)

• Incompatible! Solution?

• MORE JAVASCRIPT!

JavaScript Tooling• Scaffold

• Yeoman, Slush, etc.

• Transpile

• Coffeescript, TypeScript, Dart, Babel, Clojurescript, Elm, etc.

• Build

• Grunt, Gulp, Webpack, Brunch, etc.

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

Rein in the madness

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?

Not just a technical problem!

• Affects hiring

• Affects employee moral

• Affects internal training

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

ES6 via BabelOur choice:

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

Our choice:

webpack (right now) brunch (future projects)

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?

Small vs. Big

• Monolithic = consistency

• Centralized documentation

• Reduced flexibility

• Larger mental load

Documentation

• Bad docs = bad software

• Unit tests

• Code coverage

• Read the docs! (Yes, all of them!)

• Read the code! (Yes, all of it!)

Functional Programming

• “Lisp in C’s Clothing”

• Prefer functions

• Immutability

• One-way data binding

• Chaining

• Reactive

Our choice (SPAs):

lodash + react + redux

Options from the “Big Boys”

• vue.js - view layer

• zepto - jQuery

• riot - react

• meteor - full stack!

Other great libraries

• d3 - data visualization

• rxjs - reactive programming

• jest - testing made easy

• moment - dates & times

• superagent - ajax

You cannot stop swimming

• Picking a “winner” is a bad idea

• Find what works for you…

• But never stop searching for better

Thank Youwww.automatastudios.com

@automatastudios

go.nasa.gov/spaceforensics

bhall@automatastudios.com @waxpraxis