Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web Frontend Improvement in Cookpad
Kazuhito Hokamura
December 05, 2018
Technology
1
450
Web Frontend Improvement in Cookpad
Kazuhito Hokamura
December 05, 2018
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
hokaccha
3
2.7k
hokaccha
0
480
hokaccha
1
8.9k
hokaccha
0
8.8k
hokaccha
0
1.1k
hokaccha
2
6.2k
hokaccha
4
4.7k
hokaccha
0
370
hokaccha
2
4.2k
Other Decks in Technology
See All in Technology
shirayanagiryuji
1
410
sasakendayo
2
390
satoshirobatofujimoto
0
110
ymas0315
0
160
kurotanshi
0
180
am7cinnamon
2
2.7k
kenya888
1
130
kentaro
1
420
bufferings
2
3.1k
110y
3
730
clustervr
0
200
greymd
0
620
Featured
See All Featured
sferik
609
54k
gr2m
83
11k
addyosmani
494
110k
erikaheidi
13
4.2k
phodgson
87
3.9k
dougneiner
119
7.8k
swwweet
206
6.8k
ufuk
56
5.4k
lemiorhan
626
42k
lynnandtonic
270
16k
dotmariusz
94
5.1k
eileencodes
113
25k
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!!!