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 Expe...
Search
stand.fm
January 21, 2021
Programming
1
7.4k
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
500
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2.2k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
4
2.6k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
3.1k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.4k
声でつながる、 優しい世界を創るUI/UX
standfm
4
510
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
320
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
3.9k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Programming
See All in Programming
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
180
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
180
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.2k
Rubyと自由とAIと
yotii23
6
1.6k
Ça bouge du côté des animations CSS !
goetter
2
140
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
880
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
980
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
ML.NETで始める機械学習
ymd65536
0
230
Datadog Workflow Automation で圧倒的価値提供
showwin
1
150
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Art, The Web, and Tiny UX
lynnandtonic
298
20k
4 Signs Your Business is Dying
shpigford
182
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
It's Worth the Effort
3n
184
28k
GraphQLとの向き合い方2022年版
quramy
44
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why Our Code Smells
bkeepers
PRO
336
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Designing for Performance
lara
604
68k
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