$30 off During Our Annual Pro Sale. View Details »
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
7k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.7k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
910
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
4.1k
A Tour of Anti-patterns for Functional Programming
guvalif
0
2.3k
レガシーシステムへのDatadog APM導入奮闘記
mtakeya4062
0
120
minify の効果を最大限に引き出す TypeScript コードを書く
jsakamoto
2
130
メインテーマはKubernetes
nwiizo
1
220
【平成レトロ】へぇボタンハック👨🔧
vanchan2625
0
160
SDNという名のデータプレーンプログラミングの歴史
ebiken
PRO
2
280
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
2
1.7k
2024年のAmazon Bedrockアップデート一挙おさらい 〜まだ間に合う! re:Invent直前までの重大ニュースを速習しよう〜
minorun365
PRO
3
150
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
370
TypeScript100%で作るMovable Typeプラグイン
usualoma
2
220
Nutanixにいらっしゃいませ。Moveと仮想マシン移行のポイント紹介
shadowhat
0
100
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Automating Front-end Workflow
addyosmani
1366
200k
Gamification - CAS2011
davidbonilla
80
5k
Designing Experiences People Love
moore
138
23k
Code Review Best Practice
trishagee
64
17k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
390
Building Your Own Lightsaber
phodgson
103
6.1k
Statistics for Hackers
jakevdp
796
220k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Pragmatic Product Professional
lauravandoore
31
6.3k
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!!!