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
970
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
3.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.1k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
340
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
870
cookpad summer internship 2018 - Git
hokaccha
1
9.5k
Other Decks in Technology
See All in Technology
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
GraphQLとスキーマファーストで切り開く ライドシェアの未来
ku0522a
0
490
2024年版 運用者たちのLLM
nwiizo
3
290
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
750
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
2
130
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
120
React Aria で実現する次世代のアクセシビリティ
ryo_manba
3
290
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
APIのドキュメント化何使ってますか?
miu_crescent
2
160
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
650
OCI コスト管理
ocise
1
110
ログラスが面白いと思う理由をマネージャーがエモく語ってみる / 20240829 vs LT
yoshikiiida
1
520
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
The Language of Interfaces
destraynor
153
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Music & Morning Musume
bryan
46
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing for Performance
lara
604
68k
In The Pink: A Labor of Love
frogandcode
139
22k
Typedesign – Prime Four
hannesfritz
38
2.3k
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!!!