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

Web Frontend Improvement in Cookpad

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kazuhito Hokamura Kazuhito Hokamura
December 05, 2018
Technology
1.2k
1

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura

Kazuhito Hokamura

December 05, 2018

More Decks by Kazuhito Hokamura

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

Other Decks in Technology

See All in Technology
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
0
100
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
Avatar for CyberAgent cyberagentdevelopers
PRO
6
5.3k
20260619 私の日常業務での生成 AI 活用
Avatar for Masaru Ogura masaruogura
1
220
2026TECHFRESH畢業分享會 - Lightning Talk - E起 See See : 電商推薦讀心術? 數據說了算
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
Claude Code の Sandbox 機能を Anthropic Sandbox Runtime(srt) で試そう！/lets-play-anthropic-sandbox-runtime
Avatar for tomoki10 tomoki10
1
620
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
0
2.3k
AGENTS.mdとSkillsで始めるAIエージェント活用
Avatar for そのだ sonoda_mj
3
220
Claude Codeをどのように キャッチアップしているか
Avatar for Oikon oikon48
13
8.2k
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
Android の公式 Skill / Android skills
Avatar for Yuki Anzai yanzm
0
150
Bedrock AgentCore RuntimeでAuth0 Changelog調査AIをアップグレードした話
Avatar for t.t t5u8a5a
1
160
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
Avatar for kinako askokc
0
570

Featured

See All Featured
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
430
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
410
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
220
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
250
Design in an AI World
Avatar for tapps tapps
1
240
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
210
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
210
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
230

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