Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails Assets LRUG

Rails Assets LRUG

Talk about http://rails-assets.org that I gave on London Ruby User Group

31bfdacd5334a8c414b25fd66a40a092?s=128

Tymon Tobolski

December 09, 2013
Tweet

More Decks by Tymon Tobolski

Other Decks in Programming

Transcript

  1. Rails Assets The solution to assets management in Rails London,

    9.12.2013
  2. Tymon Tobolski About me @iteamon github.com/teamon DRUG

  3. March 14-16th 2014 Wrocław Poland wrocloverb.com

  4. What is the problem? • Managing assets in rails app

    is hard • Tons of incompatible javascript libraries • Unmaintainable legacy projects
  5. Existing solutions • vendor/assets • bower • component • browserify

    (npm) • asset gems
  6. None
  7. None
  8. source 'https://rubygems.org' +source 'https://rails-assets.org' ! gem 'rails' ! group :assets

    do gem 'sass-rails' gem 'uglifier' gem 'coffee-rails' + gem 'rails-assets-bootstrap' + gem 'rails-assets-angular' + gem 'rails-assets-leaflet' end
  9. bundle install

  10. application.js ! ! ! //= require_self +//= require bootstrap +//=

    require angular +//= require leaflet //= require_tree . application.css ! ! /* *= require_self +*= require bootstrap +*= require leaflet *= require_tree . */
  11. None
  12. None
  13. Pros • No more vendor/assets • Proper versioning • Dependency

    resolution • No additional build step • Already used in few production apps with no big issues
  14. How it works?

  15. Bower registry name => git repository + meta

  16. bower.json { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"

    ], "dependencies": { "jquery": ">= 1.9.0" } }
  17. Gem name { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js",

    "./dist/css/bootstrap.css" ], "dependencies": { "jquery": ">= 1.9.0" } }
  18. Gem name bootstrap => rails-assets-bootstrap

  19. Version { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"

    ], "dependencies": { "jquery": ">= 1.9.0" } }
  20. Version module RailsAssetsBootstrap VERSION = "3.0.3" end

  21. Manifests { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"

    ], "dependencies": { "jquery": ">= 1.9.0" } }
  22. Manifest - sprockets # application.js //= require bootstrap Simple component

    vendor/assets/javascripts/ - bootstrap.js - bootstrap/bootstrap.js
  23. Manifest - sprockets # application.js //= require moment //= require

    moment/lang/pl More complex component vendor/assets/javascripts/ - moment.js - moment/moment.js - moment/lang/en.js - moment/lang/pl.js
  24. Dependencies { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"

    ], "dependencies": { "jquery": ">= 1.9.0" } }
  25. gemspec lib = File.expand_path('../lib', __FILE__) $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) require 'rails-assets-bootstrap/version'

    ! Gem::Specification.new do |spec| spec.name = "rails-assets-bootstrap" spec.version = RailsAssetsBootstrap::VERSION # ... spec.add_dependency "rails-assets-jquery", ">= 1.9.0" # ... end
  26. Rails Engine require "rails-assets-bootstrap/version" ! require "rails-assets-jquery" ! if defined?(Rails)

    module RailsAssetsBootstrap class Engine < ::Rails::Engine # Rails -> use vendor directory. end end end
  27. "## lib $ "## rails-assets-bootstrap $ $ &## version.rb $

    &## rails-assets-bootstrap.rb "## vendor $ &## assets $ "## images $ $ &## bootstrap $ $ &## assets $ $ &## ico $ $ "## apple-touch-icon-114-precomposed.png $ $ "## apple-touch-icon-144-precomposed.png $ $ "## apple-touch-icon-57-precomposed.png $ $ "## apple-touch-icon-72-precomposed.png $ $ &## favicon.png $ "## javascripts $ $ "## bootstrap $ $ $ &## bootstrap.js $ $ &## bootstrap.js $ &## stylesheets $ "## bootstrap $ $ "## bootstrap-theme.scss $ $ &## bootstrap.scss $ &## bootstrap.scss "## Gemfile "## README.md "## Rakefile &## rails-assets-bootstrap.gemspec
  28. Challenges

  29. bower is a mess • just git clone • duplicates,

    momentjs vs moment, swipe vs Swipe • separate repositories, e.g angular-bower • {bower, package, component}.json - unreliable • bower info missing ”main”
  30. bower is a mess • no common structure • lib.js

    at top level • src, dist, release, etc. directories • .{js,css}.min duplicates • not compiled packages • missing dependencies
  31. Other issues • version spec differences • bundler API -

    no versions in dependencies API request • web frontend is essential • rails-assets-jquery vs jquery-rails conflicts
  32. Technical issues • Gem::Indexer bug • global bower cache -

    custom bower fork • auto updates via bower api • index locking • background jobs, blocking • weak performance • do as much as possible in memory
  33. We need your help • Spread the word • Improve

    bower.json files • Bug discovering and fixing
  34. None
  35. Questions?