Unleashing the Rails Asset Pipeline

In, and outside of Rails, Sprockets brings sanity to your static assets

Transcript

1. Unleashing the Rails Asset Pipeline In, and out of Rails, Sprockets brings sanity to your static assets. Monday 01 July 13
2. kennethkalmer Kenneth Kalmer Chief Rocket Scientist @ ValuationUP.com @kennethkalmer github/kennethkalmer www.opensourcery.co.za Monday 01 July 13
3. How did I get here? Been doing web development circa 1997 Remember when PHP3 was launched Updated Netscape from PC Format discs Spent time in the entire stack over the years Yes, the entire stack Monday 01 July 13
4. ValuationUP.com Help entrepreneurs make REAL sense of their management accounts Comparative analysis within industry Refactoring financials by getting from red to green Take actions to increase their valuations Valuation is the ultimate metric Monday 01 July 13
5. Monday 01 July 13
6. Monday 01 July 13
7. Monday 01 July 13
8. Monday 01 July 13
9. Introducing Sprockets Created by Sam Stephenson of 37Signals fame The backbone of the Rails Asset Pipeline  sstephenson/sprockets Monday 01 July 13
10. “Sprockets is a Ruby library 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 Monday 01 July 13
11. Provides a load path Allows you to separate your assets own assets from third-party assets Gives you logical paths to your assets Leverages the Hike gem Monday 01 July 13
12. 1 environment = Sprockets::Environment.new 2 environment.append_path 'app/assets/javascripts' 3 environment.append_path 'lib/assets/javascripts' 4 environment.append_path 'vendor/assets/jquery' Example load path Monday 01 July 13
13. Asset paths Plenty of clearly defined files, doing one thing and one thing well Namespacing possible Isolate manifests away 5 ▾ javascripts/ 6 ▸ admin/ 7 ▸ advisories/ 8 ▾ apps/ 13 business_dashboard.js 14 business_list.js 15 business_status.js 16 change_industry.js 17 credit_score.js 18 dashboard_access.js 19 demo_dashboard.js 22 network.js 23 new_statement.js 24 participate.js 25 scenario_chart.js 26 survey_results.js 27 sustainable_growth_rate.js 28 wacc.js 30 ▸ business/ 31 ▸ collections/ 32 ▸ dashboard/ 33 ▸ decorators/ 34 ▾ demo/ 35 dashboard.js.coffee 36 dashboard_layout.js.coffee 37 models.js.coffee 38 ▸ factories/ 39 ▸ helpers/ 40 ▸ layouts/ 41 ▸ models/ 42 ▸ reports/ 43 ▸ valuations/ 44 ▸ views/ 45 application.js 46 frontend.js.coffee 47 industries.js.coffee 50 participate.js.coffee 51 sessions.js.coffee 52 setup.js.coffee 53 share.js.coffee 54 tabs.js.coffee 55 test_overrides.js.coffee 56 users.js.coffee 57 valuationup.js.coffee Monday 01 July 13
14. Directives Helps declare and include dependencies Keeps things in check Allows you to break up your JavaScript & CSS into tiny units Monday 01 July 13
15. Directives require / include require_directory require_tree require_self depend_on stub Monday 01 July 13
16. 1 // Manifest for the demo page page (apps/demo_dashboard.js) 2 // 3 //= require helpers/d3_loader 4 //= require demo/dashboard 1 #= require backbone.localStorage 2 #= require demo/models 3 #= require demo/dashboard_layout 4 # 5 #= require business/dashboard 3 # 4 #= require models/business 5 #= require models/statements Monday 01 July 13
17. Engines Engines process source files written in another language, back to JavaScript or CSS Leverages the Tilt gem to support a lot different templating languages and preprocessors like CoffeeScript, HAML & SASS Easily create a new engine with custom functionality Monday 01 July 13
18. Chaining engines together 1 // test.css.scss.erb 2 3 body { 4 h1 { 5 color: <%= PATENTED_SHADE_OF_BLUE %>; 6 line-height: $headerLineHeight; 7 } 8 } Processed in order by ERB and then SASS, reverse order of the file extensions Monday 01 July 13
19. Minification / Obfuscation Uglifier YUI Compressor Closure Compiler Out the box, just install the gems that wrap up the tools Monday 01 July 13
20. Production happiness Embeds the SHA of the file in the filename: application-2eb682a29.js Create .gz versions for even faster delivery CDN and multi-server friendly Monday 01 July 13
21. Engines enable you to: Monday 01 July 13
22. Leverage SASS/SCSS Program your stylesheets Use $variables in your stylesheets Use Compass CSS framework Use great mixins like Bourbon.io and Bourbon Neat Cherry-pick your favorite Bootstrap styles Monday 01 July 13
23. Leverage Handlebars Precompile your templates during deployments Ship only handlebars.runtime.js to the clients Even build your Handlebars templates using HAML Monday 01 July 13
24. Share Easily package up libraries as gems to distribute Stand on the shoulders of others who’ve shared Monday 01 July 13
25. Future proof Since 2.10, support for bower.json commonjs-sprockets plugin Monday 01 July 13
26. Oh, remember sass-rails Gives us all the mixins we use daily: image-url() asset-url() Monday 01 July 13
27. In real life Monday 01 July 13
28. The stack (relative) CoffeeScript Backbone, Underscore, d3.js Handlebars HAML & SCSS Ruby on Rails & Ruby 2.0 Cucumber, RSpec & Jasmine V8 Monday 01 July 13
29. The numbers Files Source LOC Specs LOC Features Ruby 648 ~4800 7352 3734 Coffee Script 350 9200 4852 - SCSS 78 1094 - - Monday 01 July 13
30. Development mode Monday 01 July 13
31. Production Monday 01 July 13
32. Deployment Conditional asset compilation - use a git diff during deployment to determine whether assets changed Asset compilation takes 5 mins Compiled on the deploying machine, rsync to server CloudFront to keep things snappy Monday 01 July 13
33. Derailing it Do you Ruby?  http://rubyinstaller.org/ *NIX get rbenv / rvm $ gem install sprockets Monday 01 July 13
34. CLI access $ sprockets --help Usage: sprockets [options] filename [filename ...] -r, --require LIBRARY Require the LIBRARY before doing anything -I, --include=DIRECTORY Adds the directory to the Sprockets load path -o, --output=DIRECTORY Copy provided assets into DIRECTORY --noenv Disables .sprocketsrc file -h, --help Shows this help message -v, --version Shows version Monday 01 July 13
35. Rakefile 1 require 'sprockets' 2 require 'rake/sprocketstask' 3 4 environment = Sprockets::Environment.new 5 environment.append_path "assets/javascripts" 6 environment.append_path "assets/stylessheets" 7 8 Rake::SprocketsTask.new do |t| 9 t.environment = environment 10 t.output = "./public/assets" 11 t.assets = %w( application.js application.css ) 12 end Monday 01 July 13
36. rake-pipeline Alternative, built by Yehuda Katz Used by LivingSocial Follows a similar pipeline pattern for processing static assets  livingsocial/rake-pipeline Monday 01 July 13
37. Thanks! Go take control of your static assets! Monday 01 July 13