rails asset pipeline - what, why, tips, dos and donts
TRANSCRIPT
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