tools.js

@ronnieoverby

Implicit Dependency

var shriek = function(shriekee){
    alert('Shriek, ' + shriekee + '!');
};

$(function(){ 
  $('.thangz').coolPlugin({   
    onGawk: function(e){
      _.forEach(e.target.values, function(thingy){
        shriek(thingy);
      });
    }
  });
});

THESE MUST BE DEFINED BY NOW!!!

THIS MUST BE EVAL'D

BEFORE OTHERS CAN USE!!!

Where We Want To Be

• Single .js reference (or as few as possible)
• Explicitly declared dependencies
  • … easy to find and understand
• Order doesn't matter
  • … because there's not much to order

import _ from 'lodash';
import $ from 'jquery';
import coolPlugin from 'that-cool-jq-plugin';

const shriek = shriekee =>
  alert(`Shriek, ${shriekee}!`);

$('.thangz').coolPlugin({   
  onGawk: function(e){
    _.forEach(e.target.values, function(thingy){
      shriek(thingy);
    });
  }
});

export {shriek};

ES2015 Modules

How Can We Get There?

• Just Use ES6?
• Javascript can now run everywhere
  • Client/Browser
  • Server
  • Dev. / Build Environments
• … but not the SAME everywhere

http://kangax.github.io/compat-table/es6/

We Need Tools!

• Linters
• Static Analyzers
• Test Runners
• Watchers

Let's Get Tools!

Ronnie Overby's Fallacies of JS Tool Selection

Choosing tools is easy!

Learning to use the chosen tool will be easy!

All of my tools will work nicely with each other!

Having chosen a tool, I won't need or want to switch!

There Are Too Many Overlapping Choices

Too Many Choices

leads to…

Picking The Wrong Tool

Did you know…

• Breeze.js is precluded by binding frameworks that monkey patch getters/setters?
• Angular 1.x has a completely irrelevant and mostly useless module system?
• Bower would fall far out of favor for front-end package management?

Knowable after observing failure

Knowable after it's too late

Completely Unpredictable

Fear of poor choice

leads to…

Analysis Paralysis

• Babel vs Traceur vs TypeScript vs CoffeeScript
• Angular vs Ember vs Durandal vs Aurelia vs React vs Vue vs Riot vs Mithril vs Backbone vs Meteor vs Sails
• Grunt vs Gulp vs Brunch vs Broccoli vs Browserify vs WebPack vs jspm vs Duo vs Gobble vs RequireJS vs Rollup vs Sprockets vs Fly vs Start
• Jasmine vs Jest vs Karma vs Mocha vs QUnit

Decision Making

• Gauge Project Health
  • Github Stats API
• Gauge Community Interest
  • StackOverflow Data Explorer
• Keep your ear to the ground
  • Podcasts
  • Meetups
  • Google
    • "whizbang.js sucks"
    • "whizbang.js is awesome"
    • "whizbang.js vs goatmilk.js"

Data Explorer

http://data.stackexchange.com/stackoverflow/query/new

http://data.stackexchange.com/stackoverflow/query/edit/447363

Posts by Tag over Time

Back to the point

• We want to catch up to modern JS practices in the browser
• Browsers are notoriously inconsistent
• There are many tools to choose from to help us
• Specifically, we want…
  • to write modular code
  • to use the latest language constructs
  • to easily import and use dependencies
  • smaller and fewer build outputs
  • TO WORK ON THE APP!
    • NOT THE TOOLS!!!

FULL DISCLOSURE

I DON'T KNOW EVERYTHING

Modules @ Browser

• Require.js
  • AMD, Older, Messy Setup
• Browserify
  • CommonJS, Popular
• Webpack
  • Many module types, harder to use, Popular
• System.js
  • Many module types
• Brunch
  • CommonJS, plugins
• Rollup
  • Newer, Tree Shaking

Build

• Grunt
  • Tasks, Seems in decline, older, slower, verbose configuration
• Gulp
  • Tasks, Streaming, meteoric popularity rise
• Brunch
  • Declarative config, fast incremental builds. App skeletons

• Broccoli

  • Asset pipeline, fast increment builds, not popular

Transpile

• CoffeeScript
  • Not JS, Older, ruby influenced, declining
• TypeScript
  • Type safety, JS superset, type def files, JSX
• Babel
  • JS! Modular, JSX, Readable output
• Traceur
  • JS! Requires runtime
• LiveScript
  • Descended from CoffeeScript
• Elm
  • Holistic, functional

Package Management

• NPM
  • You must be using this! Rising in popularity for non-node packages
• Bower
  • Focused on front-end. In decline
• jspm
  • NPM and Github as registries. Tied @ hip to system.js
• Jam
  • ... .. eh. who cares...

JUST

Make Something

Brunch

• NPM Friendly
• Module Wrapping
• CLI
• Compile Steps
• Plugins
• Watches File System
• Incremental Builds
• Source Mapping
• Production Builds
• Concats/Minifies
• Images/CSS/JS/Static Assets

http://brunch.io