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
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
4k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.3k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.3k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
360
RailsエンジニアのためのNext.js入門
hokaccha
7
19k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
7.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
920
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
5分でわかるDuckDB
chanyou0311
10
3.2k
freeeにおけるOAuth_OIDCの活用とAuthleteへの移行
terara
1
100
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
140
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
730
アップデート紹介:AWS Data Transfer Terminal
stknohg
PRO
0
170
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
Kubeshark で Kubernetes の Traffic を眺めてみよう/Let's Look at k8s Traffic with Kubeshark
kota2and3kan
3
370
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
Featured
See All Featured
It's Worth the Effort
3n
183
28k
KATA
mclloyd
29
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Invisible Side of Design
smashingmag
298
50k
GitHub's CSS Performance
jonrohan
1030
460k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Designing for humans not robots
tammielis
250
25k
The Cost Of JavaScript in 2023
addyosmani
45
7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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!!!