Unleashing the Rails Asset
Pipeline
In, and out of Rails, Sprockets brings sanity to
your static assets.
Monday 01 July 13
kennethkalmer
Kenneth Kalmer
Chief Rocket Scientist @ ValuationUP.com
@kennethkalmer
github/kennethkalmer
www.opensourcery...
How did I get here?
Been doing web development circa 1997
Remember when PHP3 was launched
Updated Netscape from PC Format ...
ValuationUP.com
Help entrepreneurs make REAL sense of their
management accounts
Comparative analysis within industry
Refac...
Monday 01 July 13
Monday 01 July 13
Monday 01 July 13
Monday 01 July 13
Introducing Sprockets
Created by Sam Stephenson of 37Signals fame
The backbone of the Rails Asset Pipeline
 sstephenson/s...
“Sprockets is a Ruby library for compiling and serving
web assets. It features declarative dependency
management for JavaS...
Provides a load path
Allows you to separate your assets own assets from
third-party assets
Gives you logical paths to your...
1 environment = Sprockets::Environment.new
2 environment.append_path 'app/assets/javascripts'
3 environment.append_path 'l...
Asset paths
Plenty of clearly defined files, doing
one thing and one thing well
Namespacing possible
Isolate manifests away
...
Directives
Helps declare and include dependencies
Keeps things in check
Allows you to break up your JavaScript & CSS into ...
Directives
require / include
require_directory
require_tree
require_self
depend_on
stub
Monday 01 July 13
1 // Manifest for the demo page page (apps/demo_dashboard.js)
2 //
3 //= require helpers/d3_loader
4 //= require demo/dash...
Engines
Engines process source files written in another
language, back to JavaScript or CSS
Leverages the Tilt gem to suppo...
Chaining engines together
1 // test.css.scss.erb
2
3 body {
4 h1 {
5 color: <%= PATENTED_SHADE_OF_BLUE %>;
6 line-height: ...
Minification / Obfuscation
Uglifier
YUI Compressor
Closure Compiler
Out the box, just install the gems that wrap up the tool...
Production happiness
Embeds the SHA of the file in the filename:
application-2eb682a29.js
Create .gz versions for even faste...
Engines enable you to:
Monday 01 July 13
Leverage SASS/SCSS
Program your stylesheets
Use $variables in your stylesheets
Use Compass CSS framework
Use great mixins ...
Leverage Handlebars
Precompile your templates during deployments
Ship only handlebars.runtime.js to the clients
Even build...
Share
Easily package up libraries as gems to distribute
Stand on the shoulders of others who’ve shared
Monday 01 July 13
Future proof
Since 2.10, support for bower.json
commonjs-sprockets plugin
Monday 01 July 13
Oh, remember sass-rails
Gives us all the mixins we use daily:
image-url()
asset-url()
Monday 01 July 13
In real life
Monday 01 July 13
The stack (relative)
CoffeeScript
Backbone, Underscore, d3.js
Handlebars
HAML & SCSS
Ruby on Rails & Ruby 2.0
Cucumber, RS...
The numbers
Files
Source
LOC
Specs
LOC
Features
Ruby 648 ~4800 7352 3734
Coffee
Script
350 9200 4852 -
SCSS 78 1094 - -
Mon...
Development mode
Monday 01 July 13
Production
Monday 01 July 13
Deployment
Conditional asset compilation - use a git diff during
deployment to determine whether assets changed
Asset comp...
Derailing it
Do you Ruby?
 http://rubyinstaller.org/
*NIX get rbenv / rvm
$ gem install sprockets
Monday 01 July 13
CLI access
$ sprockets --help
Usage: sprockets [options] filename [filename ...]
-r, --require LIBRARY Require the LIBRARY b...
Rakefile
1 require 'sprockets'
2 require 'rake/sprocketstask'
3
4 environment = Sprockets::Environment.new
5 environment.ap...
rake-pipeline
Alternative, built by Yehuda Katz
Used by LivingSocial
Follows a similar pipeline pattern for processing sta...
Thanks!
Go take control of your static assets!
Monday 01 July 13
Upcoming SlideShare
Loading in …5
×

Unleashing the Rails Asset Pipeline

1,843 views

Published on

In, and outside of Rails, Sprockets brings sanity to your static assets

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,843
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Unleashing the Rails Asset Pipeline

  1. 1. Unleashing the Rails Asset Pipeline In, and out of Rails, Sprockets brings sanity to your static assets. Monday 01 July 13
  2. 2. kennethkalmer Kenneth Kalmer Chief Rocket Scientist @ ValuationUP.com @kennethkalmer github/kennethkalmer www.opensourcery.co.za Monday 01 July 13
  3. 3. How did I get here? Been doing web development circa 1997 Remember when PHP3 was launched Updated Netscape from PC Format discs Spent time in the entire stack over the years Yes, the entire stack Monday 01 July 13
  4. 4. ValuationUP.com Help entrepreneurs make REAL sense of their management accounts Comparative analysis within industry Refactoring financials by getting from red to green Take actions to increase their valuations Valuation is the ultimate metric Monday 01 July 13
  5. 5. Monday 01 July 13
  6. 6. Monday 01 July 13
  7. 7. Monday 01 July 13
  8. 8. Monday 01 July 13
  9. 9. Introducing Sprockets Created by Sam Stephenson of 37Signals fame The backbone of the Rails Asset Pipeline  sstephenson/sprockets Monday 01 July 13
  10. 10. “Sprockets is a Ruby library for compiling and serving web assets. It features declarative dependency management for JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows you to write Monday 01 July 13
  11. 11. Provides a load path Allows you to separate your assets own assets from third-party assets Gives you logical paths to your assets Leverages the Hike gem Monday 01 July 13
  12. 12. 1 environment = Sprockets::Environment.new 2 environment.append_path 'app/assets/javascripts' 3 environment.append_path 'lib/assets/javascripts' 4 environment.append_path 'vendor/assets/jquery' Example load path Monday 01 July 13
  13. 13. Asset paths Plenty of clearly defined files, doing one thing and one thing well Namespacing possible Isolate manifests away 5 ▾ javascripts/ 6 ▸ admin/ 7 ▸ advisories/ 8 ▾ apps/ 13 business_dashboard.js 14 business_list.js 15 business_status.js 16 change_industry.js 17 credit_score.js 18 dashboard_access.js 19 demo_dashboard.js 22 network.js 23 new_statement.js 24 participate.js 25 scenario_chart.js 26 survey_results.js 27 sustainable_growth_rate.js 28 wacc.js 30 ▸ business/ 31 ▸ collections/ 32 ▸ dashboard/ 33 ▸ decorators/ 34 ▾ demo/ 35 dashboard.js.coffee 36 dashboard_layout.js.coffee 37 models.js.coffee 38 ▸ factories/ 39 ▸ helpers/ 40 ▸ layouts/ 41 ▸ models/ 42 ▸ reports/ 43 ▸ valuations/ 44 ▸ views/ 45 application.js 46 frontend.js.coffee 47 industries.js.coffee 50 participate.js.coffee 51 sessions.js.coffee 52 setup.js.coffee 53 share.js.coffee 54 tabs.js.coffee 55 test_overrides.js.coffee 56 users.js.coffee 57 valuationup.js.coffee Monday 01 July 13
  14. 14. Directives Helps declare and include dependencies Keeps things in check Allows you to break up your JavaScript & CSS into tiny units Monday 01 July 13
  15. 15. Directives require / include require_directory require_tree require_self depend_on stub Monday 01 July 13
  16. 16. 1 // Manifest for the demo page page (apps/demo_dashboard.js) 2 // 3 //= require helpers/d3_loader 4 //= require demo/dashboard 1 #= require backbone.localStorage 2 #= require demo/models 3 #= require demo/dashboard_layout 4 # 5 #= require business/dashboard 3 # 4 #= require models/business 5 #= require models/statements Monday 01 July 13
  17. 17. Engines Engines process source files written in another language, back to JavaScript or CSS Leverages the Tilt gem to support a lot different templating languages and preprocessors like CoffeeScript, HAML & SASS Easily create a new engine with custom functionality Monday 01 July 13
  18. 18. Chaining engines together 1 // test.css.scss.erb 2 3 body { 4 h1 { 5 color: <%= PATENTED_SHADE_OF_BLUE %>; 6 line-height: $headerLineHeight; 7 } 8 } Processed in order by ERB and then SASS, reverse order of the file extensions Monday 01 July 13
  19. 19. Minification / Obfuscation Uglifier YUI Compressor Closure Compiler Out the box, just install the gems that wrap up the tools Monday 01 July 13
  20. 20. Production happiness Embeds the SHA of the file in the filename: application-2eb682a29.js Create .gz versions for even faster delivery CDN and multi-server friendly Monday 01 July 13
  21. 21. Engines enable you to: Monday 01 July 13
  22. 22. Leverage SASS/SCSS Program your stylesheets Use $variables in your stylesheets Use Compass CSS framework Use great mixins like Bourbon.io and Bourbon Neat Cherry-pick your favorite Bootstrap styles Monday 01 July 13
  23. 23. Leverage Handlebars Precompile your templates during deployments Ship only handlebars.runtime.js to the clients Even build your Handlebars templates using HAML Monday 01 July 13
  24. 24. Share Easily package up libraries as gems to distribute Stand on the shoulders of others who’ve shared Monday 01 July 13
  25. 25. Future proof Since 2.10, support for bower.json commonjs-sprockets plugin Monday 01 July 13
  26. 26. Oh, remember sass-rails Gives us all the mixins we use daily: image-url() asset-url() Monday 01 July 13
  27. 27. In real life Monday 01 July 13
  28. 28. The stack (relative) CoffeeScript Backbone, Underscore, d3.js Handlebars HAML & SCSS Ruby on Rails & Ruby 2.0 Cucumber, RSpec & Jasmine V8 Monday 01 July 13
  29. 29. The numbers Files Source LOC Specs LOC Features Ruby 648 ~4800 7352 3734 Coffee Script 350 9200 4852 - SCSS 78 1094 - - Monday 01 July 13
  30. 30. Development mode Monday 01 July 13
  31. 31. Production Monday 01 July 13
  32. 32. Deployment Conditional asset compilation - use a git diff during deployment to determine whether assets changed Asset compilation takes 5 mins Compiled on the deploying machine, rsync to server CloudFront to keep things snappy Monday 01 July 13
  33. 33. Derailing it Do you Ruby?  http://rubyinstaller.org/ *NIX get rbenv / rvm $ gem install sprockets Monday 01 July 13
  34. 34. CLI access $ sprockets --help Usage: sprockets [options] filename [filename ...] -r, --require LIBRARY Require the LIBRARY before doing anything -I, --include=DIRECTORY Adds the directory to the Sprockets load path -o, --output=DIRECTORY Copy provided assets into DIRECTORY --noenv Disables .sprocketsrc file -h, --help Shows this help message -v, --version Shows version Monday 01 July 13
  35. 35. Rakefile 1 require 'sprockets' 2 require 'rake/sprocketstask' 3 4 environment = Sprockets::Environment.new 5 environment.append_path "assets/javascripts" 6 environment.append_path "assets/stylessheets" 7 8 Rake::SprocketsTask.new do |t| 9 t.environment = environment 10 t.output = "./public/assets" 11 t.assets = %w( application.js application.css ) 12 end Monday 01 July 13
  36. 36. rake-pipeline Alternative, built by Yehuda Katz Used by LivingSocial Follows a similar pipeline pattern for processing static assets  livingsocial/rake-pipeline Monday 01 July 13
  37. 37. Thanks! Go take control of your static assets! Monday 01 July 13

×