frontend dev @ Four Kitchens

twitter.com/rupl

github.com/rupl

I contribute to open source stuff:

• Modernizr Drupal module
• Modernizr
• jekyll-schedule
• Drupal 8 HTML5 Initative
• Drupal 8 Mobile Initiative

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.

workflow_alter()

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

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

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.

PhantomJS

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

SlimerJS

(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 http://example.com/ > 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 http://fourkitchens.com | yslow --info grade --format plain

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.

grunt-pagespeed

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

Phantomas

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 http://example.com

# set viewport dimensions, generate images of rendering process
$ phantomas --url http://example.com --viewport=320x480 --film-strip

# assert a test for total number of requests
$ phantomas --url http://example.com --assert-requests=20

grunt-phantomas

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

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

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
$ ./install.sh
$ cd wraith
$ rake # runs their example against bbc.co.uk
$ 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

..or you can automate the hunt!

# examples/prerender
$ ruby report.rb login@gmail.com password UA-XXXXXX-Y

QA and Testing

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

Services like BrowserStack.com make testing much simpler.

Automating Tasks with CI

The Basics

Everything outlined in this section requires two key ingredients:

• Continuous integration (CI)
• Git hooks

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