Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Frontend Improvement in Cookpad
Search
Kazuhito Hokamura
December 05, 2018
Technology
1
1.1k
Web Frontend Improvement in Cookpad
Kazuhito Hokamura
December 05, 2018
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.8k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.7k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
450
RailsエンジニアのためのNext.js入門
hokaccha
7
21k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.3k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
4k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Technology
See All in Technology
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
3.1k
安いGPUレンタルサービスについて
aratako
2
2.5k
オープンデータの内製化から分かったGISデータを巡る行政の課題
naokim84
2
1.4k
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
11
3.9k
JSConf JP 2025 LINEヤフーのセッション紹介&アンケート 結果発表
lycorptech_jp
PRO
0
130
“決まらない”NSM設計への処方箋 〜ビットキーにおける現実的な指標デザイン事例〜 / A Prescription for "Stuck" NSM Design: Bitkey’s Practical Case Study
bitkey
PRO
1
430
M5UnifiedとPicoRubyで楽しむM5シリーズ
kishima
0
120
Noを伝える技術2025: 爆速合意形成のためのNICOフレームワーク速習 #pmconf2025
aki_iinuma
2
1.6k
21st ACRi Webinar - Univ of Tokyo Presentation Slide (Shinya Takamaeda)
nao_sumikawa
0
100
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか?そして、今学生であるあなたは何を学ぶべきか?
kuri8ive
2
1.9k
Claude Code Getting Started Guide(en)
oikon48
0
150
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.3k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Docker and Python
trallard
46
3.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Optimizing for Happiness
mojombo
379
70k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
How GitHub (no longer) Works
holman
316
140k
Six Lessons from altMBA
skipperchong
29
4.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
1.3k
Code Reviewing Like a Champion
maltzj
527
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.1k
Transcript
クックパッドにおける Webフロントエンドの改善 Repro Tech Meetup #5 Frontend Reliability 2018/12/04 @hokaccha
だれ •@hokaccha •Cookpad •Nodebrew, Adventar, Bdash
None
今年で Rails 化して10周年の老舗
当然色々な負債が積み重なっている
None
フロントエンドもやってます
フォーカスする問題 •Performance •Productivity
Performance
None
Productivity
•エラートラッキング •コードの整理 •モダン化
エラートラッキング
•全社的に Sentry を使っている •JSのエラートラッキングもSentryに乗っかる •ノイズがひどいのを絶賛対応中(主に外部の広告)
None
コードの整理
•どこに何が書いてあるかわからない •どこに何を書けばいいかわからない •あっちを直せばこっちが壊れる
•エントリポイントを整理 •コンポーネントを切り出して整理 •Atomic Designなどの導入
しかし既存の大量のコードを運用 しながら整理できるかは未知数
モダン化
•CoffeeScript •Zepto •Asset Pipeline •vendor/assets
•CoffeeScript → ES2015+ •Zepto → jQuery •Asset Pipeline → Webpack
•vendor/assets → npm/yarn
None
jQuery...?
各チームが自由にライブラリ選定 して開発できるような体制が理想
None
•サービス間でのUIの統一はどうすれば...? •1ページに複数サービスのコンポーネント入る場合に ページ全体の連携やレイアウトは誰が責任持つ...? •理想だけど難易度高い
絶賛やっていき中です
We are hiring!!!