Taking advantage of Bower in your Rails 4 App

class: center, middle

# Bower

---
# External libraries

1. jQuery
1. Ember
1. Bootstrap
1. Knockout.js
1. D3
1. C3

---
# How do you manage external library assets?

1. `gem 'jquery-rails'`
1. `cp jquery.min.js app/assets/javascripts/`
1. `cp jquery.min.js vendor/assets/javascripts/`
1. `<script src="//code.jquery.com/jquery.min.js"></script>`

---

# Bundler

1. Author's gem update is always late
1. Solving unrelated dependencies

---

# Copying

1. Manual work
  1. Javascript
  1. CSS
1. Finding the correct repo
  1. "Hey, where did I get this from?"
  1. "Is this thing up to date?"

---

# CDN

1. \#TANGODOWN
1. Closed environment

---

# Node.js' - Bower

## A package manager for the web

### Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

[http://bower.io/](http://bower.io/)

---
class: center, middle
# Bower + Rails = ❤
---
class: center, middle
## `npm install -g bower`

---
class: middle
# .bowerrc
```javascript
{
  "directory": "vendor/assets/components"
}
```
(in your app root)
---
## `# bower init`
```text
? name: my_app
? version: 0.0.1
? description: My Description
? main file:
? what types of modules does this package expose?:
? keywords:
? authors: Yuri Kovalov <yuri@yurikoval.com>
? license: MIT
? homepage: https://github.com/yurikoval/my_app
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No

{
  name: 'my_app',
  version: '0.0.1',
  homepage: 'https://github.com/yurikoval/my_app',
  authors: [
    'Yuri Kovalov %lt;yuri@yurikoval.com%gt;'
  ],
  description: 'My Description',
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good?: Yes
```
---
## `# cat bower.json`
```
{
  "name": "my_app",
  "version": "0.0.1",
  "homepage": "https://github.com/yurikoval/my_app",
  "authors": [
    "Yuri Kovalov <yuri@yurikoval.com>"
  ],
  "description": "My Description",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "ember": "~1.6",
    "ember-data": "~1.0.0-beta.8"
  }
}
```
---
## `# bower install`
```
bower ember#~1.6            not-cached git://github.com/components/ember.git#~1.6
bower handlebars#>= 2.0.0 < 3.0.0      resolved git://github.com/components/handlebars.js.git#2.0.0

... ...

bower jquery#>= 1.7.0 <= 2.1.0          extract archive.tar.gz
bower jquery#>= 1.7.0 <= 2.1.0         resolved git://github.com/jquery/jquery.git#2.1.0

... ...

bower ember-data#~1.0.0-beta.8          install ember-data#1.0.0-beta.14.1
bower ember#>= 1.8.1 < 2.0.0            install ember#1.9.1
bower handlebars#>= 2.0.0 < 3.0.0       install handlebars#2.0.0
bower jquery#>= 1.7.0 <= 2.1.0          install jquery#2.1.0

ember-data#1.0.0-beta.14.1 vendor/assets/components/ember-data
└── ember#1.9.1

ember#1.9.1 vendor/assets/components/ember
├── handlebars#2.0.0
└── jquery#2.1.0

handlebars#2.0.0 vendor/assets/components/handlebars

jquery#2.1.0 vendor/assets/components/jquery
```
---
## `# ls -l vendor/assets/components`
```shell
drwxr-xr-x  15 yuri  staff  510 Jan 19 17:07 ember
drwxr-xr-x  14 yuri  staff  476 Jan 19 17:07 ember-data
drwxr-xr-x  19 yuri  staff  646 Jan 19 17:07 handlebars
drwxr-xr-x   7 yuri  staff  238 Jan 19 17:07 jquery
```
---
# Asset Pipeline

### Path to your new assets
```ruby
# config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
```

### Include new assets in manifest file
```javascript
/* application.js */
//= require ember.min
//= require ember-data.min
```
---
class: middle
# Quick Install

```sh
# bower install ember --save
# bower install ember-data --save
```
---
# Deploying to Heroku
1. Add the `rails_12factor` gem.
1. `heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'`

---
# Make it work with EngineYard
1. Add `package.json` to app root
```json
{
  "name": "app_name",
  "version": "0.0.1",
  "dependencies": {
    "bower": "1.1.0"
  }
}
```
(this runs `npm install` for bower)
2. Add a deploy hook in `RAILS_ROOT/deploy/before_compile_assets.rb`
```ruby
run! './node_modules/.bin/bower install'
```

(If all fails, can just commit the libs into the repo.)
---
# 課題

1. Does it work with `asset_sync`?

---
# Reference
1. [Taking advantage of Bower in your Rails 4 App](http://dotwell.io/taking-advantage-of-bower-in-your-rails-4-app/)
1. [Using Rails+Bower on Heroku](https://gist.github.com/afeld/5704079)
1. [EngineYard で動く Rails アプリで Bower を使う](http://qiita.com/milkcocoa/items/a6988994ef3c4928dc62)