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
950
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.5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
330
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.6k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
860
cookpad summer internship 2018 - Git
hokaccha
1
9.5k
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
AWSでRAGを作る法方
sonoda_mj
1
140
Classmethod Odyssey 登壇資料
yamahiro
0
390
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Automating Front-end Workflow
addyosmani
1362
200k
Clear Off the Table
cherdarchuk
89
320k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Building Applications with DynamoDB
mza
89
5.8k
Writing Fast Ruby
sferik
623
60k
Thoughts on Productivity
jonyablonski
64
4.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Debugging Ruby Performance
tmm1
71
11k
Atom: Resistance is Futile
akmur
261
25k
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!!!