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

315 views

Published on

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)

Published in: Internet
  • Be the first to comment

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 Cambrian Javascript Explosion
  10. 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. 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 (right now) brunch (future projects)
  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 (SPAs): lodash + react + redux
  26. 26. Options from the “Big Boys” • vue.js - view layer • zepto - jQuery • riot - react • meteor - full stack!
  27. 27. Other great libraries • d3 - data visualization • rxjs - reactive programming • jest - testing made easy • 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

×