Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rails+webpackの落ち穂拾い
Search
Yuki Kodama
June 10, 2016
Programming
0
1.8k
Rails+webpackの落ち穂拾い
Railsでwebpackによるビルド環境を整備した際の苦労話です。
Yuki Kodama
June 10, 2016
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
マイクロフロントエンドの現状確認
kuy
0
450
Reason
kuy
1
2.3k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.6k
redux-sagaで副作用をコントロールする
kuy
4
1.6k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
570
Other Decks in Programming
See All in Programming
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
画像コンペでのベースラインモデルの育て方
tattaka
3
1k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
740
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
実践!App Intents対応
yuukiw00w
0
110
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
NEWT Backend Evolution
xpromx
1
170
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Invisible Side of Design
smashingmag
301
51k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Visualization
eitanlees
146
16k
Balancing Empowerment & Direction
lara
1
530
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Code Reviewing Like a Champion
maltzj
524
40k
Faster Mobile Websites
deanohume
308
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Transcript
Rails+webpackの落ち穂拾い @kuy / Yuki Kodama 2016/06/10 at Modern Web App
LT!
自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ entrepedia(アントレペディア)の開発・運用 AWS, Ruby
on Rails, JavaScript (React + Redux) • redux-sagaで非同期処理と戦う • Reduxでコンポーネントを再利用する • Reduxのmiddlewareを積極的に使っていく • ・・・など Qiita の記事 発表 • なぜReduxを使うのか
Rails + webpack 構成への移行(2週間前) 一筋縄ではいかなかった ↑ 思ったよりしょぼいな・・・
妥協点 • assetsのファイル数が多すぎて移行できる気がしない • gemで提供されているjQuery、関連ライブラリどうしよう • モバイル版のこと忘れてた これ、終わらないよ?
何が目的だったのか思い出す • デプロイ時間の短縮 • レガシーコードの駆逐 • レガシーライブラリへの依存解消 • フロントエンド向けの自動テストの導入
デプロイ時間の変化 Rails標準の構成:10分程度 browserify-rails導入:15分程度 Babel+React+Redux導入:45分程度
妥協点 • assetsのファイル数が多すぎて移行できる気がしない ◦ → 今後メンテナンスをする複雑な機能に絞って移行 ◦ → 243個のJSファイルのうち187個のみ ◦
→ CSSと画像ファイルはほぼ移行せず • gemで提供されているjQuery、関連ライブラリどうしよう ◦ → jQuery UIとか可能な限り削除した ◦ → 移行メリットの薄いものは放置現状維持 • モバイル版のこと忘れてた・・・ ◦ → pure.css + 最小限のJSを維持(超軽量)
デプロイ時間の変化 Rails標準の構成:10分程度 browserify-rails導入:15分程度 Babel+React+Redux導入:40分程度 webpack-rails導入:10分程度(最速 2分以内) 快適なデプロイ時間を取り戻した! browserify-rails にお引き取りいただいた結果・・・
やっとこ落ち穂拾い
落ち穂拾い #1:I18n Reactコンポーネントの国際化どうしよう I18n.t(...) みたいなやつ使いたい • Gemの i18n-js を試してみた ◦
Middlewareレベルで特定JSファイルの読み込みを横取りしてヘルパーと localeデータを流し込む方式 ◦ i18n.jsは読み込まれるけど、translations.jsがダメ ◦ Rails Middlewareの処理順をカスタムしてる人にはつらい もっとシンプルなやり方でいいんじゃない?
落ち穂拾い #1:I18n chrome/webpack-rails-i18n-js-plugin を利用 • ヘルパー関数は Gem の i18n-js のものを利用
• やってることが単純なので最悪自作すればいい • Gemを増やさずに済んだ webpackのビルドが走ったらlocaleファイルを読み込んで 共通bundleに追加してくれればいい(webpack側に寄せる)
落ち穂拾い #2:画像ファイルパス Reactコンポーネントでassetsの画像を表示したい image_tagを使いたい(ハッシュ付き) • とりあえずは必要な画像パスだけscriptタグにJSONで書き出し • localeファイルと同じ方法で解決できないか検討中 まだまだ俺たちの戦いは(ry
Thank you!