rails asset pipeline - what, why, tips, dos and donts

Rails Asset Pipeline

KiproshMay 2015

Jugaad ?

Jugaad ?

Jugaad ?

Jugaad ?

And the outcome ?

Jugaad is Frugal engineering

What are static assets in an app

Stylesheets (css)

Javascript (js)

Images (png, jpg, ico,…..)

Why Asset Pipeline?

Lets inspect few websites Network Tab

Lets also inspect

realvolve.com

Kiprosh.com

One of the “best website“ winner in 2014 – any.do

Problems

• High number of http calls

• Raw JavaScript and CSS files wastes lot of bandwidth

• High data transfer rate

• Browser Caching ***

• Coffee script, SASS, Less, Erb etc. ***

Problems

• Browser “Caching”

Serve a javascript file from your server browser will automatically cache that file for a period of time.

This improves page load time browser is so nice

But asset changes at a later point in time browser won’t know about it

Now that’s the problem browser will continue to use the cached asset until its cache life has expired.

Problems

• Coffee script, SASS, Less, Erb

Coffeescript, Sass, Less, and Erb have made it easier to organize and write Javascript and CSS

But browser can’t interpret them directly

So a pre-processor is needed to convert those files into their appropriate counterparts before they are sent off to the browser

Asset Pipeline..comes to help

..and solves all the problems we discussed

Asset Pipeline

Asset Pipeline

• Compile multiple assets into one

• Minify and compress assets

• Provide digesting / fingerprinting of assets to avoid caching issues

• Pre-process alternative languages and turn them into JavaScript and CSS

• Where will Fonts, Audios and Videos go ?in app/assets/

• Where will third-party code go?in /vendor/assets/

Tips

• Two options – Precompile or include

Lets sayapp/assets/stylesheets/site.css.scss

either// = require_self// = require ‘site’

orconfig.assets.precompile += (site.css)

Tips

• File extensions matter in the precompile directive

Common mistake

config.assets.precompile += %w( site.css )config.assets.precompile += (site)

Tips

• Common myth - Asset pipeline is your “assets” folder

No that’s wrong.The asset pipeline is not quite your assets folder

Either specify in precompile directiveconfig.assets.precompileor require it from your application.css

Tips

• Don’t fall back in staging or production

config.assets.compile = trueorconfig.assets.compile = false

This is again a very very common mistake. Never ever set this to true in production mode.

Why don't you just have this set to "true" in every environment?

Well, because it is slow. And you don't want slow in production.

Information

Asset pipeline is no longer a core feature in Rails 4

• Its extracted as sprockets-rails gem

• Asset pipeline is enabled by default

• You can disable the asset pipeline

rails new appname --skip-sprockets

Tips

• Semicolons matter in JavaScript

Asset compilation might result into broken application.js because of a missing semicolon

• Use helpers

image_url, image_path, asset_path

Tips

• require

• require_tree

• require_directory

• config.assets.paths << File.join(Rails.root, '/my/special/path’)

References

• Rails guideshttp://guides.rubyonrails.org/asset_pipeline.html

• Reinteractive bloghttps://www.reinteractive.net/posts/116-12-tips-for-the-rails-asset-pipeline

• Tea Leaf Academy bloghttp://www.gotealeaf.com/blog/rails-asset-pipeline-best-practices