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
990
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
3.8k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.2k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.3k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
350
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
890
cookpad summer internship 2018 - Git
hokaccha
1
9.6k
Other Decks in Technology
See All in Technology
入門 KRR
donkomura
0
110
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.6k
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
410
スクラム導入の舞台裏:QAエンジニアがスクラムマスターになるまで
bubo1201
0
160
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
5
2.3k
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
4
690
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
310
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
340
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
290
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
2
1.6k
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
170
KDD2024参加報告
cyberagentdevelopers
PRO
1
270
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Adopting Sorbet at Scale
ufuk
73
9k
The Invisible Side of Design
smashingmag
297
50k
Into the Great Unknown - MozCon
thekraken
30
1.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
270
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
How STYLIGHT went responsive
nonsquared
94
5.1k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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!!!