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