Web Frontend Improvement in Cookpad

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

6. View Slide

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

   View Slide

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

   View Slide

9. Performance
   

   View Slide

10. View Slide

11. Productivity
    

    View Slide

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

    View Slide

13. エラートラッキング
    

    View Slide

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

    View Slide

15. View Slide

16. コードの整理
    

    View Slide

17. •どこに何が書いてあるかわからない
    •どこに何を書けばいいかわからない
    •あっちを直せばこっちが壊れる
    

    View Slide

18. •エントリポイントを整理
    •コンポーネントを切り出して整理
    •Atomic Designなどの導入
    

    View Slide

19. しかし既存の大量のコードを運用
    しながら整理できるかは未知数
    

    View Slide

20. モダン化
    

    View Slide

21. •CoffeeScript
    •Zepto
    •Asset Pipeline
    •vendor/assets
    

    View Slide

22. •CoffeeScript → ES2015+
    •Zepto → jQuery
    •Asset Pipeline → Webpack
    •vendor/assets → npm/yarn
    

    View Slide

23. View Slide

24. jQuery...?
    

    View Slide

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

    View Slide

26. View Slide

27. •サービス間でのUIの統一はどうすれば...？
    •1ページに複数サービスのコンポーネント入る場合に

    ページ全体の連携やレイアウトは誰が責任持つ...？
    •理想だけど難易度高い
    

    View Slide

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

    View Slide

29. We are hiring!!!
    

    View Slide