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

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.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
Avatar for Kazuhito Hokamura hokaccha
0
3.6k
GraphQLの負債と向き合うためにやっていること
Avatar for Kazuhito Hokamura hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
Avatar for Kazuhito Hokamura hokaccha
1
440
RailsエンジニアのためのNext.js入門
Avatar for Kazuhito Hokamura hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
Avatar for Kazuhito Hokamura hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
Avatar for Kazuhito Hokamura hokaccha
3
3.9k
巨大な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
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
Avatar for po3rin po3rin
2
260
生成AIを活用したZennの取り組み事例
Avatar for igarashi ryosukeigarashi
0
210
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
1
7.8k
組織観点から IAM Identity CenterとIAMの設計を考える
Avatar for NRI Netcom nrinetcom
PRO
1
180
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
1k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
420
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
Avatar for mikami cm_mikami
0
120
BirdCLEF+2025 Noir 5位解法紹介
Avatar for MYSO myso
0
200
SoccerNet GSRの紹介と技術応用：選手視点映像を提供するサッカー作戦盤ツール
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
180
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.9k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
Avatar for maroon1st maroon1st
0
190
GA technologiesでのAI-Readyの取り組み@DataOps Night
Avatar for yuto16 yuto16
0
270

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
960
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k

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