Secrets Of The                          Asset Pipeline                             Ken Collins                            ...
The Foundation     What makes the asset     pipeline possible.Sunday, December 18, 11
HikeSunday, December 18, 11
Hike                      Hike is a Ruby library for                      nding les in a set of paths.                    ...
Find Ruby Files In Your Project           trail = Hike::Trail.new "/Users/sam/Projects/hike"           trail.append_extens...
Explore Your Shell Path              trail = Hike::Trail.new "/"              trail.append_paths *ENV["PATH"].split(":")  ...
Digging Deeper                    # Fallback logical paths. Equivalent.                    trail.find "hike", "hike/index"...
TiltSunday, December 18, 11
Tilt                Tilt is a thin interface over a bunch of            different Ruby template engines in an attempt      ...
Common FeaturesSunday, December 18, 11
Common Features                   Custom template evaluation scopes / bindings.Sunday, December 18, 11
Common Features                   Custom template evaluation scopes / bindings.                   Ability to pass locals t...
Common Features                   Custom template evaluation scopes / bindings.                   Ability to pass locals t...
Common Features                   Custom template evaluation scopes / bindings.                   Ability to pass locals t...
Common Features                   Custom template evaluation scopes / bindings.                   Ability to pass locals t...
Common Features                   Custom template evaluation scopes / bindings.                   Ability to pass locals t...
Engine        File Extension          Required Lib.                            ERB             .erb, .rhtml         none (...
Builder            .builder                   builder                           Liquid              .liquid               ...
Really Simple!               require erb               require tilt               template = Tilt.new(templates/foo.erb)  ...
Evaluation Scope             template = Tilt::ERBTemplate.new(templates/foo.erb)             joe = Person.find(joe)       ...
SprocketsSunday, December 18, 11
Sprockets                  Rack-based asset packaging for compiling                      and serving web assets. It featur...
Rack Application                      # In config.ru                      require sprockets                      map /asse...
Renders Templates                             modal.css.scss.erb                   /* Multi-line comment blocks (CSS, SCSS...
Best Practices     How to wire     it up right!Sunday, December 18, 11
Dir. Structure     $ tree app/assets                          |                          !"" images                       ...
Dir. Structure                 $ tree app/assets                                      |                                   ...
Dir. Structure                    $ tree app/assets                                         |                             ...
Dir. Structure                    $ tree app/assets                                         |                             ...
Dir. Structure                    $ tree app/assets                                         |                             ...
Dir. Structure                    $ tree app/assets                                         |                             ...
site.js                          //=   require   jquery-1.6.2.min                          //=   require   jquery-ui-1.8.1...
site.css                          /*                           *= require application/application                         ...
Precompile Additional Assets!                             config/production.rb                      # Precompile additiona...
Dir. Structure                    $ tree app/assets                                         |                             ...
Dir. Structure                    $ tree app/assets                                         |                             ...
Dir. Structure                    $ tree app/assets                                         |                             ...
Base Files Are Your Compass                          app/assets/stylesheets/shared/base.scss                             $...
Advanced Usage     Secrets of the     asset pipeline.Sunday, December 18, 11
Hooking Into Sprockets           Rails.application.assets           # => #<Sprockets::Environment:0x3fda9a195f8c root="/Re...
Finding Assets          #find_asset method (aliased as [])           Rails.application.assets[shared/modal]           # =>...
Incomplete                          * Advanced Usage                            - Where is sprockets.                     ...
Thanks!                           Ken Collins                          metaskills.netSunday, December 18, 11
Upcoming SlideShare
Loading in …5
×

Secrets of the asset pipeline

6,489 views

Published on

Following up from my recent deep code dive into the less-rails and less-rails-bootstrap gems come some of the best hidden features of the rails asset pipeline. My talk will include a behind the scenes look of what makes the asset pipeline possible, best practices, advanced usage followed by a review of some of the top level CSS frameworks being used.

Published in: Technology, Sports
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,489
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Secrets of the asset pipeline

  1. 1. Secrets Of The Asset Pipeline Ken Collins metaskills.netSunday, December 18, 11
  2. 2. The Foundation What makes the asset pipeline possible.Sunday, December 18, 11
  3. 3. HikeSunday, December 18, 11
  4. 4. Hike Hike is a Ruby library for nding les in a set of paths. Use it to implement search paths, load paths, and the like.Sunday, December 18, 11
  5. 5. Find Ruby Files In Your Project trail = Hike::Trail.new "/Users/sam/Projects/hike" trail.append_extension ".rb" trail.append_paths "lib", "test" trail.find "hike/trail" # => "/Users/sam/Projects/hike/lib/hike/trail.rb" trail.find "test_trail" # => "/Users/sam/Projects/hike/test/test_trail.rb"Sunday, December 18, 11
  6. 6. Explore Your Shell Path trail = Hike::Trail.new "/" trail.append_paths *ENV["PATH"].split(":") trail.find "ls" # => "/bin/ls" trail.find "gem" # => "/Users/sam/.rvm/rubies/ree/bin/gem"Sunday, December 18, 11
  7. 7. Digging Deeper # Fallback logical paths. Equivalent. trail.find "hike", "hike/index" trail.find("hike") || trail.find("hike/index") # Block yields multiple matches. trail.find("application") do |path| return path if mime_type_for(path) == "text/css" end # Like Dir#entries. Filters "." and "~" swap files. trail.entries(/usr/local/bin) # Like File.stat. trail.stat(/usr/local/bin) # Cached trail. Avoids excess system calls. trail.indexSunday, December 18, 11
  8. 8. TiltSunday, December 18, 11
  9. 9. Tilt Tilt is a thin interface over a bunch of different Ruby template engines in an attempt to make their usage as generic possible. is is useful for web frameworks, static site generators, and other systems that support multiple template engines but dont want to code for each of them individually.Sunday, December 18, 11
  10. 10. Common FeaturesSunday, December 18, 11
  11. 11. Common Features Custom template evaluation scopes / bindings.Sunday, December 18, 11
  12. 12. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation.Sunday, December 18, 11
  13. 13. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation. Support for passing a block to template eval for "yield".Sunday, December 18, 11
  14. 14. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation. Support for passing a block to template eval for "yield". Backtraces with correct filenames and line numbers.Sunday, December 18, 11
  15. 15. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation. Support for passing a block to template eval for "yield". Backtraces with correct filenames and line numbers. Template file caching and reloading.Sunday, December 18, 11
  16. 16. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation. Support for passing a block to template eval for "yield". Backtraces with correct filenames and line numbers. Template file caching and reloading. Fast, method-based template source compilation.Sunday, December 18, 11
  17. 17. Engine File Extension Required Lib. ERB .erb, .rhtml none (stdlib) Interpolated String .str none (core) Erubis .erb, .rhtml, .erubis erubis Haml .haml haml Sass .sass sass (>= 3.1) Scss .scss 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 redclothSunday, December 18, 11
  18. 18. 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-rubySunday, December 18, 11
  19. 19. Really Simple! require erb require tilt template = Tilt.new(templates/foo.erb) #<Tilt::ERBTemplate @file="templates/foo.rb"...> template.render # => "Hello world!"Sunday, December 18, 11
  20. 20. Evaluation Scope template = Tilt::ERBTemplate.new(templates/foo.erb) joe = Person.find(joe) output = template.render(joe, :x => 35, :y => 42) jane = Person.find(jane) output = template.render(jane, :x => 22, :y => nil)Sunday, December 18, 11
  21. 21. SprocketsSunday, December 18, 11
  22. 22. Sprockets Rack-based asset packaging for compiling and serving web assets. It features declarative dependency management for JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows you to write assets in languages like CoffeeScript, Sass, SCSS and LESS.Sunday, December 18, 11
  23. 23. Rack Application # In config.ru require sprockets map /assets do environment = Sprockets::Environment.new environment.append_path app/assets/javascripts environment.append_path app/assets/stylesheets run environment end map / do run YourRackApp endSunday, December 18, 11
  24. 24. Renders Templates modal.css.scss.erb /* Multi-line comment blocks (CSS, SCSS, JavaScript) *= require foo */ // Single-line comment blocks (SCSS, JavaScript) //= require foo # Single-line comment blocks (CoffeeScript) #= require fooSunday, December 18, 11
  25. 25. Best Practices How to wire it up right!Sunday, December 18, 11
  26. 26. Dir. Structure $ tree app/assets | !"" images #   !"" app #   #   !"" ... #   $"" site #   $"" ... !"" javascripts #   !"" application.js #   | $"" ... #   !"" shared #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site | | !"" base.js.coffee #   | !"" flash.js.coffee #   | $"" ... | $"" site.js $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  27. 27. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts #   !"" application.js #   | $"" ... #   !"" shared #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site | | !"" base.js.coffee #   | !"" flash.js.coffee #   | $"" ... | $"" site.js $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  28. 28. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site | | !"" base.js.coffee #   | !"" flash.js.coffee #   | $"" ... | $"" site.js $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  29. 29. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site | | !"" base.js.coffee #   | !"" flash.js.coffee #   | $"" ... | $"" site.js $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  30. 30. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site Require Tree Bad | | #   | !"" base.js.coffee !"" flash.js.coffee #   | $"" ... | $"" site.js $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  31. 31. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site Require Tree Bad | | #   | !"" base.js.coffee !"" flash.js.coffee #   | $"" ... $"" site.js Try To Match With | $"" stylesheets !"" application Layout Names #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  32. 32. site.js //= require jquery-1.6.2.min //= require jquery-ui-1.8.12.ui-darkness.min //= require jquery_ujs //= require shared/base //= require shared/utils //= require shared/modal //= require shared/spinner //= require site/quickie //= require site/flash //= require site/siteSunday, December 18, 11
  33. 33. site.css /* *= require application/application *= require shared/modal *= require shared/utility */Sunday, December 18, 11
  34. 34. Precompile Additional Assets! config/production.rb # Precompile additional assets # (application.js, application.css, # and all non-JS/CSS are already added) config.assets.precompile += [site.js, site.css]Sunday, December 18, 11
  35. 35. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site Require Tree Bad | | #   | !"" base.js.coffee !"" flash.js.coffee #   | $"" ... $"" site.js Try To Match With | $"" stylesheets !"" application Layout Names #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  36. 36. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site Require Tree Bad | | #   | !"" base.js.coffee !"" flash.js.coffee #   | $"" ... $"" site.js Try To Match With | $"" stylesheets !"" application Layout Names #   $"" application.css.scss !"" application.css !"" shared Sub Files @import’ed #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" site.cssSunday, December 18, 11
  37. 37. Dir. Structure $ tree app/assets | !"" images #   !"" app Directory Namespaces #   #   !"" ... #   $"" site #   $"" ... !"" javascripts Manifest Only Top Files #   !"" application.js #   | $"" ... #   !"" shared Generators Garbage #   #   !"" base.js.coffee #   #   !"" modal.js.coffee.erb #   #   $"" ... #   !"" site Require Tree Bad | | #   | !"" base.js.coffee !"" flash.js.coffee #   | $"" ... $"" site.js Try To Match With | $"" stylesheets !"" application Layout Names #   $"" application.css.scss !"" application.css !"" shared Sub Files @import’ed #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site Base Files Are #   !"" 960.css #   $"" site.css.scss Your Compass $"" site.cssSunday, December 18, 11
  38. 38. Base Files Are Your Compass app/assets/stylesheets/shared/base.scss $legacy-support-for-ie: false; $experimental-support-for-opera: false; $experimental-support-for-khtml: false; @import "compass"; @import "compass/layout"; app/assets/stylesheets/shared/modal.scss /* *= depend_on shared/base.scss */ @import "shared/base";Sunday, December 18, 11
  39. 39. Advanced Usage Secrets of the asset pipeline.Sunday, December 18, 11
  40. 40. Hooking Into Sprockets Rails.application.assets # => #<Sprockets::Environment:0x3fda9a195f8c root="/Repos/ homemarks_app", paths=["/Repos/homemarks_app/app/assets/images", "/Repos/homemarks_app/app/assets/javascripts", "/Repos/ homemarks_app/app/assets/stylesheets", "/Repos/homemarks_app/ vendor/assets/javascripts", "/Repos/homemarks_app/vendor/assets/ stylesheets", "/Users/ken/.rbenv/versions/1.9.3/lib/ruby/gems/ 1.9.1/gems/jquery-rails-1.0.13/vendor/assets/javascripts"], digest="46dde6621c301f4928e3b34efee9e3b5"> Or use the `asset_environment` helper.Sunday, December 18, 11
  41. 41. Finding Assets #find_asset method (aliased as []) Rails.application.assets[shared/modal] # => #<Sprockets::BundledAsset:0x3fcd7e90c6cc pathname="/ Repos/homemarks_app/app/assets/javascripts/shared/ modal.js.coffee.erb", mtime=2011-11-25 17:41:11 -0500, digest="775822db3e101bf38d7978627380e62b">Sunday, December 18, 11
  42. 42. Incomplete * Advanced Usage - Where is sprockets. > Rails.application.assets (helpers can use asset_environment) - Finding Assets. #find_asset method (aliased as []) Notes Rails.application.assets[shared/modal] # => Sprockets::BundledAsset Call to_s on the resulting asset to access its contents, length to get its length in bytes, mtime to query its last-modified time, and pathname to get its full path on the filesystem. - Asset Helpers. - image, asset-data-uri, etc. Move all images to app/assets!!! Rails.application.assets[site/hmlogo.png] # => #<Sprockets::StaticAsset:0x3fda99465d08 pathname="/Users/kencollins/Repositories/ homemarks_app/app/assets/images/site/hmlogo.png", mtime=2011-11-16 19:31:44 -0500, digest="eed9e6f3fd9fa546ccd7ce49edd99f49"> - Custom SASS - Preprocessors. - Assets in other assets. - Precompiling. Fingerprints. When they are used. - JavaScript Templating with EJS and Eco (read sprockets page) - JST (define) - EJS or Eco - CSS Compressors (:uglifier default, but use :yui for both css/js) group :assets do # ... gem yui-compressor, :require => yui/compressor end - Your config/application.rb if defined?(Bundler) # If you precompile assets before deploying to production, use this line Bundler.require *Rails.groups(:assets => %w(development test)) # If you want your assets lazily compiled in production, use this line # Bundler.require(:default, :assets, Rails.env) end * CSS Frameworks. - Less - Stylus - Sass - http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive - http://github.com/kuroir/SCSS.tmbundle - Compass - mate "$(bundle show compass)/frameworks/compass/stylesheets"Sunday, December 18, 11
  43. 43. Thanks! Ken Collins metaskills.netSunday, December 18, 11

×