JavaScript Tooling

JSConf. April 2nd. Paul Irish.

You can navigate with and .

Also space gives an exposé mode that might break your browser.

The goal

We want rich web apps, that act responsively and present compelling experiences.

The problem

Development takes time. Lots of time focused on common tasks rather than building unique experiences.

No developer wants to be spinning their wheels, or operating on mundane tasks when they could instead be creating rich and compelling experiences.

Smart developers work with smart tools, effective workflows, and wise strategies for development.

The Ecosystem

sass compass less stylus markdown haml jade coffeescript Ant make rake cake bash Image compression tools Minification & concat tooling JSHint JSLint codekit livereload web-build handlebars mustache zen coding selenium browserstack mogotest CanJS require sprockets jQuery Mobile Sencha Ember Selenium Jenkins QUnit Jasmine jstestdriver plovr Jison Esprima Escoma

The Webapp Lifecycle

Tooling contextualized

The Webapp Lifecycle:

Authoring Abstractions




The Webapp Lifecycle:

Iteration Workflow

Browser Dev Tools

Source Maps


Linting / Testing in context

ECMAScript Tooling


visual, css regression, js unit, js integration

The Webapp Lifecycle:

Build + Optimization

So many best practices...

combine and minify css and js inline @imports inline small images as data-uri remove console.log remove unused CSS cache manifest creation asset revving dead code elimination image compression video/audio transcoding

Automating the tools

... and Deployment

  • Jenkins, Travis for CI
  • Continuous deployment
  • Aggregated clientside error reporting

  • Deployment is an art. And the style in which you deploy impacts your company culture more than you think. Deploy with style

Future Tooling

In conclusion...

Web app development is a bumpy road.

These tools give your development vehicle neccessary suspension.

Embrace dependencies.


thank you.