Rails 3.1: Asset Pipeline         James Daniels
About me            @danielsju6 Boston, MA   Entrepreneur & Rails Developer; Founder of@marginleft, @accelgolf, lead on @a...
appblade.comMakes mobile provisioning, beta tests,and enterprise deployments not suck.    SERIOUSLY CHECK IT OUT.
Rails 3.1: Asset Pipeline      “Like a boss”         James Daniels
The problem
The problem
The problem
The problem• Third-party code mixed into yours• JS/CSS/IMG treated as second class citizens• Organization is fucked• JavaS...
The problem•   /public is a fucking junk drawer
The solution/app   /assets     /javascripts     /stylesheets     /images/lib   /assets     /.../vendor   /assets     /...
The solution/app   /assets          gem ‘jquery-rails’     /javascripts     /stylesheets   //=
require
modernizr     /imag...
The solution//=
require_tree
.requires
app/assets/javascripts/**/*
The solution/=   require_tree ./=   require_self/=   require_directory ‘posts’/=   include ‘file’/=   depend_on ‘file.png’...
The solution• rails generate scaffold post  invoke


assets  create




app/assets/javascripts/posts.js  invoke


css  cre...
Features• Cache friendly static filenames  application‐908e25f4bf641868d8683022a5b62f54.css• Asset organization• Links to a...
Sprockets• Manifest files to load js/css  app/assets/javascripts/application.js  app/assets/stylesheets/application.css• Co...
Coffeescript... meh• Language that compiles to javascript   hopefully Mark convinced you and me on this # Assignment:     ...
Javascript compression•   config.assets.js_compressor
=
:uglifier• Uses execjs which needs to have a    javascript runtime...
Sass... FUCK YEAH!    $blue: #3bbfce;    $margin: 16px;    .content-navigation {      border-color: $blue;      color:    ...
Checkout Bourbon        • Vendor specific SCSS helpers#Functions                                  #Mixins                  ...
Asset dependencies/* *= require blueprint/reset *= require blueprint/typography */body {  background: url(<%= asset_path "...
TiltENGINE                       FILE EXTENSIONS           REQUIRED LIBRARIES--------------------------   ----------------...
Production• Pre-compilation• Capistrano  before :"deploy:symlink", :"deploy:assets";  desc "Compile asets"  task :assets d...
That’s all folks• gem install rails --pre• Rails guides are being updated
Rails 3.1 Asset Pipeline
Upcoming SlideShare
Loading in...5
×

Rails 3.1 Asset Pipeline

1,908

Published on

Going over the Rails 3.1 A

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,908
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rails 3.1 Asset Pipeline

    1. 1. Rails 3.1: Asset Pipeline James Daniels
    2. 2. About me @danielsju6 Boston, MA Entrepreneur & Rails Developer; Founder of@marginleft, @accelgolf, lead on @appblade, overuser of CamelCase, and a @techstars Boston Alum
    3. 3. appblade.comMakes mobile provisioning, beta tests,and enterprise deployments not suck. SERIOUSLY CHECK IT OUT.
    4. 4. Rails 3.1: Asset Pipeline “Like a boss” James Daniels
    5. 5. The problem
    6. 6. The problem
    7. 7. The problem
    8. 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. 9. The problem• /public is a fucking junk drawer
    10. 10. The solution/app /assets /javascripts /stylesheets /images/lib /assets /.../vendor /assets /...
    11. 11. 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 /...
    12. 12. The solution//=
require_tree
.requires
app/assets/javascripts/**/*
    13. 13. The solution/= require_tree ./= require_self/= require_directory ‘posts’/= include ‘file’/= depend_on ‘file.png’/= provide ‘something’
    14. 14. 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
    15. 15. Features• Cache friendly static filenames application‐908e25f4bf641868d8683022a5b62f54.css• Asset organization• Links to assets• Pre-processing projects.css.scss.erb• Post-processing
    16. 16. 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
.
    17. 17. 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)
    18. 18. Javascript compression• config.assets.js_compressor
=
:uglifier• Uses execjs which needs to have a javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc.
    19. 19. 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; }
    20. 20. 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
    21. 21. Asset dependencies/* *= require blueprint/reset *= require blueprint/typography */body {  background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>);}
    22. 22. TiltENGINE FILE EXTENSIONS REQUIRED LIBRARIES-------------------------- ----------------------- ----------------------------ERB .erb, .rhtml none (included ruby stdlib)Interpolated String .str none (included ruby core)Erubis .erb, .rhtml, .erubis erubisHaml .haml hamlSass .sass haml (< 3.1) or sass (>= 3.1)Scss .scss haml (< 3.1) or sass (>= 3.1)Less CSS .less lessBuilder .builder builderLiquid .liquid liquidRDiscount .markdown, .mkd, .md rdiscountRedcarpet .markdown, .mkd, .md redcarpetBlueCloth .markdown, .mkd, .md blueclothKramdown .markdown, .mkd, .md kramdownMaruku .markdown, .mkd, .md marukuRedCloth .textile redclothRDoc .rdoc rdocRadius .radius radiusMarkaby .mab markabyNokogiri .nokogiri nokogiriCoffeeScript .coffee coffee-script (+ javascript)Creole (Wiki markup) .wiki, .creole creoleWikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikiclothYajl .yajl yajl-ruby
    23. 23. 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
    24. 24. That’s all folks• gem install rails --pre• Rails guides are being updated
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×