Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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.4k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.4k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
390
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.8k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
960
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
180
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
120
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
120
YOLOv10~v12
tenten0727
4
960
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
1
270
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
180
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
150
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
310
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
920
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
320
Would you THINK such a demonstration interesting ?
shumpei3
1
220
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
7
930
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Faster Mobile Websites
deanohume
306
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How GitHub (no longer) Works
holman
314
140k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Code Reviewing Like a Champion
maltzj
522
40k
Embracing the Ebb and Flow
colly
85
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
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!!!