Tooling & The Webapp Development Stack

more productivity and less stress
with a robust front-end toolchain

Paul Irish. 2012.

You can navigate with and .

Also space gives an exposé mode (that might be quite slow).

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:

Boilerplate

Various Boilerplates...

The Webapp Lifecycle:

Authoring Abstractions

Styling

Markup

Scripting

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

Basics


# 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

Linting

Testing

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.