The document discusses the Sprockets asset pipeline library. It introduces Sprockets as a Ruby library created by Sam Stephenson that brings structure to static assets. It then discusses key Sprockets features like providing a load path for assets, using directives to declare dependencies between assets, processing assets with engines like CoffeeScript and Sass, and optimizing assets for production with minification.

1. Unleashing the Rails Asset
Pipeline
In, and out of Rails, Sprockets brings sanity to
your static assets.
Monday 01 July 13

2. kennethkalmer
Kenneth Kalmer
Chief Rocket Scientist @ ValuationUP.com
@kennethkalmer
github/kennethkalmer
www.opensourcery.co.za
Monday 01 July 13

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. 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. Monday 01 July 13

6. Monday 01 July 13

7. Monday 01 July 13

8. Monday 01 July 13

9. Introducing Sprockets
Created by Sam Stephenson of 37Signals fame
The backbone of the Rails Asset Pipeline
 sstephenson/sprockets
Monday 01 July 13

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. 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. 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. 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. 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. Directives
require / include
require_directory
require_tree
require_self
depend_on
stub
Monday 01 July 13

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. 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. 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. Minification / Obfuscation
Uglifier
YUI Compressor
Closure Compiler
Out the box, just install the gems that wrap up the tools
Monday 01 July 13

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. Engines enable you to:
Monday 01 July 13

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. 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. Share
Easily package up libraries as gems to distribute
Stand on the shoulders of others who’ve shared
Monday 01 July 13

25. Future proof
Since 2.10, support for bower.json
commonjs-sprockets plugin
Monday 01 July 13

26. Oh, remember sass-rails
Gives us all the mixins we use daily:
image-url()
asset-url()
Monday 01 July 13

27. In real life
Monday 01 July 13

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. 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. Development mode
Monday 01 July 13

31. Production
Monday 01 July 13

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. Derailing it
Do you Ruby?
 http://rubyinstaller.org/
*NIX get rbenv / rvm
$ gem install sprockets
Monday 01 July 13

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. 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. 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. Thanks!
Go take control of your static assets!
Monday 01 July 13