Task Runners

Task runners are programmable scripts that automate development processes

Front-end development best practice

  1. Faster page load
  2. Cross-device support
  3. Multiple pages with consistent features e.g. navigation
  4. Testing

Faster page load – more mobile users means less network speed

  • Minify HTML, CSS, JavaScript
  • Manage page size

Cross-device support

  • Bootstrap
  • jQuery
  • Plugins etc.

Testing

  • BrowserStack
  • Litmus

Let’s break these down into tasks that we perform as developers

Processes

Cross-device and feature support

  1. Setup project directory and sub-directories
  2. Find download URL for file version
  3. Add file to project
  4. Add file dependencies
  5. To update or change any file version repeat steps 2 – 4

Faster page load

  1. Compress HTML, CSS, JavaScript, images and other assets
  2. Minimize file downloads by concatenating files i.e. send all CSS in one CSS file

Multiple pages

  1. Write feature once and include it where it is needed

Testing

Browserstack

  1. Upload images and files to external FTP location
  2. Access URL with Browserstack

Litmus

  1. Inline-CSS
  2. Upload images to external FTP location
  3. Update images with FTP location URL
  4. Generate email
  5. Send to Litmus

The case for automation

  1. Use reliable automation to achieve consistent quality workflows
  2. Workflows can be shared and customised
  3. Benefit from the works of others

We can accomplish the same tasks using task runners

  1. Scaffold with Yeoman.io
  2. Build with Grunt or Gulp
  3. Manage dependencies with Bower

Cross-device and feature support

  1. Install Yeoman.io (once)
  2. Use Yeoman template appropriate to project
  3. Use Bower to manage project dependencies

Faster page load

  1. Use SASS or LESS for CSS so files can be imported into one main file
  2. Install gulp
  3. Define gulp task
  4. Run gulp task

Multiple pages

  1. Run gulp task

Testing

  1. Run gulp task especially for unit and end-to-end tests

Case study

Email testing

The process for testing emails is well defined business process and so allows us to make some basic, time-based comparisons.

Approximate time comparison for manual vs. automated approach in seconds

Steps Manual (seconds) Automated (seconds)
Upload images to publicly accessible location 60
Replace image links in email 20
Generate email and send to Litmus 210
Total time 290 18

 

An automated process shows a 16x time improvement and so can be scaled to include additional requirements.

Examples of task runners

  • Static site generators – Middleman, Harp, Hugo
  • HTML5 web apps – Ionic, Reapp, Angular
  • Online web applications scaffolding – Yeoman.io, Play framework

Bibliography

Next steps

Automating language translations

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s