Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails Assets LRUG
Search
Tymon Tobolski
December 09, 2013
Programming
0
7.3k
Rails Assets LRUG
Talk about
http://rails-assets.org
that I gave on London Ruby User Group
Tymon Tobolski
December 09, 2013
Tweet
Share
More Decks by Tymon Tobolski
See All by Tymon Tobolski
Only possible with Elixir - ubots Case Study
teamon
0
200
Fun with Elixir Macros
teamon
1
410
Elixir GenStage & Flow
teamon
2
900
Elixir - Bydgoszcz Web Development Meetup
teamon
2
690
Sidekiq
teamon
1
140
Git - Monterail style
teamon
1
140
Rails Assets wroc_love.rb
teamon
1
670
Angular replacements for jQuery-based libraries
teamon
1
290
Angular replacements for jQuery-based libraries
teamon
2
290
Other Decks in Programming
See All in Programming
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
150
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Java ジェネリクス入門 2024
nagise
0
610
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Realtime API 入門
riofujimon
0
110
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Designing for humans not robots
tammielis
249
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Music & Morning Musume
bryan
46
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Making Projects Easy
brettharned
115
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Transcript
Rails Assets The solution to assets management in Rails London,
9.12.2013
Tymon Tobolski About me @iteamon github.com/teamon DRUG
March 14-16th 2014 Wrocław Poland wrocloverb.com
What is the problem? • Managing assets in rails app
is hard • Tons of incompatible javascript libraries • Unmaintainable legacy projects
Existing solutions • vendor/assets • bower • component • browserify
(npm) • asset gems
None
None
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
bundle install
application.js ! ! ! //= require_self +//= require bootstrap +//=
require angular +//= require leaflet //= require_tree . application.css ! ! /* *= require_self +*= require bootstrap +*= require leaflet *= require_tree . */
None
None
Pros • No more vendor/assets • Proper versioning • Dependency
resolution • No additional build step • Already used in few production apps with no big issues
How it works?
Bower registry name => git repository + meta
bower.json { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"
], "dependencies": { "jquery": ">= 1.9.0" } }
Gem name { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js",
"./dist/css/bootstrap.css" ], "dependencies": { "jquery": ">= 1.9.0" } }
Gem name bootstrap => rails-assets-bootstrap
Version { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"
], "dependencies": { "jquery": ">= 1.9.0" } }
Version module RailsAssetsBootstrap VERSION = "3.0.3" end
Manifests { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"
], "dependencies": { "jquery": ">= 1.9.0" } }
Manifest - sprockets # application.js //= require bootstrap Simple component
vendor/assets/javascripts/ - bootstrap.js - bootstrap/bootstrap.js
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
Dependencies { "name": "bootstrap", "version": "3.0.3", "main": [ "./dist/js/bootstrap.js", "./dist/css/bootstrap.css"
], "dependencies": { "jquery": ">= 1.9.0" } }
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
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
"## 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
Challenges
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”
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
Other issues • version spec differences • bundler API -
no versions in dependencies API request • web frontend is essential • rails-assets-jquery vs jquery-rails conflicts
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
We need your help • Spread the word • Improve
bower.json files • Bug discovering and fixing
None
Questions?