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

Web Frontend Improvement in Cookpad

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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.2k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
Avatar for Kazuhito Hokamura hokaccha
0
3.8k
GraphQLの負債と向き合うためにやっていること
Avatar for Kazuhito Hokamura hokaccha
2
1.7k
ユビーのアーキテクチャに対する取り組み
Avatar for Kazuhito Hokamura hokaccha
1
500
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
V8コントリビュート超入門
Avatar for Riya Amemiya riyaamemiya
0
140
Azure Cost Management の FOCUS コストデータを迷わず読むための“3つの軸”
Avatar for Tetsuya Odashima tetsuyaooooo
0
140
『止めない』を設計する — 制約の中で、事業の根幹を支える判断
Avatar for Terry hiroyaterui
0
200
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
150
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
Avatar for Aki / @LoveIdahoBurger aki_iinuma
4
3.6k
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
Avatar for Michael Tedder falken
PRO
0
260
はじめてのDatabricks：技術者向けワークショップ / beginner-workshop
Avatar for Databricks Japan databricksjapan
PRO
0
230
動画配信アプリでの Engage SDK 導入 — TVer Android が Play ストアにコンテンツを届けるまで
Avatar for TVer Inc. techtver
PRO
0
120
現場に行くだけでは足りない——プロダクトエンジニアが業務の流れを捉える観点と、その鍛え方
Avatar for 匠技研工業株式会社 / Takumi Engineering, inc. takumiengineering
0
300
スクラムで身についていた動き方を、XPで捉え直してみた
Avatar for コドモン開発チーム codmoninc
PRO
1
230
GuardDuty 検知対応を DevOps Agent で効率化しようとしている話 / GuardDuty Investigations with DevOps Agent
Avatar for MasahiroKawahara masahirokawahara
1
310
AI-DLCって実際どう？ 〜聞きたいこと全部聞いてみる〜
Avatar for 荒木 ARK news_it_enj
0
230

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
290
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
260
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
430
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.2k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
220
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k

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