Going over the Rails 3.1 A

1. Rails 3.1: Asset Pipeline
James Daniels

2. About me
@danielsju6 Boston, MA
Entrepreneur & Rails Developer; Founder of
@marginleft, @accelgolf, lead on @appblade, over
user of CamelCase, and a @techstars Boston Alum

3. appblade.com
Makes mobile provisioning, beta tests,
and enterprise deployments not suck.
SERIOUSLY CHECK IT OUT.

4. Rails 3.1: Asset Pipeline
“Like a boss”
James Daniels

5. The problem

6. The problem

7. The problem

8. The problem
• Third-party code mixed into yours
• JS/CSS/IMG treated as second class citizens
• Organization is fucked
• JavaScript in views
• Who uses :cache => true anyway

9. The problem
• /public is a fucking junk drawer

11. The solution
/app
/assets
/javascripts
/stylesheets
/images
/lib
/assets
/...
/vendor
/assets
/...

12. The solution
/app
/assets gem ‘jquery-rails’
/javascripts
/stylesheets //= require modernizr
/images //= require jquery
//= require jquery_ujs
/lib //= require jqueryui
/assets //= require underscore
/... //= require backbone
//= require_tree .
/vendor
/assets
/...

13. The solution
//= require_tree .
requires app/assets/javascripts/**/*

14. The solution
/= require_tree .
/= require_self
/= require_directory ‘posts’
/= include ‘file’
/= depend_on ‘file.png’
/= provide ‘something’

15. The solution
• rails generate scaffold post
invoke assets
create app/assets/javascripts/posts.js
invoke css
create app/assets/stylesheets/users.css
invoke css
create app/assets/stylesheets/_scaffold.css

16. Features
• Cache friendly static filenames
application‐908e25f4bf641868d8683022a5b62f54.css
• Asset organization
• Links to assets
• Pre-processing
projects.css.scss.erb
• Post-processing

17. Sprockets
• Manifest files to load js/css
app/assets/javascripts/application.js
app/assets/stylesheets/application.css
• Coffeescript, less, sass, scss, erb
• Assets brought in by gems
//= require modernizr
//= require jquery
//= require jquery_ujs
//= require jqueryui
//= require underscore
//= require backbone
//= require_tree .

18. Coffeescript... meh
• Language that compiles to javascript
hopefully Mark convinced you and me on this
# Assignment: # Objects:
number = 42 math =
opposite = true root: Math.sqrt
square: square
cube: (x) -> x * square x
# Conditions:
number = -42 if opposite # Splats:
race = (winner, runners...) ->
# Functions: print winner, runners
square = (x) -> x * x
# Existence:
alert "I knew it!" if elvis?
# Arrays:
list = [1, 2, 3, 4, 5]
# Array comprehensions:
cubes = (math.cube num for num in list)

19. Javascript compression
• config.assets.js_compressor = :uglifier
• Uses execjs which needs to have a
javascript runtime
node.js, ‘therubyracer’, ‘mustang’, etc.

20. Sass... FUCK YEAH!
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

21. Checkout Bourbon
• Vendor specific SCSS helpers
#Functions #Mixins #More mixins
-------------------------------- -------------------------------- --------------------------------
compact(*args) animation @ inline-block
golden-ratio(*args) @ animation(*args) @ linear-gradient(*args)
linear-gradient(*args) @ animation-basic(*args) @ radial-gradient(*args)
grid-width(*args) @ animation-delay(*args) @ transform(*args)
shade(*args) @ animation-direction(*args)
tint(*args) @ animation-duration(*args) transition
@ animation-fill-mode(*args) @ transition(*args)
@ animation-iteration-count(*args) @ transition-delay(*args)
#Addons @ animation-name(*args) @ transition-duration(*args)
-------------------------------- @ animation-play-state(*args) @ transition-property(*args)
animation-keyframes (fade-in, fade-out) @ animation-timing-function(*args) @ transition-timing-function(*args)
@ button(*args)
@ position(*args) @ background-image(*args)
@ border-radius(*args)
@ box-shadow(*args)
@ box-sizing(*args)
flex-box
@ box(*args)
@ box-align(*args)
@ box-direction(*args)
@ box-flex(*args)
@ box-flex-group(*args)
@ box-lines(*args)
@ box-ordinal-group(*args)
@ box-orient(*args)
@ box-pack(*args)
@ display-box

22. Asset dependencies
/*
*= require blueprint/reset
*= require blueprint/typography
*/
body {
background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>);
}

23. Tilt
ENGINE FILE EXTENSIONS REQUIRED LIBRARIES
-------------------------- ----------------------- ----------------------------
ERB .erb, .rhtml none (included ruby stdlib)
Interpolated String .str none (included ruby core)
Erubis .erb, .rhtml, .erubis erubis
Haml .haml haml
Sass .sass haml (< 3.1) or sass (>= 3.1)
Scss .scss haml (< 3.1) or sass (>= 3.1)
Less CSS .less less
Builder .builder builder
Liquid .liquid liquid
RDiscount .markdown, .mkd, .md rdiscount
Redcarpet .markdown, .mkd, .md redcarpet
BlueCloth .markdown, .mkd, .md bluecloth
Kramdown .markdown, .mkd, .md kramdown
Maruku .markdown, .mkd, .md maruku
RedCloth .textile redcloth
RDoc .rdoc rdoc
Radius .radius radius
Markaby .mab markaby
Nokogiri .nokogiri nokogiri
CoffeeScript .coffee coffee-script (+ javascript)
Creole (Wiki markup) .wiki, .creole creole
WikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikicloth
Yajl .yajl yajl-ruby

24. Production
• Pre-compilation
• Capistrano
before :"deploy:symlink", :"deploy:assets";
desc "Compile asets"
task :assets do
run "cd #{release_path}; RAILS_ENV=#{rails_env} bundle exec rake assets:precompile"
end

25. That’s all folks
• gem install rails --pre
• Rails guides are being updated