$30 off During Our Annual Pro Sale. View Details »

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura Kazuhito Hokamura
December 05, 2018
Technology
1
1.1k

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura

Kazuhito Hokamura

December 05, 2018
Tweet

More Decks by Kazuhito Hokamura

See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
Avatar for Kazuhito Hokamura hokaccha
5
4.8k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
Avatar for Kazuhito Hokamura hokaccha
0
3.7k
GraphQLの負債と向き合うためにやっていること
Avatar for Kazuhito Hokamura hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
Avatar for Kazuhito Hokamura hokaccha
1
450
RailsエンジニアのためのNext.js入門
Avatar for Kazuhito Hokamura hokaccha
7
21k
Cookpad Summer Internship 2021 Web Frontend
Avatar for Kazuhito Hokamura hokaccha
0
7.3k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
Avatar for Kazuhito Hokamura hokaccha
3
4k
巨大なRailsアプリケーションを「普通」にするための取り組み
Avatar for Kazuhito Hokamura hokaccha
1
1k
cookpad summer internship 2018 - Git
Avatar for Kazuhito Hokamura hokaccha
1
9.7k

Other Decks in Technology

See All in Technology
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
330
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.3k
手動から自動へ、そしてその先へ
Avatar for Sammy(MoritaMasami) moritamasami
0
220
HIG学習用スライド
Avatar for 野瀬田　裕樹 yuukiw00w
0
110
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
Avatar for ogugu ogugu9
1
160
セキュリティAIエージェントの現在と未来 / PSS #2 Takumi Session
Avatar for GMO Flatt Security flatt_security
3
1.4k
AI駆動開発によるDDDの実践
Avatar for ディップ株式会社 dip_tech
PRO
0
300
安いGPUレンタルサービスについて
Avatar for Aratako aratako
2
2.4k
AI時代におけるアジャイル開発について
Avatar for Polyscape Inc. polyscape_inc
0
110
Agents IA : la nouvelle frontière des LLMs (Tech.Rocks Summit 2025)
Avatar for Guillaume Laforge glaforge
0
410
命名から始めるSpec Driven
Avatar for Kurowi kuruwic
3
850
形式手法特論：CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
Avatar for y_taka_23 ytaka23
2
300

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Done Done
Avatar for chrislema chrislema
186
16k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
700
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k

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!!!