I gave this presentation on 22-May-2015 @ Kiprosh office. Also took a hands on session to detect and fix asset issues in a sample Rails 4 application.

1. Rails Asset Pipeline
Kiprosh
May 2015

2. Jugaad ?

3. Jugaad ?

4. Jugaad ?

5. Jugaad ?

6. And the outcome ?

7. Jugaad is Frugal engineering

8. What are static assets in an app
Stylesheets (css)
Javascript (js)
Images (png, jpg, ico,…..)

9. Why Asset Pipeline?

10. Lets inspect few websites
Network Tab
Lets also inspect
realvolve.com
Kiprosh.com
One of the “best website“
winner in 2014 – any.do

11. 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. ***

12. 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.

13. 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

14. Asset Pipeline
..comes to help
..and solves all the problems we discussed

15. Asset Pipeline

16. 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

17. • Where will Fonts, Audios and Videos go ?
in app/assets/
• Where will third-party code go?
in /vendor/assets/

18. Tips
• Two options – Precompile or include
Lets say
app/assets/stylesheets/site.css.scss
either
// = require_self
// = require ‘site’
or
config.assets.precompile += (site.css)

19. Tips
• File extensions matter in the precompile
directive
Common mistake
config.assets.precompile += %w( site.css )
config.assets.precompile += (site)

20. 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 directive
config.assets.precompile
or
require it from your application.css

21. Tips
• Don’t fall back in staging or production
config.assets.compile = true
or
config.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.

22. 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

23. 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

24. Tips
• require
• require_tree
• require_directory
• config.assets.paths << File.join(Rails.root,
'/my/special/path’)

25. References
• Rails guides
http://guides.rubyonrails.org/asset_pipeline.html
• Reinteractive blog
https://www.reinteractive.net/posts/116-12-tips-for-the-rails-asset-pipeline
• Tea Leaf Academy blog
http://www.gotealeaf.com/blog/rails-asset-pipeline-best-practices