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
350
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
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
API Platform for Laravel
dunglas
1
370
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Producing Creativity
orderedlist
PRO
340
39k
Being A Developer After 40
akosma
84
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Statistics for Hackers
jakevdp
794
220k
Clear Off the Table
cherdarchuk
91
320k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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!