rails asset pipeline - what, why, tips, dos and donts
TRANSCRIPT
![Page 1: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/1.jpg)
Rails Asset Pipeline
KiproshMay 2015
![Page 2: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/2.jpg)
Jugaad ?
![Page 3: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/3.jpg)
Jugaad ?
![Page 4: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/4.jpg)
Jugaad ?
![Page 5: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/5.jpg)
Jugaad ?
![Page 6: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/6.jpg)
And the outcome ?
![Page 7: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/7.jpg)
Jugaad is Frugal engineering
![Page 8: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/8.jpg)
What are static assets in an app
Stylesheets (css)
Javascript (js)
Images (png, jpg, ico,…..)
![Page 9: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/9.jpg)
Why Asset Pipeline?
![Page 10: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/10.jpg)
Lets inspect few websites Network Tab
Lets also inspect
realvolve.com
Kiprosh.com
One of the “best website“ winner in 2014 – any.do
![Page 11: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/11.jpg)
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. ***
![Page 12: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/12.jpg)
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.
![Page 13: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/13.jpg)
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
![Page 14: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/14.jpg)
Asset Pipeline..comes to help
..and solves all the problems we discussed
![Page 15: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/15.jpg)
Asset Pipeline
![Page 16: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/16.jpg)
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
![Page 17: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/17.jpg)
• Where will Fonts, Audios and Videos go ?in app/assets/
• Where will third-party code go?in /vendor/assets/
![Page 18: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/18.jpg)
Tips
• Two options – Precompile or include
Lets sayapp/assets/stylesheets/site.css.scss
either// = require_self// = require ‘site’
orconfig.assets.precompile += (site.css)
![Page 19: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/19.jpg)
Tips
• File extensions matter in the precompile directive
Common mistake
config.assets.precompile += %w( site.css )config.assets.precompile += (site)
![Page 20: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/20.jpg)
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
![Page 21: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/21.jpg)
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.
![Page 22: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/22.jpg)
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
![Page 23: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/23.jpg)
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
![Page 24: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/24.jpg)
Tips
• require
• require_tree
• require_directory
• config.assets.paths << File.join(Rails.root, '/my/special/path’)
![Page 25: Rails Asset Pipeline - What, Why, Tips, Dos and Donts](https://reader034.vdocuments.net/reader034/viewer/2022051523/588122141a28abb9388b721d/html5/thumbnails/25.jpg)
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