SlideShare a Scribd company logo

Secrets of the asset pipeline

Ken Collins, profile picture
Ken Collins

The document discusses the structure and functionality of the asset pipeline in Ruby, focusing on libraries like Hike, Tilt, and Sprockets. It explains how to manage files and templates efficiently, as well as offers guidelines on best practices for asset organization and precompilation. Additionally, the document provides examples and details about various template engines and their integration into web applications.

TechnologySports
1 of 43
Downloaded 24 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Secrets Of The Asset Pipeline Ken Collins metaskills.net Sunday, December 18, 11
The Foundation What makes the asset pipeline possible. Sunday, December 18, 11
Hike Sunday, 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.index Sunday, December 18, 11
Tilt Sunday, 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 don't want to code for each of them individually. Sunday, December 18, 11
Common Features Sunday, 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 redcloth Sunday, 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-ruby Sunday, 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
Sprockets Sunday, 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 end Sunday, 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 foo Sunday, 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.css Sunday, 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.css Sunday, 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.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 | | !"" 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.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 $"" stylesheets !"" application #   $"" application.css.scss !"" application.css !"" shared #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" 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.css Sunday, 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/site Sunday, 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.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 Sub Files @import’ed #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site #   !"" 960.css #   $"" site.css.scss $"" 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 Sub Files @import’ed #   !"" base.scss #   !"" modal.css.scss #   $"" ... !"" site Base Files Are #   !"" 960.css #   $"" site.css.scss Your Compass $"" site.css Sunday, 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.net Sunday, December 18, 11

More Related Content

PDF
The Dictionary of Brand by Marty Neumeier
Liquid Agency
 
KEY
Griffith uni
nigel99
 
PDF
Steal This Idea: The Robot Curve / By Marty Neumeier
Liquid Agency
 
PDF
TDC 2012 - Patterns e Anti-Patterns em Ruby
Fabio Akita
 
PDF
how to rate a Rails application
ehuard
 
KEY
API Design
James Gray
 
PDF
Bundling Client Side Assets
Timothy Oxley
 
PDF
Passing the Joel Test in the PHP World (phpbnl10)
Lorna Mitchell
 
The Dictionary of Brand by Marty Neumeier
Liquid Agency
 
Griffith uni
nigel99
 
Steal This Idea: The Robot Curve / By Marty Neumeier
Liquid Agency
 
TDC 2012 - Patterns e Anti-Patterns em Ruby
Fabio Akita
 
how to rate a Rails application
ehuard
 
API Design
James Gray
 
Bundling Client Side Assets
Timothy Oxley
 
Passing the Joel Test in the PHP World (phpbnl10)
Lorna Mitchell
 

Similar to Secrets of the asset pipeline (20)

PDF
Presentation to wdim_students
Scott Motte
 
ZIP
Rails 3.1 Asset Pipeline
James Daniels
 
PDF
Web Developing In Search
Frank Xu
 
PDF
Code Reuse Made Easy: Uncovering the Hidden Gems of Corporate and Open Source...
Perforce
 
KEY
SD, a P2P bug tracking system
Jesse Vincent
 
KEY
Your fist RubyMotion Application
toamitkumar
 
PDF
Kharkivpy#3: Javascript and Python backend
Max Klymyshyn
 
PDF
Sean coates fifty things and tricks, confoo 2011
Bachkoutou Toutou
 
PPTX
Reviewing CPAN modules
neilbowers
 
PDF
jQuery Migration
Chris Pederick
 
PDF
Rake: Not Your Father's Build Tool
filmprog
 
PDF
Oscon 2010
John Woodell
 
PDF
Frontend Engineer Toolbox
Ynon Perek
 
KEY
ShRUG 5 - Scottish Ruby Conf edition
PatchSpace Ltd
 
PDF
Merb The Super Bike Of Frameworks
Rowan Hick
 
KEY
平台开发须知
Vonbo
 
KEY
Get your Project back in Shape!
Joachim Tuchel
 
PDF
Coding for Designers. A primer. By Fabian Fabian
Codemotion
 
PDF
IJTC%202009%20JRuby
tutorialsruby
 
PDF
IJTC%202009%20JRuby
tutorialsruby
 
Presentation to wdim_students
Scott Motte
 
Rails 3.1 Asset Pipeline
James Daniels
 
Web Developing In Search
Frank Xu
 
Code Reuse Made Easy: Uncovering the Hidden Gems of Corporate and Open Source...
Perforce
 
SD, a P2P bug tracking system
Jesse Vincent
 
Your fist RubyMotion Application
toamitkumar
 
Kharkivpy#3: Javascript and Python backend
Max Klymyshyn
 
Sean coates fifty things and tricks, confoo 2011
Bachkoutou Toutou
 
Reviewing CPAN modules
neilbowers
 
jQuery Migration
Chris Pederick
 
Rake: Not Your Father's Build Tool
filmprog
 
Oscon 2010
John Woodell
 
Frontend Engineer Toolbox
Ynon Perek
 
ShRUG 5 - Scottish Ruby Conf edition
PatchSpace Ltd
 
Merb The Super Bike Of Frameworks
Rowan Hick
 
平台开发须知
Vonbo
 
Get your Project back in Shape!
Joachim Tuchel
 
Coding for Designers. A primer. By Fabian Fabian
Codemotion
 
IJTC%202009%20JRuby
tutorialsruby
 
IJTC%202009%20JRuby
tutorialsruby
 
Ad

More from Ken Collins (7)

PDF
Ruby struct
Ken Collins
 
PDF
Dominion Enterprises _H@&lt;k@th0n_
Ken Collins
 
PDF
Free The Enterprise With Ruby & Master Your Own Domain
Ken Collins
 
PDF
Memcached Presentation @757rb
Ken Collins
 
PDF
Oo java script class construction
Ken Collins
 
PDF
Tool Time
Ken Collins
 
PDF
Synchronizing Core Data With Rails
Ken Collins
 
Ruby struct
Ken Collins
 
Dominion Enterprises _H@&lt;k@th0n_
Ken Collins
 
Free The Enterprise With Ruby & Master Your Own Domain
Ken Collins
 
Memcached Presentation @757rb
Ken Collins
 
Oo java script class construction
Ken Collins
 
Tool Time
Ken Collins
 
Synchronizing Core Data With Rails
Ken Collins
 
Ad

Recently uploaded (20)

PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Cloud computing and distributed systems.
kkkkkhan
 
Teaching material agriculture food technology
LiaRayya
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Approach and Philosophy of On baking technology
30anthuong17
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 

Secrets of the asset pipeline

  • 1. Secrets Of The Asset Pipeline Ken Collins metaskills.net Sunday, December 18, 11
  • 2. The Foundation What makes the asset pipeline possible. Sunday, December 18, 11
  • 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. 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. 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. 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.index Sunday, December 18, 11
  • 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 don't want to code for each of them individually. Sunday, December 18, 11
  • 11. Common Features Custom template evaluation scopes / bindings. Sunday, December 18, 11
  • 12. Common Features Custom template evaluation scopes / bindings. Ability to pass locals to template evaluation. Sunday, December 18, 11
  • 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. 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. 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. 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. 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 redcloth Sunday, December 18, 11
  • 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-ruby Sunday, December 18, 11
  • 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. 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
  • 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. 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 end Sunday, December 18, 11
  • 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 foo Sunday, December 18, 11
  • 25. Best Practices How to wire it up right! Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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/site Sunday, December 18, 11
  • 33. site.css /* *= require application/application *= require shared/modal *= require shared/utility */ Sunday, December 18, 11
  • 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. 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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.css Sunday, December 18, 11
  • 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. Advanced Usage Secrets of the asset pipeline. Sunday, December 18, 11
  • 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. 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. 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. Thanks! Ken Collins metaskills.net Sunday, December 18, 11