Rails 3 Asset Pipeline

Transcript

1. Rails 3.1: Asset Pipeline James Daniels Monday, September 26, 11
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 Monday, September 26, 11
3. appblade.com Makes mobile provisioning, beta tests, and enterprise deployments not suck. SERIOUSLY CHECK IT OUT. Monday, September 26, 11
4. Rails 3.1: Asset Pipeline “Like a boss” James Daniels Monday, September 26, 11
5. The problem Monday, September 26, 11
6. The problem Monday, September 26, 11
7. The problem Monday, September 26, 11
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 Monday, September 26, 11
9. The problem •/public is a fucking junk drawer Monday, September 26, 11
10. Monday, September 26, 11
11. The solution /app /assets /javascripts /stylesheets /images /lib /assets /... /vendor /assets /... Monday, September 26, 11
12. The solution /app /assets /javascripts /stylesheets /images /lib /assets /... /vendor /assets /... //=  require  modernizr //=  require  jquery //=  require  jquery_ujs //=  require  jqueryui //=  require  underscore //=  require  backbone //=  require_tree  . gem ‘jquery-rails’ Monday, September 26, 11
13. The solution //=  require_tree  . requires  app/assets/javascripts/**/* Monday, September 26, 11
14. The solution /= require_tree . /= require_self /= require_directory ‘posts’ /= include ‘file’ /= depend_on ‘file.png’ /= provide ‘something’ Monday, September 26, 11
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 Monday, September 26, 11
16. Features • Cache friendly static filenames application-­‐908e25f4bf641868d8683022a5b62f54.css • Asset organization • Links to assets • Pre-processing projects.css.scss.erb • Post-processing Monday, September 26, 11
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  . Monday, September 26, 11
18. Coffeescript Monday, September 26, 11
19. Coffeescript • Language that compiles to javascript hopefully Mark convinced you and me on this # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list) Monday, September 26, 11
20. Javascript compression • Uses execjs which needs to have a javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc. • config.assets.js_compressor  =  :uglifier Monday, September 26, 11
21. 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; } Monday, September 26, 11
22. Checkout Bourbon • Vendor specific SCSS helpers #Functions -------------------------------- compact(*args) golden-ratio(*args) linear-gradient(*args) grid-width(*args) shade(*args) tint(*args) #Addons -------------------------------- animation-keyframes (fade-in, fade-out) @ button(*args) @ position(*args) #Mixins -------------------------------- animation @ animation(*args) @ animation-basic(*args) @ animation-delay(*args) @ animation-direction(*args) @ animation-duration(*args) @ animation-fill-mode(*args) @ animation-iteration-count(*args) @ animation-name(*args) @ animation-play-state(*args) @ animation-timing-function(*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 #More mixins -------------------------------- @ inline-block @ linear-gradient(*args) @ radial-gradient(*args) @ transform(*args) transition @ transition(*args) @ transition-delay(*args) @ transition-duration(*args) @ transition-property(*args) @ transition-timing-function(*args) Monday, September 26, 11
23. Asset dependencies /* *= require blueprint/reset *= require blueprint/typography */ body { background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>); } Monday, September 26, 11
24. 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 Monday, September 26, 11
25. 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 Monday, September 26, 11
26. That’s all folks • gem install rails --pre • Rails guides are being updated Monday, September 26, 11
27. That’s all folks • gem install rails --pre • Rails guides are being updated Monday, September 26, 11