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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Productivity

    View full-size slide

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

    View full-size slide

  9. エラートラッキング

    View full-size slide

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

    View full-size slide

  11. コードの整理

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. モダン化

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  21. We are hiring!!!

    View full-size slide