Rabbit Slide Show

Sinatra w/ Bower

2015-09-19

Description

Sinatraアプリのフロントエンド用パッケージ(JavaScriptやCSSなど)の 管理を楽にするためにBowerやアセットパイプラインを使う話。

Text

Page: 1

Sinatra w/
Bower
Masafumi Yokoyama
勉強会@ Sinatra 札幌
2015-09-19
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 2

自己紹介
@myokoym
江別→札幌→東京
将棋(明日から大会!)
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 3

よろしくお願いします。
m(_ _)m
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 4

話すこと
Sinatraを使ったWebアプリの
JavaScriptパッケージ管理
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 5

きっかけ
RubyGemsっぽくJavaScript
のライブラリを管理したい
手動ダウンロードつらい
dependency hell
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 6

きっかけ
Bowerを使うといいらしい
Sinatraと一緒に使いたい
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 7

アジェンダ
Bowerとは
Sinatraと一緒に使うには
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 8

アジェンダ
Bowerとは
Sinatraと一緒に使うには
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 9

RubyとJavaScriptの
パッケージ管理の対比
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 10

おさらい
RubyGems
Bundler
Rake
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 11

RubyGems
Rubyのパッケージ管理のしく
み
APTやHomebrewなどのRuby版
ライブラリなどをコマンド一発
でインストールできる
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 12

Bundler
プロジェクトで使うgemを管
理するしくみ
バージョンを指定できる
開発環境と本番環境でずれるのを防
げる
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 13

Rake
タスク管理ツール
MakeのRuby版
ビルドやパッケージングなどを
自動化
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 14

JavaScript
npm
Bower
Grunt/gulp
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 15

npm
JavaScript(Node.js)のパッ
ケージマネージャ
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 16

npm
パッケージ作成や登録
RubyGemsの機能
プロジェクトで使うバージョン
の指定や依存関係の管理
Bundlerの機能
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 17

npm
パッケージ情報や依存関係は
package.jsonに記述
RubyGemsでいう.gemspec
BundlerでいうGemfile
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 18

npm
デフォルトでローカルディレク
トリにインストール
node_modulesディレクトリ
-gオプションでシステムのグロ
ーバルに
gem installのデフォルトはこちら
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 19

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

Page: 20

Bower
デフォルトでローカルディレク
トリにインストール
bower_componentsディレクトリ
システムのグローバルにインス
トールすることはない
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 21

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

Page: 22

Grunt/gulp
タスク管理ツール
Rake
フロントエンドでは結構重要
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 23

なぜ重要か
配信する必要があるため
必要なファイルだけ取り出したり
圧縮したり
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 24

対比表
JavaScript
npm -g
npm
Bower
Grunt/gulp
Sinatra w/ Bower
Ruby
RubyGems
RubyGems
+Bundler
RubyGems
+Bundler
Rake
Powered by Rabbit 2.1.9

Page: 25

ハーフタイム
進捗どうですか?
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 26

アジェンダ
Bowerとは
Sinatraと一緒に使うには
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 27

やり方
生のbower.jsonを使う
Rails Assetsを使う
アセットパイプライン
別のアプリケーション
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 28

生のbower.jsonを使う
1. bower_componentsにイン
ストール
2. publicにコピー
Rakeタスクに組み込むなど
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 29

生のbower.jsonを使う
メリット
Bowerの機能をそのまま使える
デメリット
パッケージ管理のしくみが複数でき
てしまうので複雑になる
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 30

Rails Assetsを使う
Rails向けのアセット管理手法
https://rails-assets.org/
アセットパイプライン対応
内部でBowerを使っている
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 31

アセット
ブラウザに配信するファイル
JavaScript、CSS、画像など
publicに配置するもの
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 32

アセットパイプライン
アセットを配信用に変換
コンパイル(.sass、.coffeeなど)
結合
通信回数を減らす
圧縮(minify)
通信量を減らす
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 33

Sinatra×
アセットパイプライン
Sinatra AssetPack
https://github.com/rstacruz/sinatra-assetpack
Sinatra Asset Pipeline
https://github.com/kalasjocke/sinatra-asset-
pipeline
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 34

Sinatra×
Rails Assets
rails-assets-sinatra
https://github.com/rails-assets/rails-assets-
sinatra
Sinatra Asset Pipelineを使用
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 35

rails-assets-sinatra
how to easily integrate
Sinatra with Bower.
Node.js is not required.
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 36

rails-assets-sinatra
how to easily integrate
Sinatra with Bower.
Node.js is not required.
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 37

キタ━(゚∀゚)━!!
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 38

デモ
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 39

別のアプリケーション
SinatraはWeb APIとして使う
フロントエンドはMVCフレー
ムワークなどを使う
Bowerでパッケージ管理
Sinatra w/ Bower
Powered by Rabbit 2.1.9

Page: 40

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

Other slides