11. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
食べログの状況とプロジェクトの規模感
Ruby on Rails アプリケーション 25個
エントリーポイント 1532ファイル
JSファイル行数 210,760行 ※node_moduleは含まず
1週間にリリースされるissue 100件〜
短期/中期での全体的なリプレースはスコープ外
長期戦!!
12. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
なぜページ毎のリリースを選択しなかったか
リリースの単位が大きくなりすぎるから
• 食べログは多機能&複雑で、ページごとのリリースは数ヶ月〜半年レベル
• 開発期間が長引くほど、機能開発の追従のコストが嵩む
• リリースが単位が大きいほどリスクが大きくなる
大量のコンポーネント2重管理がメンテナンス性を下げるから
• Reactへの移行期間が長く、その間のメンテナンス性低下を許容できない
13. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
部分毎リリースのメリットとデメリット
メリット😚
• リリースのスパンが短く、機能開発の追従のコストが最小限
• コンポーネント2重管理を抑制できる
• 共存状態が長期間に渡っても、メンテナンス性を下げにくい
デメリット🥺
• 参考情報・事例が少ない
→しょうがない!そもそもこの規模の事例が殆どない
→重要度の低い小さい機能から段階的に検証&リリースをする
• ページ内読み込みファイル数が増え、パフォーマンスが低下
→既存のjQuery領域のパフォーマンスを改善する
14. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
ページごとの分離を諦めたわけじゃない
Ruby on Rails Ruby on Rails Next.js?
部分的にReactを導入する ページ内のReact領域を増やす ページ内が全てReactになった時点で
Ruby on Railsから切り離す
→ →
16. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
分離するまで、どうやって共存するのか
Ruby on Rails Ruby on Rails Next.js?
部分的にReactを導入する ページ内のReact領域を増やす ページ内が全てReactになった時点で
Ruby on Railsから切り離す
→ →
17. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
共存手段選定の観点
共存期間が長くなっても大丈夫なように!
jQueryとReactが
疎結合であること
jQueryのカオスを引き継ぎたくない
Reactのリプレースリリース時にjQueryのテストをしたくない
運用が容易であること 共存ページでjQueryの機能開発を今まで通りすすめられるように
18. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
共存手段選定の観点
手段1 Reactのコンポーネントを別パッケージとし、
jQueryベースの既存エントリポイントからimportする
手段2 Reactベースの新規エントリポイントから
ReactのコンポーネントとjQueryのコンポーネント両方をimportする
手段3 jQueryベース,Reactベースのエントリポイントを共存させる
採用!
19. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段1:Reactのコンポーネント別パッケージとし、
jQueryベースの既存エントリポイントからimportする
※イメージです
Ruby on Rails
(slim or erb)
<html>
<head>
<script src=“jquery.js“></script>
<script src=“jquery-bundled.js“></script>
</head>
<body>
<p>食べログだよ!</p>
<a class=“js-click-shop”>店舗ページへ</a>
<div class=“react-hoge-a”>
<!— ここにreactがレンダリングされる —>
</div>
</body>
</html>
jQuery-component-a
jQuery-entrypoint
jQuery-component-b
React-entrypoint
React-component-b
React-component-a
jQuery関連ファイルだけBundle
React関連ファイルだけBundle
React-bundled.js
❌ 不採用
20. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段1:Reactのコンポーネント別パッケージとし、
jQueryベースの既存エントリポイントからimportする
• メリット
• jQueryとReactのコンポーネントが疎結合になる
• ビルドは2回必要だが、それぞれやることはシンプル
• デメリット😨
• Reactの機能をjQueryに組み込んだ状態でおかしな表示や挙動を見つけた時に、ビルド
後のJSの場合、デバッグがしづらく原因の特定が困難。
🙅不採用
21. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段2:Reactベースの新規エントリポイントから
ReactのコンポーネントとjQueryのコンポーネント両方をimportする
※イメージです
Ruby on Rails
(slim or erb)
<html>
<head>
<script src=“react-bundled.js“></script>
</head>
<body>
<p>食べログだよ!</p>
<a class=“js-click-shop”>店舗ページへ</a>
<div class=“react-hoge-a”>
<!— ここにreactがレンダリングされる —>
</div>
</body>
</html>
jQuery-component-a
jQuery-component-b
React-entrypoint
React-component-b
React-component-a
jQuery, React関連ファイル全てを1度にBundle
❌ 不採用
22. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段2:Reactベースの新規エントリポイントから
ReactのコンポーネントとjQueryのコンポーネント両方をimportする
• メリット
• React公式ドキュメントの「DOM 操作プラグインとのインテグレーション」で紹介され
ており、お手本実装がある
• デメリット😨
• jQueryとReactが疎結合にならない
• ReactベースとjQueryベース両方のページで使われている既存モジュールは、
React/jQuery両方エントリポイントで動くことのテストが必要になる
🙅不採用
🙅不採用
23. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段3:jQueryベース, Reactベースのエントリポイントを共存させる
※イメージです
Ruby on Rails
(slim or erb)
<html>
<head>
<script src=“jquery.js“></script>
<script src=“jquery-bundled.js“></script>
<script src=“react-bundled.js“></script>
</head>
<body>
<p>食べログだよ!</p>
<a class=“js-click-shop”>店舗ページへ</a>
<div class=“react-hoge-a”>
<!— ここにreactがレンダリングされる —>
</div>
</body>
</html>
jQuery-component-a
jQuery-entrypoint
jQuery-component-b
React-entrypoint
React-component-b
React-component-a
jQuery関連ファイルだけBundle
React関連ファイルだけBundle
⭕ 採用
24. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
手段3:jQueryベース, Reactベースのエントリポイントを共存させる
• メリット
• jQueryとReactのコンポーネントが疎結合になる
• ビルドは2回必要だが、それぞれやることはシンプル
• デメリット
• ページ内にランタイムが複数存在する
→jQuery/React双方が影響しあわないよう運用でカバー
• 1ページの読込ファイル数が増え、パフォーマンスに影響する
→既にリリースされた機能は規模も小さく許容範囲だった
→jQuery側のパフォーマンス改善をリプレースと並行して行う
🙆採用
27. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
まとめ
食べログのフロントエンドリプレースプロジェクトは長期戦
ページごとのリリースは最新機能の追従や2重管理の発生によるコストが大きく
なるため、コンポーネントごとにリリースします
ページ内でjQueryベース,Reactベースのエントリポイントを共存させ、
コンポーネント毎のリリースを実現しています
28. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
今後の課題
Next.jsの導入!
• 1ページまるごとReactにできる未来が見えてきた
• Server Side RenderingでSEO対策をしたい
• Client Side Renderingだけじゃまだ駄目だって
• 絶賛進行中!!
• もう少し進んだらブログに書けたらいいな
• 食べログ フロントエンドエンジニアブログ
• https://note.com/tabelog_frontend
Next.js!!!
ページ内が全てReactになった時点で
Ruby on Railsから切り離す
29. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
さいごに
We are hiring!!!!
一緒に大規模システムのリプレースに取り組みませんか?
フロントエンド以外の職種も募集中です❤
https://www.wantedly.com/projects/254221