Responsive Apps Made Easy with Grunt

Jagvinder Singh Reehal - @jagreehal

NOT another Grunt talk!

This will be different (hopefully).

Not many slides!

Lots of demos!

WHEN JAG ❤ GRUNT

July 2013 I started a new contract

They used LESS and CoffeeScript

compiled using Eclipse

or was it Maven

IT DIDN't WORK ON MY MACHINE

I needed a hero!

IT'S THE 'JAVASCRIPT TASK RUNNER'

  • Windows, Linux, and OSX
  • Install Node.js
  • Install the Grunt CLI (globally)

e.g. npm install -g grunt-cli

It's all about tasks!

grunt-tasks-demo

So how do I create a plugin?

Lets build a responsive app mobile first with grunt

Responsive Apps must Perform!

#PerfMatters

  • +100ms = -1% Amazon Sales
  • +500ms = -20% Google traffic & ad revenues
  • Facebook delayed scroll performance and saw 1% drop in engagement
  • +160k on a page = +12% Etsy bounce rate on mobile

#PerfMatters

  • Users expect a site to load in 2 seconds
  • After 3 seconds 40% will leave
  • 44% tell a friend about their poor experience
  • Over 56% shoppers go to competitor if site is slow

Still not convinced? Search for #perfmatters

#PerfMatters

Grunt to the rescue

Images are a nightmare and the biggest web perf killer!

  • Compression
  • Image sizes
  • Sprite creation
  • Retina displays

The problem - icons

  • A browser can/will only make X number of requests for a domain
  • So if the limit is five and you have six images, one will be blocked
  • Could solve using something like domain sharding
  • Or...

grunt-spritesmith

  • grunt-spritesmith
  • Single request for all images
  • Makes creating and adding sprites easy
  • Retina displays can make things difficult

grunt-image-embed

  • grunt-image-embed
  • Converts images to base-64 encoded data URI strings
  • Zero images so no requests!
  • Gets around mobile network compression
  • Performance not always what you expect

grunticon

  • grunticon
  • SVG images with fallbacks for PNG sprites, then individual images
  • Use JavaScript to decide what resource to use
  • Retina displays ❤ SVG
  • Could cause FOUC

The problem - IMAGES

  • Downloading an image that is bigger than the screen is waste!
  • Good times - the problem has been identified
  • picture element and/or srcset
  • Bad times - no native solution yet

grunt-responsive-images

The perfect picture

Compression

Think Above the fold!

  • What does the user need to see?
  • Lazy load images?
  • Load scripts when required? E.g. Google maps

Only you know YOUR content!

  • Use UX research
  • Use analytics

Don't guess!

Grunt can give you performance stats after every build!

SO RESPOSNSIVE DESIGN WITH GRUNT IS

Grunt Tips

Grunt Optimisation

Grunt Organisation

  • Split Gruntfile into modules
  • Use config files
  • Organise config alphabetically
  • Use JavaScript

What about Yeoman etc?

  • Break it apart
  • Take what you need
  • Build your own!

You MUST remain in control!

(because Grunt is so 2013)

WHAT'S DIFFERENT

Streams - no more temp files between tasks!

Code not config

Watch built in

Concurrent by default

grunt-gulp-comparison

IS GRUNT GOING TO DIE?

No

WHICH IS FASTER?

Gulp

But difference is not 'significant'

What are my options?

Gulp plugin quality?

Questions?

@JagReehal