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.7k
Rails+webpackの落ち穂拾い
Railsでwebpackによるビルド環境を整備した際の苦労話です。
Yuki Kodama
June 10, 2016
Tweet
Share
More Decks by Yuki Kodama
See All by Yuki Kodama
マイクロフロントエンドの現状確認
kuy
0
380
Reason
kuy
1
2.2k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.4k
redux-sagaで副作用をコントロールする
kuy
4
1.5k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
540
Other Decks in Programming
See All in Programming
Remix on Hono on Cloudflare Workers
yusukebe
1
300
CSC509 Lecture 09
javiergs
PRO
0
140
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
Jakarta EE meets AI
ivargrimstad
0
220
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
Amazon Qを使ってIaCを触ろう!
maruto
0
410
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
970
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Featured
See All Featured
Happy Clients
brianwarren
98
6.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
4 Signs Your Business is Dying
shpigford
180
21k
Faster Mobile Websites
deanohume
305
30k
Speed Design
sergeychernyshev
25
620
How to train your dragon (web standard)
notwaldorf
88
5.7k
What's new in Ruby 2.0
geeforr
343
31k
GitHub's CSS Performance
jonrohan
1030
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for humans not robots
tammielis
250
25k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
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!