Secrets of the asset pipeline
Upcoming SlideShare
Loading in...5
×
 

Secrets of the asset pipeline

on

  • 5,722 views

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 ...

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.

Statistics

Views

Total Views
5,722
Slideshare-icon Views on SlideShare
5,719
Embed Views
3

Actions

Likes
4
Downloads
21
Comments
0

2 Embeds 3

http://paper.li 2
http://www.hanrss.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

    Secrets of the asset pipeline Secrets of the asset pipeline Presentation Transcript

    • Secrets Of The Asset Pipeline Ken Collins metaskills.netSunday, December 18, 11
    • 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. Use it to implement search paths, load paths, and the like.Sunday, December 18, 11
    • 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
    • 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
    • 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
    • TiltSunday, December 18, 11
    • 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
    • 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 to template evaluation.Sunday, December 18, 11
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • SprocketsSunday, December 18, 11
    • 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
    • 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
    • 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
    • Best Practices How to wire it up right!Sunday, December 18, 11
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • site.css /* *= require application/application *= require shared/modal *= require shared/utility */Sunday, December 18, 11
    • 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
    • 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
    • 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
    • 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
    • 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
    • Advanced Usage Secrets of the asset pipeline.Sunday, December 18, 11
    • 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
    • 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
    • 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
    • Thanks! Ken Collins metaskills.netSunday, December 18, 11