Rails 3.1 Asset Pipeline
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Rails 3.1 Asset Pipeline

on

  • 2,075 views

Going over the Rails 3.1 A

Going over the Rails 3.1 A

Statistics

Views

Total Views
2,075
Views on SlideShare
2,063
Embed Views
12

Actions

Likes
1
Downloads
20
Comments
0

1 Embed 12

http://www.linkedin.com 12

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. Rails 3.1: Asset Pipeline James Daniels
  • 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. appblade.comMakes 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
  • 10. The solution/app /assets /javascripts /stylesheets /images/lib /assets /.../vendor /assets /...
  • 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. The solution//=
require_tree
.requires
app/assets/javascripts/**/*
  • 13. The solution/= require_tree ./= require_self/= require_directory ‘posts’/= include ‘file’/= depend_on ‘file.png’/= provide ‘something’
  • 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. Features• Cache friendly static filenames application‐908e25f4bf641868d8683022a5b62f54.css• Asset organization• Links to assets• Pre-processing projects.css.scss.erb• Post-processing
  • 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. 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. Javascript compression• config.assets.js_compressor
=
:uglifier• Uses execjs which needs to have a javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc.
  • 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. 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. Asset dependencies/* *= require blueprint/reset *= require blueprint/typography */body {  background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>);}
  • 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. 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. That’s all folks• gem install rails --pre• Rails guides are being updated