Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Frontend Improvement in Cookpad

18b12f8f7910445b2637f0f21f59d467?s=47 Kazuhito Hokamura
December 05, 2018
Technology
1
650

Web Frontend Improvement in Cookpad

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

December 05, 2018
Tweet

More Decks by Kazuhito Hokamura

See All by Kazuhito Hokamura
RailsエンジニアのためのNext.js入門
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
6
9.9k
Cookpad Summer Internship 2021 Web Frontend
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
0
6.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
3
3.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
1
650
cookpad summer internship 2018 - Git
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
1
9.2k
cookpad summer internship 2018 - JavaScript
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
0
9.1k
エンジニアのアウトプットと採用 / Engineer's output and recruiting
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
0
1.4k
ログを活用したサービス開発
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
2
6.5k
BdashにおけるFlux設計
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
4
5k

Other Decks in Technology

See All in Technology
Oracle Cloud Infrastructure：2022年7月度サービス・アップデート
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
0
200
インフラのテストに VPC Reachability Analyzer は外せないという話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
2
720
LINSTOR — это как Kubernetes, но для блочных устройств
93aef1d166a8a3536538eff713f80307?s=48 flant
0
3.4k
Power BI のうらがわ
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
1
140
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
0251532f4fb413ea1a026efe6eb16b87?s=48 stajima
0
320
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
10be5c6d7c18735c1169520e55e15214?s=48 kkamegawa
0
270
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
E2dd1857f6fc1ff69adb2af80b56e9fc?s=48 pohsien
0
120
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
195f71c8183f8d27da66aa0618f293b6?s=48 task4233
1
250
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
7
3k
AWS Step Functions を用いた非同期学習処理の例
227382dbd5e033db211c159edf32853c?s=48 hacarus
0
100
ECS on EC2 で Auto Scaling やってみる！
5a6e159c3f74fb7bd85e62efe5f34e2b?s=48 sayjoy
1
240
年700万円損するサーバレスの 認可システムをご紹介します！！
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
3
340

Featured

See All Featured
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
598
210k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
4k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
35
6.9k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Art, The Web, and Tiny UX
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
280
18k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
47
4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
25
15k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.4k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.6k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k

Transcript

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

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

  3. None

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

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

  6. None

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

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

  9. Performance

  10. None

  11. Productivity

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

  13. エラートラッキング

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

  15. None

  16. コードの整理

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

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

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

  20. モダン化

  21. •CoffeeScript •Zepto •Asset Pipeline •vendor/assets

  22. •CoffeeScript → ES2015+ •Zepto → jQuery •Asset Pipeline → Webpack

    •vendor/assets → npm/yarn
  23. None

  24. jQuery...?

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

  26. None

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

  28. 絶賛やっていき中です

  29. We are hiring!!!