Webapp Development Stack & Tooling

Productivity++ && Stress--
with a robust front-end toolchain

jQuery UK, Feb 10th

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.

History of Frontend Tooling

It starts with HTML5...

What is Frontend Tooling?

A programming tool or software development tool is a program or application that software developers use to create, debug, maintain, or otherwise support other programs and applications.

Optional software that assists in development of webapps.

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 require sprockets jQuery Mobile Sencha jQuery UI Sproutcore Selenium Jenkins QUnit Jasmine jstestdriver

The Webapp Lifecycle

Tooling contextualized

The Webapp Lifecycle:


Various Boilerplates...

The Webapp Lifecycle:

Authoring Abstractions




The Webapp Lifecycle:

Frameworks, Clientside Stack, Application Architecture

Looking back a few years...

your tools need to support your stack

The Webapp Lifecycle:

Iteration Workflow


# usage:
# $ chrome index.html
function chrome() {
    open $@ --args --allow-file-access-from-files

# usage:
# $ server
alias server='open http://localhost:8000 && python -m SimpleHTTPServer'


Iteration Automators

Editors and IDEs

Browser Dev Tools



visual, css regression, js unit, js integration

Linting / Testing in context

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

Tools do the work for us

Automating the automators

... and Deployment

  • Jenkins and Travis for CI
  • VCS Hooks
  • mod_pagespeed

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

In conclusion...

Web development is a bumpy road.

These tools give your development vehicle neccessary suspension.

and more fun.


thank you.