Presented at FITC's Web Unleashed 2016 in Toronto by Branden Hall, Automata Studios FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond Save 10% off any of our events with discount code 'slideshare' Check out our events at http://fitc.ca or follow us at https://twitter.com/fitc Overview 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 Audience Members Will Learn A mental map of the current state of JS development How to evaluate JS tools & libraries Alternatives to the big libraries (jQuery, Angular, React, etc) Awesome lesser known JS tools & libraries Avoiding JS entirely through alternate languages (TypeScript, ClojureScript, Elm, etc)

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 Cambrian Javascript
Explosion

10. 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

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 (right now)
brunch (future projects)

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 (SPAs):
lodash + react + redux

26. Options from the “Big Boys”
• vue.js - view layer
• zepto - jQuery
• riot - react
• meteor - full stack!

27. Other great libraries
• d3 - data visualization
• rxjs - reactive programming
• jest - testing made easy
• 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