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

Web Frontend Improvement in Cookpad

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kazuhito Hokamura Kazuhito Hokamura
December 05, 2018
Technology
1.2k
1

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura

Kazuhito Hokamura

December 05, 2018

More Decks by Kazuhito Hokamura

See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
Avatar for Kazuhito Hokamura hokaccha
5
5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
Avatar for Kazuhito Hokamura hokaccha
0
3.8k
GraphQLの負債と向き合うためにやっていること
Avatar for Kazuhito Hokamura hokaccha
2
1.6k
ユビーのアーキテクチャに対する取り組み
Avatar for Kazuhito Hokamura hokaccha
1
480
RailsエンジニアのためのNext.js入門
Avatar for Kazuhito Hokamura hokaccha
7
22k
Cookpad Summer Internship 2021 Web Frontend
Avatar for Kazuhito Hokamura hokaccha
0
7.4k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
Avatar for Kazuhito Hokamura hokaccha
3
4.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
Avatar for Kazuhito Hokamura hokaccha
1
1.1k
cookpad summer internship 2018 - Git
Avatar for Kazuhito Hokamura hokaccha
1
9.8k

Other Decks in Technology

See All in Technology
AIが自律的に働く時代へ Amazon Quick で実現するAIエージェント紹介
Avatar for こーへい koheiyoshikawa
0
150
VespaのParent Childを用いたフィードパフォーマンスの改善
Avatar for 小野崇之 taking
0
150
Oracle Cloud Infrastructure：2026年4月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
200
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
1.8k
20260423_執筆の工夫と裏側 技術書の企画から刊行まで / From the planning to the publication of technical book
Avatar for nash_efp nash_efp
3
660
生成AI時代のドキュメントに対する期待の整理と実践から得た学び / Rethinking Documentation for LLM: Lessons from Practice
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
120
AI活用時代の事業判断高度化を導くエンジニアリング基盤 / 20260424 Atsushi Funahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
110
EMから幅を広げるために最近挑戦していること / Recent challenges I'm undertaking to expand my horizons beyond EM
Avatar for hiro-torii hiro_torii
1
160
Angular Architecture Revisited Modernizing Angular Architectural Patterns
Avatar for Rainer Hahnekamp rainerhahnekamp
0
100
データ定義の混乱と戦う 〜 管理会計と財務会計 〜
Avatar for wonohe wonohe
0
160
FessのAI検索モード：検索システムとLLMへの取り組み
Avatar for Shinsuke Sugaya marevol
0
130
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
9
3.4k

Featured

See All Featured
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
260
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
99
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
530
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
140
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
820
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
170
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
210
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
780
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k

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!!!