Sinatra w/ Bower

# : subtitle # サブタイトル : author

Masafumi Yokoyama

# : institution # 所属 : content-source

勉強会@Sinatra札幌

: date

2015-09-19

: allotted-time

50m

: theme

nyankosakana

自己紹介

* @myokoym
* 江別→札幌→東京
* 将棋(明日から大会!)

よろしくお願いします。nnm(_ _)m

話すこと

((‘tag:center’)) ((Sinatra))を使ったWebアプリのn JavaScript((*パッケージ管理*))

きっかけ

* RubyGemsっぽくJavaScriptのライブラリを管理したい
  * 手動ダウンロードつらい
  * dependency hell

きっかけ

* Bowerを使うといいらしい
* Sinatraと一緒に使いたい

アジェンダ

* Bowerとは
* Sinatraと一緒に使うには

アジェンダ

* ((*Bowerとは*))
* Sinatraと一緒に使うには

RubyとJavaScriptのnパッケージ管理の対比

おさらい

* RubyGems
* Bundler
* Rake

RubyGems

* Rubyのパッケージ管理のしくみ
  * APTやHomebrewなどのRuby版
* ライブラリなどをコマンド一発でインストールできる

Bundler

* プロジェクトで使うgemを管理するしくみ
* バージョンを指定できる
  * 開発環境と本番環境でずれるのを防げる 

Rake

* タスク管理ツール
  * MakeのRuby版
* ビルドやパッケージングなどを自動化

JavaScript

* npm
* Bower
* Grunt/gulp

npm

* JavaScript(Node.js)のパッケージマネージャ

npm

* パッケージ作成や登録
  * RubyGemsの機能
* プロジェクトで使うバージョンの指定や依存関係の管理
  * Bundlerの機能

npm

* パッケージ情報や依存関係はpackage.jsonに記述
  * RubyGemsでいう.gemspec
  * BundlerでいうGemfile

npm

* デフォルトでローカルディレクトリにインストール
  * node_modulesディレクトリ
* -gオプションでシステムのグローバルに
  * gem installのデフォルトはこちら

Bower

* Twitter社製のフロントエンド用パッケージマネージャ
* パッケージ情報や依存関係はbower.jsonに記述
* 機能はほぼnpmと同じ

Bower

* デフォルトでローカルディレクトリにインストール
  * bower_componentsディレクトリ
* システムのグローバルにインストールすることはない

npmとBower

* 似ている
  * Bowerはnpmを元に作られた
* 棲み分け
  * npmはサーバーサイド(開発用ツールなど)
  * Bowerはフロントエンド(ブラウザに配信するもの)

Grunt/gulp

* タスク管理ツール
  * Rake
* フロントエンドでは結構重要

なぜ重要か

* 配信する必要があるため
  * 必要なファイルだけ取り出したり
  * 圧縮したり

対比表

# RT

JavaScript, Ruby

npm -g, RubyGems
npm, RubyGems+Bundler
Bower, RubyGems+Bundler
Grunt/gulp, Rake

ハーフタイム

* 進捗どうですか?

アジェンダ

* (('del:Bowerとは'))
* ((*Sinatraと一緒に使うには*))

やり方

* 生のbower.jsonを使う
* Rails Assetsを使う
  * アセットパイプライン
* 別のアプリケーション

生のbower.jsonを使う

* 1. bower_componentsにインストール
* 2. publicにコピー
  * Rakeタスクに組み込むなど

生のbower.jsonを使う

* メリット
  * Bowerの機能をそのまま使える
* デメリット
  * パッケージ管理のしくみが複数できてしまうので複雑になる

Rails Assetsを使う

* Rails向けのアセット管理手法
  * (('note:https://rails-assets.org/'))
  * アセットパイプライン対応
  * 内部でBowerを使っている

アセット

* ブラウザに配信するファイル
* JavaScript、CSS、画像など
* publicに配置するもの

アセットパイプライン

* アセットを配信用に変換
  * コンパイル(.sass、.coffeeなど)
  * 結合
    * (('note:通信回数を減らす'))
  * 圧縮(minify)
    * (('note:通信量を減らす'))

Sinatra×nアセットパイプライン

* Sinatra AssetPack
  * (('note:https://github.com/rstacruz/sinatra-assetpack'))
* Sinatra Asset Pipeline
  * (('note:https://github.com/kalasjocke/sinatra-asset-pipeline'))

Sinatra×nRails Assets

* rails-assets-sinatra
  * (('note:https://github.com/rails-assets/rails-assets-sinatra'))
  * Sinatra Asset Pipelineを使用

rails-assets-sinatra

# blockquote
how to easily integrate Sinatra with Bower. Node.js is not required.

rails-assets-sinatra

# blockquote
how to easily integrate ((*Sinatra with Bower*)). Node.js is not required.

キタ━(゚∀゚)━!!

デモ

property

: as_large_as_possible

true

別のアプリケーション

* SinatraはWeb APIとして使う
* フロントエンドはMVCフレームワークなどを使う
  * Bowerでパッケージ管理

まとめ

* Bowerを使うとフロントエンドのパッケージ管理が楽になる
* Sinatraと使うならrails-assets-sinatraのやり方がおすすめ
* 別アプリも有力な選択肢