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