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.2k
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
430
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
2.2k
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
4
2.5k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
2.9k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
490
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
310
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
3.7k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Programming
See All in Programming
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Outline View in SwiftUI
1024jp
1
330
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Remix on Hono on Cloudflare Workers
yusukebe
1
300
Quine, Polyglot, 良いコード
qnighy
4
650
Featured
See All Featured
Teambox: Starting and Learning
jrom
133
8.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Language of Interfaces
destraynor
154
24k
Site-Speed That Sticks
csswizardry
0
28
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
4 Signs Your Business is Dying
shpigford
180
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Rails Girls Zürich Keynote
gr2m
94
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
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