Tweet
Tweet

Slide 1

Slide 1 text

クックパッドにおける Webフロントエンドの改善 Repro Tech Meetup #5 Frontend Reliability 2018/12/04 @hokaccha

Slide 2

Slide 2 text

だれ •@hokaccha •Cookpad •Nodebrew, Adventar, Bdash

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

今年で Rails 化して10周年の老舗

Slide 5

Slide 5 text

当然色々な負債が積み重なっている

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

フロントエンドもやってます

Slide 8

Slide 8 text

フォーカスする問題 •Performance •Productivity

Slide 9

Slide 9 text

Performance

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Productivity

Slide 12

Slide 12 text

•エラートラッキング •コードの整理 •モダン化

Slide 13

Slide 13 text

エラートラッキング

Slide 14

Slide 14 text

•全社的に Sentry を使っている •JSのエラートラッキングもSentryに乗っかる •ノイズがひどいのを絶賛対応中（主に外部の広告）

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

コードの整理

Slide 17

Slide 17 text

•どこに何が書いてあるかわからない •どこに何を書けばいいかわからない •あっちを直せばこっちが壊れる

Slide 18

Slide 18 text

•エントリポイントを整理 •コンポーネントを切り出して整理 •Atomic Designなどの導入

Slide 19

Slide 19 text

しかし既存の大量のコードを運用 しながら整理できるかは未知数

Slide 20

Slide 20 text

モダン化

Slide 21

Slide 21 text

•CoffeeScript •Zepto •Asset Pipeline •vendor/assets

Slide 22

Slide 22 text

•CoffeeScript → ES2015+ •Zepto → jQuery •Asset Pipeline → Webpack •vendor/assets → npm/yarn

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

jQuery...?

Slide 25

Slide 25 text

各チームが自由にライブラリ選定 して開発できるような体制が理想

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

•サービス間でのUIの統一はどうすれば...？ •1ページに複数サービスのコンポーネント入る場合に
 ページ全体の連携やレイアウトは誰が責任持つ...？ •理想だけど難易度高い

Slide 28

Slide 28 text

絶賛やっていき中です

Slide 29

Slide 29 text

We are hiring!!!