stand.fmの最近の取り組み アプリ起動速度の改善 株式会社stand.fm　エンジニア　外松 俊尚 2021/10/02 React Native Matsuri 2021

外松 俊尚
 stand.fm エンジニア
 React Nativeはstand.fmで初めて触りました
 愛媛からフルリモート
 @toshi__toma


stand.fmは誰でもかんたんに
 アプリで収録・LIVE配信ができる音声 プラットフォーム
 
 React Nativeで開発してます


最近のstand.fmの取り組み


最近のstand.fmの取り組み ● ライブの安定化 ● コラボライブ ● アプリ起動速度の改善 ● 音声の再生速度の改善 ● 新機能開発 ● 技術移行 ● etc

最近のstand.fmの取り組み ● ライブの安定化 ● コラボライブ ● アプリ起動速度の改善 ● 音声の再生速度の改善 ● 新機能開発 ● 技術移行 ● etc

アプリ起動速度 ● stand.fmは開発から2年以上が経過 ○ 起動速度が問題になってきた ● 色んな事情で起動時に行われる処理の増加 ○ 新機能の追加、認証、初期化処理など ● 最近、改善に取り組んでいます

起動速度の計測


アプリ起動速度 ● まず大事なのは計測 ○ いま振り返っても、計測が一番大事 ● 計測ツール ○ Sentry Performance Monitoring ○ Firebase Performance Monitoring ● 既に導入されていたSentryで計測を開始

React NativeアプリをSentryでPerformance Monitoring @sentry/react-native https://docs.sentry.io/platforms/react-native/performance/

計測の導入 ● 最初は単純にrootのindex.jsの最初で計測を開始 結果を見るとなんか速い。こんなに速いはずがない ● 計測を開始してるのは、JSが実行される段階 ○ 「アイコンをタップ」した直後くらいから計測を開始したい

react-native-startup-time ● react-native-startup-timeを利用 ○ https://www.npmjs.com/package/react-native-startup-time ○ getTimeSinceStartup() ● ネイティブモジュールの初期化タイミングからの経過時間を JavaScript側で取得 ○ 計測開始のタイムスタンプを作成 ○ 正確ではないけど、十分と判断 ● ストップウォッチで測ったりして、体感とかなり近い結果が出た

起動速度計測の定義 ● 計測開始 ○ ユーザー：アイコンがタップされた直後 ○ システム：ネイティブモジュールの初期化タイミング ● 計測終了 ○ ユーザー：Splashスクリーンから抜けた ○ システム：Splashスクリーンの終了 (react-native-splash-screen：Splashスクリーンの終了タイミングを調整 )

無事に起動速度を計測できた データの例 ● バージョンごと、iOS/Android単位での推移も確認できる

各計測にはボトルネックになりえる処理をマークしておいた データの例

ボトルネックの洗い出し ● 計測結果からReact Native側とstand.fm側の処理に分類して ボトルネックを洗い出した ● stand.fm ○ 起動時に必須ではないネットワークリクエストや初期化処理 ○ トップページのデータ読み込み ● React Native ○ JavaScriptの実行開始まで

ネットワークリクエストの改善 起動時に必須ではない処理の改善

ネットワークリクエストの改善 ● 直列になっていた処理を並列化 ● デフォルトタブ以外の情報のレスポンスを待っていたのを改善 ● APIのモニタリング結果を見て遅いリクエストの精査

起動時に必須ではない処理の改善 ● 計測結果や起動までのコードをチェック ○ 計測結果を見て初めて分かることが多い ● 起動時に必須ではないけど、時間がかかってる箇所があったの で改善

アラートの設定 ● 起動時の処理は気をつけないといつの間にか処理が増えていく ○ 新機能、ログ、お知らせ、認証などなど ● 意図せず遅くなっている状態に気付きたい Sentryでアラートを設定した ○ 閾値より遅くなるとSlackに通知

トップページのデータ読み込み


トップページのデータ読み込み ● トップページを表示するために必要な情報を全て取得していた

トップページの改善 ● 起動時はファーストビューに見える範囲の情報を取得 ○ 残りは起動に必須とせずに別で取得させるようにした ● react-native-shimmer-placeholder ○ ファーストビュー以降は取得までは シマーを表示させるように ● トップページの情報をサーバーサイドで キャッシュさせてレイテンシの改善など

Hermes


Hermes ● もともとAndroidではHermesに移行していた ● React Native v0.64にアップデートしたタイミングでiOSも有効化 ○ JSの実行までの時間が短縮された！！ ● しかし、Hermesが原因でクラッシュするIssueがあり、いまは一時 的にOFFにしてる ○ React Native v0.66で改善しそう？？

Hermes化の効果 ● 圧倒的に起動速度が改善した ● Hermesの有効化前後のバージョンで50%tileで650ms速くなった ● 再度有効化できればもっと早くなりそう

改善結果


改善結果 ● 対応したこと ○ ネットワークリクエストの改善 ○ 起動時に必須ではない処理の改善 ○ トップページのデータ取得の改善 ○ (Hermes化) ● 起動速度が速くなった ○ 50%tile: ⬇1.33s ○ 95%tile: ⬇3.15s

We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら ● CTO候補 ● VPoE候補 ● クライアントエンジニア ● バックエンドエンジニア ● 機械学習エンジニア ● 配信基盤エンジニア ● QAエンジニア ● エンジニアリングマネージャー ● UI/UXデザイナー 積極募集しているプロダクト開発メンバー

現在抱えている技術課題・今後の技術的チャレンジ 
 ▶アプリ起動速度を高速にしたい 
 
 ▶音声編集機能リッチ化 
 　写真アプリがスマホだけでお洒落な加工を可能にしたように、機材や知識がなくてもアプリだけで、
 　高クオリティの音声配信をシンプルなUI/UXで実現したい
 　(例) 複数BGM、BGMの fade in&out、ジングル挿入、効果音挿入、音声スニペットのコピペ、など
 
 ▶アプリの複雑化への対応 
 　開発者が増え、機能が増えてもメンテナンスしやすい構造にしたい
 
 ▶異常状態を検知できるようにしたい 
 　コラボ収録時に片方だけ音が入っていない・音割れしているなど、単純なエラーではない異常状態を検知したい
 
 ▶高クオリティなサービスをユーザーに届けるためのテストの自動化 
 　リグレッションテストの自動化、ネットワーク状態・電話の割り込み・ディスク容量など特殊な状態のテスト
 クライアント


stand.fm エンジニア ● iOS、Androidのネイティブが得意な人 ○ JSだけでは実現が難しい要件も多い！ ○ チームとして異なる強みの人がいる ● webのReactは経験してるけど、ネイティブアプリ開発は初 ○ RNでは、Reactの知識が普通に生かせる ○ stand.fmは全部がJS ● コードの歴史も長くなってきた ○ 技術移行などにも注力

No content