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
300
Reason
kuy
1
2.1k
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.3k
redux-sagaで副作用をコントロールする
kuy
4
1.5k
なぜReduxを使うのか
kuy
25
11k
意地でもReduxを使う
kuy
1
530
Other Decks in Programming
See All in Programming
Anthropic Cookbook のおすすめレシピ
schroneko
7
920
Elm 0.19.0 Changes
bkuhlmann
0
490
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.2k
SIMD Parallel Programming with the Vector API
josepaumard
0
160
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
750
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Elm Form Validation
bkuhlmann
0
510
Java 22 Overview
kishida
1
180
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
What We Can Learn From OSS
inouehi
0
420
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
760
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
456
32k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Docker and Python
trallard
34
2.7k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Become a Pro
speakerdeck
PRO
11
4.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Facilitating Awesome Meetings
lara
42
5.6k
GitHub's CSS Performance
jonrohan
1025
450k
It's Worth the Effort
3n
180
27k
Typedesign – Prime Four
hannesfritz
36
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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!