Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Frontend Improvement in Cookpad

Web Frontend Improvement in Cookpad

Kazuhito Hokamura

December 05, 2018
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Technology

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