Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Rails+webpackの落ち穂拾い
Yuki Kodama
June 10, 2016
Programming
0
1.5k
Rails+webpackの落ち穂拾い
Railsでwebpackによるビルド環境を整備した際の苦労話です。
Yuki Kodama
June 10, 2016
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
Reason
kuy
1
1.9k
redux-towerでルーティングを制する
kuy
4
2.7k
Should I use redux-saga or not?
kuy
2
3.8k
redux-sagaで副作用をコントロールする
kuy
4
1.4k
なぜReduxを使うのか
kuy
25
10k
意地でもReduxを使う
kuy
1
520
Other Decks in Programming
See All in Programming
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
760
CSE360 Tutorial 07
javiergs
PRO
0
100
GitHub Actions を導入した経緯
tamago3keran
1
430
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
シェーダー氷山発掘記
logilabo
0
140
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
180
Vite でお手軽 Vue.js の環境構築
azuki
2
180
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
330
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
110
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
230
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
3.9k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
A Modern Web Designer's Workflow
chriscoyier
689
180k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.2k
For a Future-Friendly Web
brad_frost
166
7.4k
Unsuck your backbone
ammeep
659
55k
Building Applications with DynamoDB
mza
83
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Practical Orchestrator
shlominoach
178
8.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
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!