STORES 株式会社 Compose Compiler Metricsを使った実践的なコードレビュー Ebisu.mobile #5〜モバイルアプリの品質改善どうしてる？〜 2024.04.19 @tomorrowkey

自己紹介

自己紹介 ● 山下智樹 / @tomorrowkey ● STORES株式会社 - STORES ブランドアプリ ● Android エンジニア (14年生) 3

STORESブランドアプリって？ 4

Jetpack Compose移行を推進しています 5

Compose Compiler Metricsを使った実践的なコードレビュー

Jetpack Composeでパフォーマンスの良い実装をするには? ● パフォーマンスの悪い実装とは ○ 再描画（Recompose）が何度も起きてしまう状態 ↓ ● Recompose起きないようにすればよい 7

どうやったらRecomposeを回避できる？ ● Composable関数の引数が安定（Stable）していたら、同じ引数を受け取った ときにRecomposeを回避（Skip）できる ↓ ● Skippable Composable ※すべてをSkippableにしないといけないわけではありません 8

引数が安定している？ ● 型や変数の宣言方法で判別できる ● Stable ○ Int, Boolean, String… ○ Array ○ イミュータブル(val)で宣言されているプロパティだけで構成されたオブジェクト ● Unstable ○ List, Date… ○ ミュータブル(var)で宣言されているプロパティを持つオブジェクト 9

Compose CompilerナリキリQuiz

Quiz: どれが Unstable でしょうか 11 data class Registration() { val name: String, val age: Int, } data class RegistrationRequest( val data: Registration, val tokens: List, ) data class RegistrationResponse( val data: Registration, val error: Throwable, )

Answer: どれが Unstable でしょうか 12 // Stable data class Registration() { val name: String, val age: Int, } // Unstable: List is not stable data class RegistrationRequest( val data: Registration, val tokens: List, ) // Unstable: Throwable is not stable data class RegistrationResponse( val data: Registration, val error: Throwable, )

目視で判別するのは大変 ● 目視で確認して脳内Compose Compilerを走らせて不安定な変数を見つけない といけない ○ あれ、これって安定した型なんだっけ？ってよくある ● 無手でコードレビューするのは困難 13

ソリューションをさがす

Compose Compiler Metrics https://github.com/androidx/androidx/blob/androidx-main/compose/co mpiler/design/compiler-metrics.md 15

Compose Compiler Metrics 16

開発に活かそう ● 脳内Compose Compilerに依存しない見える化とてもよい ● この実行結果を得るためには、compose compilerを動かさないといけない、 つまりビルドしなくてはならない。 ● コードレビューするときは、レビュー対象のコードをチェックアウトして、ビ ルドして、Metricsを見る？ ● できなくはないが、あまり現実的ではない 󰣻 ● よっしゃ、CIでやったろ 17

開発に活かそう 18

開発に活かそう ● わるくない 😃 19

Compose Compiler Report to HTML ● https://patilshreyas.github.io/compose-report-to-html/ ● Compose Compiler Metricsをレポートとして整形してくれる 20

開発に活かそう ● すばらしい 👏 21

開発に活かそう ● すばらしい 👏 ほんとうに？ 🤔 22

開発に活かそう ● すばらしい 👏 ほんとうに？ 🤔 ● 実際のプロダクトにあるクラスの数はどれくらいある？ ○ なかにはやむを得ずUnstableなままのクラスもある ● 毎回レポートされてそれらを精査できる？ ● でもまぁないよりマシだからレポート続けるか… 23

本当に顧客がほしかったもの ● 実際のコードレビューでほしかったのは点の情報ではなく、線の情報 ● PRで大切なのは何を変えたのか、どう変わったのか見えるようにする ● PRよってCompose Metrics Compiler Reportがどう変化したか分かったら よいのでは？ 24

本当に顧客がほしかったもの ● https://github.com/tomorrowkey/danger-compose_compiler_metrics 25 Sample PR https://github.com/tomorrowkey/danger-compose_compiler_metrics-example/pull/1

本当に顧客がほしかったもの 26

本当に顧客がほしかったもの 27

本当に顧客がほしかったもの ● danger-compose_compiler_metricsによって… ○ コードレビューしてもらう前に、どう変わったか確認できるようになった 🎉 ○ コードレビューが楽になった 🎉 ○ より本質的なプロダクト開発に集中できるようになった 🎉 28

本当に顧客がほしかったもの ● https://github.com/tomorrowkey/danger-compose_compiler_metrics 29 Sample PR https://github.com/tomorrowkey/danger-compose_compiler_metrics-example/pull/1

おわりに

おわりに ● danger-compose_compiler_metrics とても便利なので使ってね！ ● STORESのブランドアプリチームでは、少ない人数でも継続して開発を続けら れるように自動化を推進しています。 ○ そのための仕組みをめちゃ作っています。 31