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
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
Search
stand.fm
January 21, 2021
Programming
1
7.1k
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
stand.fm
January 21, 2021
Tweet
Share
More Decks by stand.fm
See All by stand.fm
stand.fm会社紹介資料
standfm
0
360
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2.1k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
3
2.5k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
2.8k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8k
声でつながる、 優しい世界を創るUI/UX
standfm
4
470
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
280
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
3.6k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Programming
See All in Programming
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
유연한 Composable 설계
l2hyunwoo
0
380
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
CSC307 Lecture 05
javiergs
PRO
0
210
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Advanced App Shrinking Techniques
cbeyls
2
150
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Navigating Team Friction
lara
181
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
How to Ace a Technical Interview
jacobian
274
23k
Automating Front-end Workflow
addyosmani
1362
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
A Tale of Four Properties
chriscoyier
155
22k
GraphQLとの向き合い方2022年版
quramy
36
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Adopting Sorbet at Scale
ufuk
71
8.8k
Web development in the modern age
philhawksworth
203
10k
Transcript
stand.fmにおける開発体験と パフォーマンスの向上 エンジニア 古川 亘 2021/01/21 TECH STAND #3
自己紹介 Wataru Furukawa エンジニア @ stand.fm Twitter GitHub ブログ @kfurumiya
@kotofurumiya https://sbfl.net/blog/ 2020年11月にstand.fmに入社。 フロントエンド中心の技術スタックを活かして主にクライアント側を担当。 好きな言語 趣味 TypeScript / Rust プログラミング / ゲーム / お絵描き
本日話す内容 1. stand.fmの簡単な紹介 2. 開発現場における工夫 3. 便利コンポーネントの実装 4. コンポーネントのFC化 5.
ステート更新の最適化
stand.fmの簡単な紹介
stand.fmの簡単な紹介
stand.fmの簡単な紹介
技術スタック • クライアント側の技術スタック ◦ React Native ◦ React Native for
Web ◦ Flow ◦ Java / Objective-C / Swift
開発現場における工夫
開発現場における工夫 • サービスの規模拡大に伴う開発負担の増大 • 同時接続数の増加に耐えうる実行パフォーマンスの確保 • より快適で効率的な開発を目指す必要 • CI/CDの整備、品質管理の効率化 ◦
→ 本日はこちらは割愛 • 開発の快適性、パフォーマンス向上 ◦ → こちらのお話をします
開発現場における工夫 • 開発の快適性 ◦ 内部コンポーネントの整備 ◦ レガシー資産の早めの置き換え • パフォーマンスの向上(クライアント側) ◦
大規模LIVEにおける更新頻度の抑制
便利コンポーネントの実装
便利コンポーネントの実装 • Portalを独自実装 ◦ React NativeにはPortalがなかったので • Portal ◦ もとはreact-domに存在する機能
◦ コンポーネントを本来と異なる位置にレンダリング • さまざまなユースケース ◦ モーダル ◦ トースト
Portal機能
Portal機能 • ステート管理とレンダリング位置の分離 ◦ 例えばモーダルは画面のトップレベルに存在する ◦ が、実際に制御を握っているのはツリーの下層の方 • Portalなしだと ◦
Reduxなどのグローバルステートを経由して管理 ◦ 無駄なステートが増えて混乱しがち • Portalありだと ◦ モーダルのステートを最小のスコープで管理できる
Portal機能 • React NativeにはPortalは無い ◦ react-domの機能であってreactの機能ではないので… • ネイティブアプリ開発において必要な場面は多い ◦
トーストやモーダルは頻出する ◦ モーダルのためにStoreを混沌とさせたくない
コンポーネントのFC化
コンポーネントのFC化 • stand.fmの開発は2018年開始 ◦ クラスコンポーネント全盛期 • 2019年にHooks正式実装 ◦ React界隈が一気に関数コンポーネントに傾いた
コンポーネントのFC化 • ライブラリや資料などもHooks前提になりつつある ◦ 関数コンポーネントのほうが情報を探しやすい • 単純にHooksのほうがコードが読みやすい ◦ ライフサイクルの処理を一箇所にまとめやすい ◦
カスタムHooksによる記述の簡略化 • 置き換えよう!!!
コンポーネントのFC化
コンポーネントのFC化 • 現在も徐々に置き換え中 ◦ 大きいのはとりあえず済みました • まだまだいっぱいあります ◦ 全部置き換えるのを目指しています
ステート更新の最適化
ステート更新の最適化 • LIVE機能 • コメントでやりとり可能 • ギフト機能あり
ステート更新の最適化 • 課題 ◦ SNSでフォロワー10万人越えの方のライブ ◦ コメント流れる速度が速い ◦ ギフトが大量に飛び交う •
→ 端末の処理落ち ◦ 音声再生にも影響が出る ◦ 重すぎて接続が切れる
ステート更新の最適化 • 重い原因 ◦ コメント取得ごとに再描画が走っている ◦ 秒間100コメントなら秒間100回の再描画 • コメント描画更新の最適化 ◦
端末が処理落ちしない程度に抑える ◦ なおかつ遅延を感じないようにする
ステート更新の最適化 • 受信したコメントはバッファして30msごとにflush ◦ 最長でも30msしか描画遅延が発生しない ◦ 何百件コメントが来ようと30msごとにしか再描画されない ◦ → 描画負担が低い、かつ予測可能になった
• 大規模なLIVEにも耐えられるようになりました ◦ コメント流速にかかわらず負担が一定
まとめ
まとめ • ユーザと開発者の両方に最適な体験を届けたい ◦ そのためには快適に開発・利用できる環境が必要 • 便利コンポーネントの整備やリファクタリングは重要 ◦ 気持ちよく開発してもらう •
アプリのパフォーマンスを維持することが大事 ◦ どんな状態でも体験を損なわないようにする
None