DownTheRabbitHole.js – How to Stay Sane in an Insane Ecosystem
Transcript of DownTheRabbitHole.js – How to Stay Sane in an Insane Ecosystem
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
[email protected] @waxpraxis