Slide 1
Slide 1 text
Rails Assets
The solution to assets management in Rails
London, 9.12.2013
Slide 2
Slide 2 text
Tymon Tobolski
About me
@iteamon github.com/teamon
DRUG
Slide 3
Slide 3 text
March 14-16th 2014
Wrocław Poland
wrocloverb.com
Slide 4
Slide 4 text
What is the problem?
• Managing assets in rails app is hard
• Tons of incompatible javascript libraries
• Unmaintainable legacy projects
Slide 5
Slide 5 text
Existing solutions
• vendor/assets
• bower
• component
• browserify (npm)
• asset gems
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
bundle install
Slide 10
Slide 10 text
application.js
!
!
!
//= require_self
+//= require bootstrap
+//= require angular
+//= require leaflet
//= require_tree .
application.css
!
!
/*
*= require_self
+*= require bootstrap
+*= require leaflet
*= require_tree .
*/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Pros
• No more vendor/assets
• Proper versioning
• Dependency resolution
• No additional build step
• Already used in few production apps with no big
issues
Slide 14
Slide 14 text
How it works?
Slide 15
Slide 15 text
Bower registry
name => git repository + meta
Slide 16
Slide 16 text
bower.json
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/js/bootstrap.js",
"./dist/css/bootstrap.css"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
Slide 17
Slide 17 text
Gem name
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/js/bootstrap.js",
"./dist/css/bootstrap.css"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
Slide 18
Slide 18 text
Gem name
bootstrap => rails-assets-bootstrap
Slide 19
Slide 19 text
Version
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/js/bootstrap.js",
"./dist/css/bootstrap.css"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
Slide 20
Slide 20 text
Version
module RailsAssetsBootstrap
VERSION = "3.0.3"
end
Slide 21
Slide 21 text
Manifests
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/js/bootstrap.js",
"./dist/css/bootstrap.css"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
Slide 22
Slide 22 text
Manifest - sprockets
# application.js
//= require bootstrap
Simple component
vendor/assets/javascripts/
- bootstrap.js
- bootstrap/bootstrap.js
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Dependencies
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/js/bootstrap.js",
"./dist/css/bootstrap.css"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
"## 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
Slide 28
Slide 28 text
Challenges
Slide 29
Slide 29 text
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”
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Other issues
• version spec differences
• bundler API - no versions in dependencies API request
• web frontend is essential
• rails-assets-jquery vs jquery-rails conflicts
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
We need your help
• Spread the word
• Improve bower.json files
• Bug discovering and fixing
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Questions?