Web Frontend Improvement in Cookpad

Transcript

1. クックパッドにおける Webフロントエンドの改善 Repro Tech Meetup #5 Frontend Reliability 2018/12/04 @hokaccha

2. だれ •@hokaccha •Cookpad •Nodebrew, Adventar, Bdash

3. None

4. 今年で Rails 化して10周年の老舗

5. 当然色々な負債が積み重なっている

6. None

7. フロントエンドもやってます

8. フォーカスする問題 •Performance •Productivity

9. Performance

10. None

11. Productivity

12. •エラートラッキング •コードの整理 •モダン化

13. エラートラッキング

14. •全社的に Sentry を使っている •JSのエラートラッキングもSentryに乗っかる •ノイズがひどいのを絶賛対応中（主に外部の広告）

15. None

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
23. None

24. jQuery...?

25. 各チームが自由にライブラリ選定 して開発できるような体制が理想

26. None

27. •サービス間でのUIの統一はどうすれば...？ •1ページに複数サービスのコンポーネント入る場合に
 ページ全体の連携やレイアウトは誰が責任持つ...？ •理想だけど難易度高い

28. 絶賛やっていき中です

29. We are hiring!!!