React導入時の苦労話とこれからについて

2017/5/23 ヒカラボ 「大規模サービスがリスクをとってまでモダンな開発環境にリプレイスした理由～ここだけの苦労話や手法を交えお話します～ 」での発表資料です。

Transcript

1. 3FBDUಋೖ࣌ͷۤ࿑࿩ ͱ͜Ε͔Βʹ͍ͭͯ גࣜձࣾ
   ΤχάϞ
   
   ࢁຊ
   ߒو
   
   ώΧˑϥϘ
2. BUYMA について ファッション系のCtoC ECサービス 海外の出品者と国内の購入者をつなぐ https://www.buyma.com/
3. • サービス開始から10年以上 • PHP & Rails (移行中) • コミットログ見るとすごい古いのがある
4. アジェンダ • React導入の経緯 • 導入時の辛み • 非SPAなReact • レガシーブラウザ対応 • ビルド高速化 • これからの課題
5. 3FBDUಋೖͷܦҢ
6. React導入の経緯 • お問い合わせ機能リプレース案件 • チームはエンジニア3人 + α • 超レガシーなPHP ⇢ Rails + React
7. 技術スタック • React • Redux • Babel • Webpack • Gulp • Rails（API）
8. ಋೖ࣌ͷਏΈ
9. • 大規模なサービスに部分的に取り入れる際の知見が少 ない • React領域と非React領域のデータ連携 • レガシーブラウザ対応がつらい • IE9 • Androidの標準ブラウザ
10. 非SPAなReact
11. 非SPAなReact ϔομʔ α Π υ ό ʔ 3FBDUྖҬ
12. React領域と非React領域の連携 ϔομʔ α Π υ ό ʔ 3FBDUྖҬ ͬͪ͜Ͱ ͷมߋΛ
13. React領域と非React領域の連携 ϔομʔ α Π υ ό ʔ 3FBDUྖҬ ఻͑Δ ఻͑Δ
14. 例えば… • 未読メッセージ数 • メッセージを読み終わったら未読数を減らしたい！ • 既読にする、未読に戻す機能で増減させたい！
15. Redux Middleware + jQuery で解決
16. • データのフェッチや更新アクションで処理を挟み込む • APIの返り値で未読数を受け取る • ついでにStoreも更新する K2VFSZͰඇ 3FBDUྖҬΛߋ৽ 4UPSFΛߋ৽͢Δ ΞΫγϣϯΛൃߦ
17. • Middlewareに処理を隔離できた • jQueryはできれば使いたくなかった
18. レガシーブラウザ対応 • 基本はBabelでES5にトランスパイルしている • だがES5が動かないブラウザがある • というか Android4.0標準ブラウザ ← こいつ のこと
19. 対応しなければならない辛い理由 お問い合わせ以外の機能ではレガシーブラウザでも動く。 BUYMAでは商品購入⇢出品者と購入者の問い合わせ⇢ 取引完了というフローなので、問い合わせが出来ないと取 引完了までのフローが止まってしまう。
20. どう対応したか • 必要最低限の問い合わせ機能を揃えた非Reactページ (通称：普通ページ)を用意 • ブラウザを判定して普通ページにリダイレクト
21. ブラウザ判定部分 • ES5のAPIや関数が存在しない • API実行してエラーになる
22. 反省点 • 予めどのブラウザをサポートするかビジネス側と合意を 取るべきだった • リリース後に発覚して急いで実装した • セキュリティ面でもレガシーすぎるブラウザはサービス 全体でシャットアウトすべき
23. Ϗϧυߴ଎Խ
24. エントリーポイントの増加 お問い合わせ機能以外にもWebpackが使用されることが 増え、エントリーポイントが増加している
25. エントリーポイントの増加
26. ビルド所要時間: 11秒
27. 解決方法 • WebpackDllPlugin • HappyPack
28. WebpackDllPlugin
29. WebpackDllPlugin • 予め外部モジュールを別のBundleとして切り出す • メインのBundleはDllReferencePluginで参照 • https://github.com/webpack/docs/wiki/list-of- plugins#dllplugin
30. WebpackDllPlugin • 予めビルドしておくことで毎回ビルドしなくて済むためビ ルド時間が短縮できる！ • サイズの大きいライブラリを共通ファイルとして切り出せ るのでトータルのファイルサイズが小さくなる！ （CommonChunkPluginと同様の効果)
31. HappyPack
32. HappyPack • ビルド高速化用プラグイン • 複数のワーカースレッドでビルドする • 変更されたファイルのみビルドする • https://github.com/amireh/happypack
33. ビルド所要時間: 6秒 結果！
34. ࠓޙͷ՝୊
35. • エントリーポイント増加 • ライブラリのバージョン追従
36. エントリーポイントの増加 • 今後もエントリーポイントは増え続ける • ビルド高速化にも限度 • ドメインごとに分割してビルドする？ • デプロイが複雑化しそう • webpack.config.jsの管理が大変そう
37. ライブラリのバージョン追従 • 愚直に上げていくしか無い • 誰かやるだろうでは誰もやらない • 強い気持ちと仕組みが必要
38. ײ૝
39. • 古き良き片手間JavaScriptの時代は終 わった • フロントエンドの専門家が必要とされる時 代
40. We are hiring!