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.4k
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
210
Fun with Elixir Macros
teamon
1
430
Elixir GenStage & Flow
teamon
2
950
Elixir - Bydgoszcz Web Development Meetup
teamon
2
750
Sidekiq
teamon
1
140
Git - Monterail style
teamon
1
150
Rails Assets wroc_love.rb
teamon
1
690
Angular replacements for jQuery-based libraries
teamon
1
300
Angular replacements for jQuery-based libraries
teamon
2
290
Other Decks in Programming
See All in Programming
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
380
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
220
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
読まないコードリーディング術
hisaju
0
110
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
PRレビューのお供にDanger
stoticdev
1
240
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
How to train your dragon (web standard)
notwaldorf
91
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
GitHub's CSS Performance
jonrohan
1030
460k
We Have a Design System, Now What?
morganepeng
51
7.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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?