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
3
1.8k
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会社紹介資料
standfm
0
51
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
standfm
0
1.5k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
1.8k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
7.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
380
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
160
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
6.4k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
2.6k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
63k
Other Decks in Programming
See All in Programming
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
How to Fight Production Incidents?
asatarin
0
180
僕が考えた超最強のKMMアプリの作り方
spbaya0141
0
180
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
120
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
230
爆速の日経電子版開発の今
shinyaigeek
2
570
tidy_rpart
bk_18
0
580
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
230
Jetpack Compose 完全に理解した
mkeeda
1
450
Gradle build: The time is now
nonews
1
450
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
The Mythical Team-Month
searls
210
40k
Documentation Writing (for coders)
carmenintech
51
2.9k
It's Worth the Effort
3n
177
26k
In The Pink: A Labor of Love
frogandcode
132
21k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Unsuck your backbone
ammeep
659
56k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Why Our Code Smells
bkeepers
PRO
326
55k
Designing the Hi-DPI Web
ddemaree
273
32k
4 Signs Your Business is Dying
shpigford
171
20k
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