Rails 3.1 Asset Pipeline

Rails 3.1
Asset Pipeline

by Eric Allam
a presentation

Table of Contents
01 The pain of assets in 3.0
02 Asset Pipeline to the rescue
03 New Stuﬀ
04 Deployment story

Asset Pipeline !"#$%&'(&)*+%,

Bad Organization

stylesheets

ROOT/public javascripts

images


One of the big pains in how Rails pre 3.1 handles assets is organizational. You have one
place to put all your assets, one place to put stylesheets, one place to put javascripts, and
one place to put images. But what ends up happening?

application code

third party code


Big Ass Folders
Mixing 3rd party code
How do you update?
Mixing abstractions
be like extracting rails into your project

lowercase d dependencies
‣ application.html.erb

<%= stylesheet_link_tag 'default',
'index' %>
<%= javascript_include_tag 'jquery',
'rails', 'application' %>


ad hoc dependency declaration

Table of Contents


03 New Stuﬀ
04 Deployment story


Assets as First Class Citizens
‣ Better Opinions
‣ Empty Files and Folders
‣ Generators
‣ Capital-D Dependencies


Better Opinions

app/assets stylesheets

lib/assets javascripts

vendor/assets images


Now assets are in 3 places.

app/assets holds the code you write for this speciﬁc application

lib/assets holds the generic library code you write for this application

vendor/assets holds third party code

app/assets

localhost:3000/assets/application.js


Now, when you generate a new rails 3.1 app, you get two assets, application.js and
application.css in app/assets.

And now that 3.1 ships with jQuery by default, where is that?

lib/assets

localhost:3000/assets/nagivation.js


vendor/assets

localhost:3000/assets/ie6_screen.css


3rd party

Capital-D Dependencies
‣ app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs

sprockets


looks like ruby require

require inlines the code when application.js is served, in order.

But where are these ﬁles?

Capital-D Dependencies
‣ Gemfile

gem 'jquery-rails'

https://github.com/rails/jquery-rails
//= require jquery


So we’ve declared our dependency on jquery and jquery_ujs in our application.js file, but
where are these files?

Well, now gems can have their own assets, and rails 3.1 ships with this jquery-rails gem in
your Gemfile, which provides jquery and jquery_ujs files necessary to work with the
framework.

Notice the familiar layout for assets, vendor/assets/javascripts.

Don’t like jQuery?
‣ Gemfile

# gem 'jquery-rails'
gem 'prototype'


//= require prototype


Now its also very easy to switch back to prototype, or some other javascript library.

Including assets
‣ application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

(function( window, undefined ) {
// all of jquery here
})( jQuery );

(function() {
// application code here
}).call(this);


In your application.html.erb, you would deﬁne which stylesheets and javascripts you would
need.

Generators
‣ rails generate assets Post

‣ rails generate scaffold User


Another way rails 3.1 makes assets into a ﬁrst class citizen is through generators.

So now that we have a place to put resource speciﬁc asset code, how do we include these in
our app?

Dependency Directives

//= require jquery
//= require_tree .

require app/assets/javascripts/**/*


require_tree will require all ﬁles in javascripts, and any nested folders.

More Directives
‣ require
‣ require_tree .
‣ require_self
‣ require_directory ‘posts’
‣ include ‘file’
‣ depend_on ‘file.png’


require_self takes the code from the current ﬁle and inlines it in place, helps when requiring
dependencies after require_self that depend on the current ﬁle

require_directory is similar to require_tree, but it wont traverse nested directories

include works like require, but will always insert the content even if its been required already

depend_on will declare a dependency that doesn’t get required, but is used for caching
purposes * will go into caching stuff more later

Table of Contents

03 New Stuﬀ

04 Deployment story


CoﬀeeScript and Sass
‣ Gemfile

group :assets do
gem 'sass-rails'
gem 'coffee-script'
end

Default in 3.1


The asset group is required by default in development and test environments, but not in
production.

CoﬀeeScript and Sass
‣ app/assets/javascripts/application.js.coffee
jQuery ($) ->

$('.truncate-more-link').live 'click', (e) ->
$this = $ this
# do more stuff here

‣ app/assets/stylesheets/application.css.scss

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}


Before they are served to the browser, the asset pipeline passes these ﬁles through their
respective preprocessors.

Generators
‣ rails generate assets Review

‣ rails generate scaffold Comment


Now generators work with coffeescript and sass and generate the appropriate ﬁles

Chaining Preprocessors
‣ app/assets/stylesheets/application.css.scss.erb
$blue: #3bbfce
$margin: 16px

.content-navigation
background: url(<%= asset_path(‘background.png’) %>)
color: darken($blue, 9%)

$blue: #3bbfce
$margin: 16px

.content-navigation
background: url(/assets/background-374e12d5b46ffa3d2f92a11dbae9b06a.png)


Before they are served to the browser, the asset pipeline passes these ﬁles through their
respective preprocessors.

Preprocessors

https://github.com/rtomayko/tilt


rake assets:precompile
‣ app/assets/stylesheets/application.css.scss.erb
$blue: #3bbfce

.content-navigation
background: url(<%= asset_path(‘background.png’) %>)

‣ public/assets/application-e317be572968fcf8892b5c767f776d82.css

.content-navigation {
background: url(/assets/background-92a96fe5e422523a2de56c9f0defe51b.png);
color: #2ca2af;
}


All assets get compiled into public/assets, where they can easily be served by your webserver
or a CDN.

Precompile
‣ config/deploy.rb
before :"deploy:symlink", :"deploy:assets";

desc "Compile assets"
task :assets do
run "cd #{release_path}; RAILS_ENV=#{rails_env} bundle exec
rake assets:precompile"
end


Caching

<script src="/javascripts/application.js?1292365692">
</script>

<script src="/assets/
application-374e12d5b46ffa3d2f92a11dbae9b06a.js">
</script>

depend_on


Rails used to append a deploy timestamp to all asset paths to reset the cache.

With the asset pipeline, there is no deploy timestamp. Instead, rails will include an MD5 hash
of the contents of the file in the filename itself.

So now the cache stays fresh until the file actually changes, so if you are deploying a lot, but
not changing the asset files, then you should see some nice performance improvements.

Compression
‣ config/environments/production.rb

# Compress both stylesheets and JavaScripts
config.assets.compress = true

gem 'uglifier' requires js runtime


Both Mac OS X and Windows ship with javascript runtimes

If you are deploying to heroku you can use therubyracer-heroku, which includes a build of
nodejs speciﬁcally for heroku, but it will bloat your heroku slug size by 30MB

Rails 3.1 Asset Pipeline
Any questions?


Rails 3.1 Asset Pipeline

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Rails 3.1 Asset Pipeline

Ähnlich wie Rails 3.1 Asset Pipeline (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Rails 3.1 Asset Pipeline