Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
stand.fm
October 02, 2021
Programming
2
520
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
stand.fm
October 02, 2021
Tweet
Share
More Decks by stand.fm
See All by stand.fm
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
510
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
0
1.3k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
6.5k
声でつながる、 優しい世界を創るUI/UX
standfm
4
310
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
97
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
6k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
2k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
53k
Other Decks in Programming
See All in Programming
インフラエンジニアの多様性と評価、またはキャリアへのつなげ方 / Careers as infrastructure engineers
katsuhisa91
0
530
読みやすいコードを書こう
yutorin
0
430
Quartoを使ってみませんか / quarto_get_started
s_uryu
1
300
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
コードの解析と言語習得の心得
jinjin33333
0
130
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
minodriven
3
1.1k
Viteはいいぞ/Vite is Good
dojineko
1
110
バンドル最適化マニアクス at tfconf
mizchi
4
2.3k
職場にPythonistaを増やす方法
soogie
0
320
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
720
You CANt teach an old dog new tricks
michaelbukachi
0
120
2022 FrontEnd Training
mixi_engineers
1
280
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
14
35k
Automating Front-end Workflow
addyosmani
1351
200k
Infographics Made Easy
chrislema
233
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
For a Future-Friendly Web
brad_frost
164
7.4k
Become a Pro
speakerdeck
PRO
3
780
The Cult of Friendly URLs
andyhume
68
4.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Design by the Numbers
sachag
271
17k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Fireside Chat
paigeccino
11
1.3k
Building an army of robots
kneath
299
40k
Transcript
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 • コードの歴史も長くなってきた ◦ 技術移行などにも注力
None