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

Transcript

1. STORES 株式会社 Compose Compiler Metricsを使った実践的なコードレビュー Ebisu.mobile #5〜モバイルアプリの品質改善どうしてる？〜 2024.04.19 @tomorrowkey
2. 自己紹介
3. 自己紹介 • 山下智樹 / @tomorrowkey • STORES株式会社 - STORES ブランドアプリ • Android エンジニア (14年生) 3
4. STORESブランドアプリって？ 4
5. Jetpack Compose移行を推進しています 5
6. Compose Compiler Metricsを使った実践的なコードレビュー
7. Jetpack Composeでパフォーマンスの良い実装をするには? • パフォーマンスの悪い実装とは ◦ 再描画（Recompose）が何度も起きてしまう状態 ↓ • Recompose起きないようにすればよい 7
8. どうやったらRecomposeを回避できる？ • Composable関数の引数が安定（Stable）していたら、同じ引数を受け取った ときにRecomposeを回避（Skip）できる ↓ • Skippable Composable ※すべてをSkippableにしないといけないわけではありません 8
9. 引数が安定している？ • 型や変数の宣言方法で判別できる • Stable ◦ Int, Boolean, String… ◦ Array ◦ イミュータブル(val)で宣言されているプロパティだけで構成されたオブジェクト • Unstable ◦ List, Date… ◦ ミュータブル(var)で宣言されているプロパティを持つオブジェクト 9
10. Compose CompilerナリキリQuiz
11. Quiz: どれが Unstable でしょうか 11 data class Registration() { val name: String, val age: Int, } data class RegistrationRequest( val data: Registration, val tokens: List<String>, ) data class RegistrationResponse( val data: Registration, val error: Throwable, )
12. 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<String>, ) // Unstable: Throwable is not stable data class RegistrationResponse( val data: Registration, val error: Throwable, )
13. 目視で判別するのは大変 • 目視で確認して脳内Compose Compilerを走らせて不安定な変数を見つけない といけない ◦ あれ、これって安定した型なんだっけ？ってよくある • 無手でコードレビューするのは困難 13
14. ソリューションをさがす
15. Compose Compiler Metrics https://github.com/androidx/androidx/blob/androidx-main/compose/co mpiler/design/compiler-metrics.md 15
16. Compose Compiler Metrics 16
17. 開発に活かそう • 脳内Compose Compilerに依存しない見える化とてもよい • この実行結果を得るためには、compose compilerを動かさないといけない、 つまりビルドしなくてはならない。 • コードレビューするときは、レビュー対象のコードをチェックアウトして、ビ ルドして、Metricsを見る？ • できなくはないが、あまり現実的ではない 󰣻 • よっしゃ、CIでやったろ 17
18. 開発に活かそう 18
19. 開発に活かそう • わるくない 😃 19
20. Compose Compiler Report to HTML • https://patilshreyas.github.io/compose-report-to-html/ • Compose Compiler Metricsをレポートとして整形してくれる 20
21. 開発に活かそう • すばらしい 👏 21
22. 開発に活かそう • すばらしい 👏 ほんとうに？ 🤔 22
23. 開発に活かそう • すばらしい 👏 ほんとうに？ 🤔 • 実際のプロダクトにあるクラスの数はどれくらいある？ ◦ なかにはやむを得ずUnstableなままのクラスもある • 毎回レポートされてそれらを精査できる？ • でもまぁないよりマシだからレポート続けるか… 23
24. 本当に顧客がほしかったもの • 実際のコードレビューでほしかったのは点の情報ではなく、線の情報 • PRで大切なのは何を変えたのか、どう変わったのか見えるようにする • PRよってCompose Metrics Compiler Reportがどう変化したか分かったら よいのでは？ 24
25. 本当に顧客がほしかったもの • https://github.com/tomorrowkey/danger-compose_compiler_metrics 25 Sample PR https://github.com/tomorrowkey/danger-compose_compiler_metrics-example/pull/1
26. 本当に顧客がほしかったもの 26
27. 本当に顧客がほしかったもの 27
28. 本当に顧客がほしかったもの • danger-compose_compiler_metricsによって… ◦ コードレビューしてもらう前に、どう変わったか確認できるようになった 🎉 ◦ コードレビューが楽になった 🎉 ◦ より本質的なプロダクト開発に集中できるようになった 🎉 28
29. 本当に顧客がほしかったもの • https://github.com/tomorrowkey/danger-compose_compiler_metrics 29 Sample PR https://github.com/tomorrowkey/danger-compose_compiler_metrics-example/pull/1
30. おわりに
31. おわりに • danger-compose_compiler_metrics とても便利なので使ってね！ • STORESのブランドアプリチームでは、少ない人数でも継続して開発を続けら れるように自動化を推進しています。 ◦ そのための仕組みをめちゃ作っています。 31