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
890
Web Frontend Improvement in Cookpad
Kazuhito Hokamura
December 05, 2018
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
2.7k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
300
RailsエンジニアのためのNext.js入門
hokaccha
7
17k
Cookpad Summer Internship 2021 Web Frontend
hokaccha
0
6.9k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.5k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
820
cookpad summer internship 2018 - Git
hokaccha
1
9.4k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9.3k
Other Decks in Technology
See All in Technology
SREとその組織類型
tatsuo48
8
1.5k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
670
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
2
230
DevOpsDays History and my DevOps story
kawaguti
PRO
7
1.4k
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
150
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
2
100
【SORACOM UG】(2024年度版) SIMってなんだ? ~セルラー通信がつながる仕組み、解説します~
soracom
PRO
0
210
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
630
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
360
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
5
2.3k
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.8k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.7k
A better future with KSS
kneath
230
16k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
The Language of Interfaces
destraynor
151
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
Designing Experiences People Love
moore
135
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Gamification - CAS2011
davidbonilla
76
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Scaling GitHub
holman
457
140k
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!!!