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

Web Frontend Improvement in Cookpad

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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.9k
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
460
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.8k

Other Decks in Technology

See All in Technology
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
2.4k
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
1
190
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
Avatar for empitsu empitsu
4
1.3k
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
Avatar for Kuniaki Moriya zepprix
0
380
Azure Durable Functions で作った NL2SQL Agent の精度向上に取り組んだ話/jat08
Avatar for TonyTonyKun thara0402
0
140
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
560
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
67k
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
170
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
560
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.2k
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
0
150

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.8k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
72
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
97
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k

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