Frontend Ops

Or: How to Automate the Process of Breaking Things

Differences from DevOps

None: if you're familiar with DevOps, this is not new.

However, since frontend is a different game than backend, its operational needs are slightly different.

Often, a PHP error results in a 500 or
blank page. You either get HTML or not.

(or you can at least use XHProf)

There are untold number of subtle
errors that can occur on the frontend.

  • Minor CSS changes that throw things off
  • Changes to JS files that break things
  • Aggregates changing when not necessary
  • Performance regressions

Additionally, frontend development is
becoming more critical as the trade matures.

We need the same workflow tools
that the backend has had for years.

  • Dependency management
  • Builds and deployment
  • Automated testing
  • Automated review
  • Accountability for code changes

Frontend Ops

a detailed description

Alex Sexton wrote an article for Smashing Mag
describing the ideal frontend ops engineer.

Most people are using Drupal to build websites instead of webapps, so this presentation will cover useful tasks for website development.


In order to deliver the best, fastest site possible, we have to change our development processes.

Performance is not a checklist, it's a
continuous process.
Ilya Grigorik

…don’t take measures without measuring them.
Maximiliano Firtman


The slides AND code are on GitHub, I will tweet the link, and it's already available on the session page of the DrupalCon site. Yes, you may take code from the slides and use it for any purpose :)

This presentation is using a fresh clone of these slides, using the many examples I provided in the repo.

Automating Workflow

Stop doing manual labor

We all have to do repetitive tasks. Let's take the pain out of the process and focus on our actual work.

Automation helps us stay consistent.

Automation Tools


Grunt is a "JavaScript task runner"

It does grunt work for you.

Read about Grunt.js and get the code.

Basics of Grunt

Grunt has a thriving community that offers
plugins just like Drupal modules.

They have excellent intro instructions,
and these slides contain several examples too.


Headless instance of WebKit

Phantom does everything a webkit browser can do, except there's no monitor. It CAN produce visual pages on command.

It's an indispensible tool for automating tasks that require loading up a web page and doing something (screenshots, window resizes, clicking things, etc)

PhantomJS docs


(not yet) headless instance of Gecko

SlimerJS is a newer project than Phantom, but it aims to offer the same features to Firefox browser/OS users.

SlimerJS docs

CSS/JS authoring

The meat 'n' potatoes of frontend.

JSHint + Grunt

JSHint is a code quality tool. It can help you debug JS and catch any little mistakes you might make.

It can also do lots of nice things like tell you when you have unused variables.

However, the web UI can be a pain to use, with lots of copy/paste involved. It's much nicer to run JSHint automatically after every file save.

# examples/grunt/jshint
$ npm install

# usage
$ grunt watch

# show all errors without stopping
$ grunt watch --force

Then just save your files like normal :)

Other examples of grunt watch

Check out the DrupalCamp Austin repo that includes a pretty comprehensive gruntfile with some docs.

  • JSHint
  • uglifyjs
  • script concatenation
  • image minification
  • Compass
  • LiveReload
  • jekyll-build
  • dev/prod build modes

Performance Testing

Automating YSlow

YSlow is a service that grades frontend performance based on many tried and true facets. Developed at Yahoo! when they were the kings of perf.

It delivers A-F on the various tests, but historically required the user to visit each page in a browser.

# capture a HAR file from the CLI
$ phantomjs examples/netsniff.js > ex.har

# install/run YSlow on the waterfall (node.js)
$ npm install yslow -g
$ yslow --info basic --format plain ex.har

# Full grade report of FK website, all in one line
$ phantomjs examples/netsniff.js | yslow --info grade --format plain
Original code compliments of Ilya Grigorik
YSlow also has a phantomjs package

Automating PageSpeed

Not to be outdone by Yahoo, Google has a
competing service called PageSpeed Insights.

It can also be automated, by getting an API key.

Or signing up for PageSpeed service.


PageSpeed API is documented quite
thoroughly, but there's also a grunt plugin.

# examples/grunt/pagespeed
$ npm install
$ grunt # runs default task
$ grunt pagespeed:mobile # runs mobile task

View code on GitHub


Phantomas is a PhantomJS-based
web performance metrics tool

It gives you loads of data about how the
frontend of your website is performing.

The usage guide is extensive.

# install via npm
$ npm install -g phantomas

# run a basic report
$ phantomas --url

# set viewport dimensions, generate images of rendering process
$ phantomas --url --viewport=320x480 --film-strip

# assert a test for total number of requests
$ phantomas --url --assert-requests=20


The grunt plugin is not just
a wrapper for running the tool.

It makes reporting trends easier
with charts that update each
time you run the grunt task

# examples/grunt/phantomas
$ npm install

# run report
$ grunt phantomas:default

# run report and generate screenshot
$ grunt phantomas:screenshot

# test for certain values. this might cause failure!
$ grunt phantomas:requests

View code on GitHub

CSS Regression testing

CSS regressions? say it ain't so!

Having no scope at all, CSS is the easiest thing to nudge out of place. It's easier to prevent than you think.


Wraith uses either Phantom or Slimer (your choice) to take screenshots of two environments, producing a visual diff of the two screenshots!

Basic usage of Wraith

# examples/wraith
$ ./
$ cd wraith
$ rake # runs their example against
$ open shots/gallery.html # view results in the browser

Multiple tests

Wraith handles one comparison per config file.

However, it has support for multiple configs, so several config files in one repo allows for multiple comparisons.

$ cd /path/to/wraith/configs
$ rake config[homepage]
$ rake config[dashboard]

Setting up prerender

Prerender is relatively new, and lets you
pre-load whole pages before a user clicks.

Since it's a heavy-handed but super-useful optimization, you MUST make sure it is only used in situations where it's absolutely appropriate.

Google Analytics — Audience » Visitors Flow

Screenshot of Google Analytics diagram for Visitor Flow.

..or you can automate the hunt!

# examples/prerender
$ ruby report.rb password UA-XXXXXX-Y
Original code compliments of Ilya Grigorik

QA and Testing

Testing in loads of browsers is a
necessary but tedious task.

Services like
make testing much simpler.

visit to automatically test in over 300 browsers.

Automating Tasks with CI

The Basics

Everything outlined in this section
requires two key ingredients:

Four Kitchens uses Jenkins and GitHub WebHooks
in our workflow, and you can use whatever you wish.

Trigger Jenkins builds
by pushing to GitHub

An oldie but goodie: check out our how-to from 2011

  1. You push to GitHub master branch (or merge PR)
  2. GitHub sends a message to your CI server
  3. "Yo Jenkins, the repository was updated!"
  4. CI server pulls the new code to your staging area

Although fairly mundane in terms of CI, the blog post illustrates the basic concepts underlying all of the tasks involving Jenkins.

Further reading

If you really dug these slides...

Read about Frontend Testing!


Contact me:

hire me for frontend performance consulting

chris.ruppel ❀