Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Web Frontend Improvement in Cookpad

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
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.1k
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
Avatar for Kazuhito Hokamura hokaccha
5
5.2k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
Avatar for Kazuhito Hokamura hokaccha
0
3.9k
GraphQLの負債と向き合うためにやっていること
Avatar for Kazuhito Hokamura hokaccha
2
1.7k
ユビーのアーキテクチャに対する取り組み
Avatar for Kazuhito Hokamura hokaccha
1
510
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

Other Decks in Technology

See All in Technology
【ゲームメーカーズスクランブル2026】『Shadowverse: Worlds Beyond』UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング
Avatar for Cygames, Inc. cygames
PRO
1
690
Mastering Agentic Development: Harness Engineering for Effective Coding Agents
Avatar for Kyosuke Konishi konippi
3
610
AI駆動開発で仕様はどこまで書くべきか？ ― 人とAIの責務境界から考える開発プロセスの実践
Avatar for matsui-dmm takahiromatsui
1
160
AWS App Runnerから Cloudflare Workersへ移行した話
Avatar for ryota-09 ryota09
0
110
AWS DevOps Agent スキルをつかいこなそう / Master AWS DevOps Agent Skills
Avatar for Masanori Yamaguchi kinunori
2
610
あけおめLINE 傾向とその対策
Avatar for nasa9084 nasa9084
0
340
C#コードの結合を可視化する Roslyn解析による設計改善と リファクタリング判断
Avatar for dora56 dora56
0
900
AIに任せた品質は、誰が見立てるのか - AI時代のテストマネジメント
Avatar for nakanao nakanao
3
3.2k
AIに書かせて、プラットフォームで縛る ― EKSプラットフォームで実践した責任境界と権限設計
Avatar for elmo elmodev09
1
930
AIに会社の文脈を理解させる技術～上流工程・非エンジニアにも広げるハーネスエンジニアリング実践～
Avatar for Ochtum ochtum
0
170
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
510
セルフサービスのオブザーバビリティ基盤をOpenTelemetryで作る / Building a Self-Service Observability Platform with OpenTelemetry
Avatar for ymotongpoo ymotongpoo
3
430

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
380
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
330
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
370
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
550
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k

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