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

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura Kazuhito Hokamura
December 05, 2018
Technology
1
1.1k

Web Frontend Improvement in Cookpad

Avatar for Kazuhito Hokamura

Kazuhito Hokamura

December 05, 2018
Tweet

More Decks by Kazuhito Hokamura

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

Other Decks in Technology

See All in Technology
Agentic DevOps時代の生存戦略
Avatar for KAMEGAWA Kazushi kkamegawa
0
150
ゆるSRE #11 LT
Avatar for Kaoru okaru
1
590
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
Avatar for ymty ymty
1
380
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
43
25k
In Praise of "Normal" Engineers (LDX3)
Avatar for Charity Majors charity
2
850
讓測試不再 BB！ 從 BDD 到 CI/CD， 不靠人力也能 MVP
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
150
API の仕様から紐解く「MCP 入門」 ～MCP の「コンテキスト」って何だ？～
Avatar for CData Software Japan cdataj
0
150
ObsidianをMCP連携させてみる
Avatar for ttnyt8701 ttnyt8701
2
110
DB 醬，嗨！哪泥嘎斯基？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
150
AI技術トレンド勉強会 #1 MCPの基礎と実務での応用
Avatar for Nisei Kimura nisei_k
1
190
脅威をモデリングしてMCPのセキュリティ対策を考えよう
Avatar for GMO Flatt Security flatt_security
4
1.6k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
6.4k

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
630
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
690
Done Done
Avatar for chrislema chrislema
184
16k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.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!!!