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.4k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.4k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
390
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.8k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
950
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
AIエージェントの地上戦 〜開発計画と運用実践 / 2025/04/08 Findy W&Bミートアップ #19
smiyawaki0820
26
8.5k
SRE NEXT CfP チームが語る 聞きたくなるプロポーザルとは / Proposals by the SRE NEXT CfP Team that are sure to be accepted
chaspy
1
570
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
1
160
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
9
3.1k
いつも初心者向けの記事に助けられているので得意分野では初心者向けの記事を書きます
toru_kubota
2
270
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
350
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
0
120
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
310
Spice up your notifications/try!Swift25
noppefoxwolf
2
340
自分の軸足を見つけろ
tsuemura
2
590
Would you THINK such a demonstration interesting ?
shumpei3
1
160
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
140
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Cult of Friendly URLs
andyhume
78
6.3k
Faster Mobile Websites
deanohume
306
31k
RailsConf 2023
tenderlove
30
1.1k
A better future with KSS
kneath
239
17k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Side Projects
sachag
452
42k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
We Have a Design System, Now What?
morganepeng
52
7.5k
Practical Orchestrator
shlominoach
186
10k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
BBQ
matthewcrist
88
9.6k
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!!!