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
Automated Tests Now and Future @ SQiP Workshop Special Lecture 2024
teyamagu
PRO
2
440
KubeVirt Networking ONIC 2024
orimanabu
4
720
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
3
850
The People First Approach to Engineering Success - DevNot 2024
zikriyeurkmez
0
220
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
190
Unlearn Modularity
lemiorhan
6
280
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
350
RAG: from dumb implementation to serious results
glaforge
0
610
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
550
ReSTIRの数理と実装 (rtcamp10)
yumcyawiz
1
450
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
0
260
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
For a Future-Friendly Web
brad_frost
174
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
How to Ace a Technical Interview
jacobian
275
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Rails Girls Zürich Keynote
gr2m
93
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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!!!