Rails Assets LRUG

Transcript

1. 1.

   Rails Assets The solution to assets management in Rails London,

   9.12.2013
2. 2.

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

3. 3.

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

4. 4.

   What is the problem? • Managing assets in rails app

   is hard • Tons of incompatible javascript libraries • Unmaintainable legacy projects
5. 5.

   Existing solutions • vendor/assets • bower • component • browserify

   (npm) • asset gems
6. 6.

   None
7. 7.

   None
8. 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. 9.

   bundle install

10. 10.

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

    require angular +//= require leaflet //= require_tree . application.css ! ! /* *= require_self +*= require bootstrap +*= require leaflet *= require_tree . */
11. 11.

    None
12. 12.

    None
13. 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. 14.

    How it works?

15. 15.

    Bower registry name => git repository + meta

16. 16.

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

    ], "dependencies": { "jquery": ">= 1.9.0" } }
17. 17.

    Gem name { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js",

    "./dist/css/bootstrap.css" ], "dependencies": { "jquery": ">= 1.9.0" } }
18. 18.

    Gem name bootstrap => rails-assets-bootstrap

19. 19.

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

    ], "dependencies": { "jquery": ">= 1.9.0" } }
20. 20.

    Version module RailsAssetsBootstrap VERSION = "3.0.3" end

21. 21.

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

    ], "dependencies": { "jquery": ">= 1.9.0" } }
22. 22.

    Manifest - sprockets # application.js //= require bootstrap Simple component

    vendor/assets/javascripts/ - bootstrap.js - bootstrap/bootstrap.js
23. 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. 24.

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

    ], "dependencies": { "jquery": ">= 1.9.0" } }
25. 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. 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. 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. 28.

    Challenges

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

    We need your help • Spread the word • Improve

    bower.json files • Bug discovering and fixing
34. 34.

    None
35. 35.

    Questions?