Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Frontend Improvement in Cookpad
Search
Kazuhito Hokamura
December 05, 2018
Technology
1
1.1k
Web Frontend Improvement in Cookpad
Kazuhito Hokamura
December 05, 2018
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.7k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.6k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
440
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.2k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Technology
See All in Technology
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3.3k
初めてのDatabricks Apps開発
taka_aki
1
380
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
650
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
340
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
200
OCIjp_Oracle AI World_Recap
shinpy
1
180
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
様々なファイルシステム
sat
PRO
0
240
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Producing Creativity
orderedlist
PRO
347
40k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Being A Developer After 40
akosma
91
590k
Done Done
chrislema
185
16k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Site-Speed That Sticks
csswizardry
13
920
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Bash Introduction
62gerente
615
210k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Transcript
クックパッドにおける Webフロントエンドの改善 Repro Tech Meetup #5 Frontend Reliability 2018/12/04 @hokaccha
だれ •@hokaccha •Cookpad •Nodebrew, Adventar, Bdash
None
今年で Rails 化して10周年の老舗
当然色々な負債が積み重なっている
None
フロントエンドもやってます
フォーカスする問題 •Performance •Productivity
Performance
None
Productivity
•エラートラッキング •コードの整理 •モダン化
エラートラッキング
•全社的に Sentry を使っている •JSのエラートラッキングもSentryに乗っかる •ノイズがひどいのを絶賛対応中(主に外部の広告)
None
コードの整理
•どこに何が書いてあるかわからない •どこに何を書けばいいかわからない •あっちを直せばこっちが壊れる
•エントリポイントを整理 •コンポーネントを切り出して整理 •Atomic Designなどの導入
しかし既存の大量のコードを運用 しながら整理できるかは未知数
モダン化
•CoffeeScript •Zepto •Asset Pipeline •vendor/assets
•CoffeeScript → ES2015+ •Zepto → jQuery •Asset Pipeline → Webpack
•vendor/assets → npm/yarn
None
jQuery...?
各チームが自由にライブラリ選定 して開発できるような体制が理想
None
•サービス間でのUIの統一はどうすれば...? •1ページに複数サービスのコンポーネント入る場合に ページ全体の連携やレイアウトは誰が責任持つ...? •理想だけど難易度高い
絶賛やっていき中です
We are hiring!!!