Web Frontend Improvement in Cookpad

Transcript

1. クックパッドにおける Webフロントエンドの改善 Repro Tech Meetup #5 Frontend Reliability 2018/12/04 @hokaccha
2. だれ •@hokaccha •Cookpad •Nodebrew, Adventar, Bdash
4. 今年で Rails 化して10周年の老舗
5. 当然色々な負債が積み重なっている
7. フロントエンドもやってます
8. フォーカスする問題 •Performance •Productivity
9. Performance
11. Productivity
12. •エラートラッキング •コードの整理 •モダン化
13. エラートラッキング
14. •全社的に Sentry を使っている •JSのエラートラッキングもSentryに乗っかる •ノイズがひどいのを絶賛対応中（主に外部の広告）
16. コードの整理
17. •どこに何が書いてあるかわからない •どこに何を書けばいいかわからない •あっちを直せばこっちが壊れる
18. •エントリポイントを整理 •コンポーネントを切り出して整理 •Atomic Designなどの導入
19. しかし既存の大量のコードを運用 しながら整理できるかは未知数
20. モダン化
21. •CoffeeScript •Zepto •Asset Pipeline •vendor/assets
22. •CoffeeScript → ES2015+ •Zepto → jQuery •Asset Pipeline → Webpack •vendor/assets → npm/yarn
24. jQuery...?
25. 各チームが自由にライブラリ選定 して開発できるような体制が理想
27. •サービス間でのUIの統一はどうすれば...？ •1ページに複数サービスのコンポーネント入る場合に
 ページ全体の連携やレイアウトは誰が責任持つ...？ •理想だけど難易度高い
28. 絶賛やっていき中です
29. We are hiring!!!