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のやり方がおすすめ * 別アプリも有力な選択肢