Rails+webpackの落ち穂拾い

Rails+webpackの落ち穂拾い
@kuy / Yuki Kodama
2016/06/10 at Modern Web App LT!

View Slide

自己紹介
@kuy (カイ) / Yuki Kodama
株式会社ジャパンベンチャーリサーチ
entrepedia（アントレペディア）の開発・運用
AWS, Ruby on Rails, JavaScript (React + Redux)
● redux-sagaで非同期処理と戦う
● Reduxでコンポーネントを再利用する
● Reduxのmiddlewareを積極的に使っていく
● ・・・など
Qiita の記事
発表 ● なぜReduxを使うのか

View Slide

Rails + webpack 構成への移行（2週間前）
一筋縄ではいかなかった
↑ 思ったよりしょぼいな・・・

View Slide

妥協点
● assetsのファイル数が多すぎて移行できる気がしない
● gemで提供されているjQuery、関連ライブラリどうしよう
● モバイル版のこと忘れてた
これ、終わらないよ？

View Slide

何が目的だったのか思い出す
● デプロイ時間の短縮
● レガシーコードの駆逐
● レガシーライブラリへの依存解消
● フロントエンド向けの自動テストの導入

View Slide

デプロイ時間の変化
Rails標準の構成：10分程度
browserify-rails導入：15分程度
Babel+React+Redux導入：45分程度

View Slide

妥協点
● assetsのファイル数が多すぎて移行できる気がしない
○ → 今後メンテナンスをする複雑な機能に絞って移行
○ → 243個のJSファイルのうち187個のみ
○ → CSSと画像ファイルはほぼ移行せず
● gemで提供されているjQuery、関連ライブラリどうしよう
○ → jQuery UIとか可能な限り削除した
○ → 移行メリットの薄いものは放置現状維持
● モバイル版のこと忘れてた・・・
○ → pure.css + 最小限のJSを維持（超軽量）

View Slide

デプロイ時間の変化
Rails標準の構成：10分程度
browserify-rails導入：15分程度
Babel+React+Redux導入：40分程度
webpack-rails導入：10分程度（最速 2分以内）
快適なデプロイ時間を取り戻した！
browserify-rails にお引き取りいただいた結果・・・

View Slide

やっとこ落ち穂拾い

View Slide

落ち穂拾い #1：I18n
Reactコンポーネントの国際化どうしよう
I18n.t(...) みたいなやつ使いたい
● Gemの i18n-js を試してみた
○ Middlewareレベルで特定JSファイルの読み込みを横取りしてヘルパーと
localeデータを流し込む方式
○ i18n.jsは読み込まれるけど、translations.jsがダメ
○ Rails Middlewareの処理順をカスタムしてる人にはつらい
もっとシンプルなやり方でいいんじゃない？

View Slide

落ち穂拾い #1：I18n
chrome/webpack-rails-i18n-js-plugin を利用
● ヘルパー関数は Gem の i18n-js のものを利用
● やってることが単純なので最悪自作すればいい
● Gemを増やさずに済んだ
webpackのビルドが走ったらlocaleファイルを読み込んで
共通bundleに追加してくれればいい（webpack側に寄せる）

View Slide

落ち穂拾い #2：画像ファイルパス
Reactコンポーネントでassetsの画像を表示したい
image_tagを使いたい（ハッシュ付き）
● とりあえずは必要な画像パスだけscriptタグにJSONで書き出し
● localeファイルと同じ方法で解決できないか検討中
まだまだ俺たちの戦いは（ｒｙ

View Slide

Thank you!

View Slide

Rails+webpackの落ち穂拾い

Rails+webpackの落ち穂拾い

Yuki Kodama

More Decks by Yuki Kodama

Other Decks in Programming

Featured

Transcript