Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DownTheRabbitHole.js
How 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 (...
Power Struggle
• Plugins for non-trivial interactivity
• Big fights over ECMAScript v4
• End result was v3.1 v5 in…
2009
s...
In the meantime…
• 2005 - AJAX white paper
• 2006 - jQuery, Mootools, Prototype, & Dojo
• Make working with the DOM easier...
node.js & npm
• 2009 - node.js released
• Powered by Google’s v8 JS engine for Webkit
• Async I/O
• JS on the server anywh...
The Javascript
Cambrian Explosion
JavaScript Modules
• Easy to publish to npm
• Zero gatekeeping
• Massive overlap
• Quality varies wildly
• Lots, and lots ...
Wait… “modules”?
• No language support for modules!
• Work arounds it is!
• CommonJS (server)
• AMD (browser)
• Incompatib...
JavaScript Tooling
• Scaffold
• Yeoman, Slush, etc.
• Transpile
• Coffeescript, TypeScript, Dart,
Babel, Clojurescript, El...
On the horizon
• asm.js
• Strict subset of JavaScript that acts as a compiler target
• Compile C, C++, Lua, Ruby, Python, ...
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 you...
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 t...
ES6 via Babel
Our choice:
Invest in great tooling
• The best setups have the tightest feedback loops
• One-click is great, no clicks is better
• Aut...
Our choice:
webpack
Philosophy
• What’s the core idea?
• Can they explain it?
• What is their inspiration?
• Are they solving your problems?
•...
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!...
Functional Programming
• “Lisp in C’s Clothing”
• Prefer functions
• Immutability
• One-way data binding
• Chaining
• Reac...
Our choice:
lodash + react + redux
Options from the “Big Boys”
• zepto - jQuery
• riot - react
• vue - angular/ember
• meteor - full stack!
Other great libraries
• d3 - data visualization
• paper - vector graphics
• socket.io - real-time data
• moment - dates & ...
You cannot stop swimming
• Picking a “winner” is a bad idea
• Find what works for you…
• But never stop searching for bett...
Thank You
www.automatastudios.com
@automatastudios
go.nasa.gov/spaceforensics
bhall@automatastudios.com
@waxpraxis
Upcoming SlideShare
Loading in …5
×

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

379 views

Published on

Presented at FITC Toronto 2016
See details at www.fitc.ca

Today it feels like Javascript tools and libraries are popping like up mushrooms. And just like fungi, if you pick the wrong one, it could lead to some real suffering. From Angular to Zepto, this talk will help you map out the ecosystem and find the good stuff so you can avoid having a bad trip.

Objective
The audience will learn how to map out and evaluate tools and libraries in the JS ecosystem

Target Audience
The target audience is JS developers who want to feel a little more sane

Assumed Audience Knowledge
A working understanding Javascript

Five Things You’ll Learn

1. A mental map of the current state of JS development
2. How to evaluate JS tools & libraries
3. Alternatives to the big libraries (jQuery, Angular, React, etc)
4. Awesome lesser known JS tools & libraries
5. Avoiding JS entirely through alternate languages (TypeScript, ClojureScript, Elm, etc)

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

  1. 1. DownTheRabbitHole.js How to Stay Sane in an Insane Ecosystem
  2. 2. Space Forensics • Government contract… • For an educational… • Lucas Arts style game… • For NASA!
  3. 3. I feel like I’m taking crazy pills.
  4. 4. First, a bit of history.
  5. 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. 6. Power Struggle • Plugins for non-trivial interactivity • Big fights over ECMAScript v4 • End result was v3.1 v5 in… 2009 sigh.
  7. 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. 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. 9. The Javascript Cambrian Explosion
  10. 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. 11. Wait… “modules”? • No language support for modules! • Work arounds it is! • CommonJS (server) • AMD (browser) • Incompatible! Solution? • MORE JAVASCRIPT!
  12. 12. JavaScript Tooling • Scaffold • Yeoman, Slush, etc. • Transpile • Coffeescript, TypeScript, Dart, Babel, Clojurescript, Elm, etc. • Build • Grunt, Gulp, Webpack, Brunch, etc.
  13. 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. 14. Rein in the madness
  15. 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. 16. Not just a technical problem! • Affects hiring • Affects employee moral • Affects internal training
  17. 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. 18. ES6 via Babel Our choice:
  19. 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. 20. Our choice: webpack
  21. 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. 22. Small vs. Big • Monolithic = consistency • Centralized documentation • Reduced flexibility • Larger mental load
  23. 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. 24. Functional Programming • “Lisp in C’s Clothing” • Prefer functions • Immutability • One-way data binding • Chaining • Reactive
  25. 25. Our choice: lodash + react + redux
  26. 26. Options from the “Big Boys” • zepto - jQuery • riot - react • vue - angular/ember • meteor - full stack!
  27. 27. Other great libraries • d3 - data visualization • paper - vector graphics • socket.io - real-time data • moment - dates & times • superagent - ajax
  28. 28. You cannot stop swimming • Picking a “winner” is a bad idea • Find what works for you… • But never stop searching for better
  29. 29. Thank You www.automatastudios.com @automatastudios go.nasa.gov/spaceforensics bhall@automatastudios.com @waxpraxis

×