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.2k
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
180
Fun with Elixir Macros
teamon
1
380
Elixir GenStage & Flow
teamon
2
840
Elixir - Bydgoszcz Web Development Meetup
teamon
2
580
Sidekiq
teamon
1
120
Git - Monterail style
teamon
1
130
Rails Assets wroc_love.rb
teamon
1
630
Angular replacements for jQuery-based libraries
teamon
1
260
Angular replacements for jQuery-based libraries
teamon
2
290
Other Decks in Programming
See All in Programming
What We Can Learn From OSS
inouehi
0
400
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
370
Ruby GitHub Packages
bkuhlmann
0
620
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
Site Reliability Engineering for GMO
pyama86
6
960
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
260
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
Code Review Best Practice
trishagee
54
15k
Fireside Chat
paigeccino
20
2.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
The Language of Interfaces
destraynor
151
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
BBQ
matthewcrist
80
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
What's new in Ruby 2.0
geeforr
337
31k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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?