Paul Irish

Making the www great

Talk: Tooling & the Webapp Development Stack

One of the things I recognize at Google is how productive developers surround themselves with powerful tools for iterative development and debugging. For us front-end developers, the ecosystem of tools has exploded in the past two years, as we have a lot more software and libraries beyond Firebug and jQuery to help us build webapps. In the talk below I walk through the current ecosystem of tools and how they can make your development experience a more enjoyable one.

My slides:

Because there are so many tools around, I wanted to break them down somehow. I think contextualizing the tools as to what phase of development that assist with works well:

(You could think of the Y-axis here as the amount of code in a project..)

Looking at our tools this way we end up with:

  • Boilerplate
    • You likely start a project with more than a single blank text file.
  • Authoring Abstractions
    • CSS preprocessors, Languages that transpile to JS, Templating
  • Frameworks and Application Stack
    • Clientside MVC, UI Components, Widgets
  • Iteration Workflow
    • Browser Devtools, Browser/Unit/Integration Testing
  • Performance Tuning
    • Profiling, Memory mgmt, browser instrumentation
  • Build & Optimization
    • Minifiers, Concat, Image compression…
  • Deploy
    • Continuous Integration, Continuous deployment

I’ve been thinking a lot about workflow and integrating these tools together. Screencasts like Andrey Tarantsov’s Sublime Text Workflow really excite me and I’m eager to see more people exploring a robust development setup.

2012.05.16: Mr Jon Kemp wrote up an outline of my talk with all the links, for easy clickability: