Jetpack Compose Debugging to fix performance problems

Transcript

1. Jetpack Compose Debugging to fix performance problems Yahoo Japan Corpora+on Android App Developer, Yu Tanigawa © Yahoo Japan
2. About Me • I’m an Android app engineer at Yahoo! JAPAN since 2021. • I’m developing PayPay Flea Market and Yahoo! AucCon app. • I have been developing personal Android app since I was a student. © Yahoo Japan
3. About Me • I’m an Android app engineer at Yahoo! JAPAN since 2021. • I’m developing PayPay Flea Market and Yahoo! AucCon app. • I have been developing personal Android app since I was a student. © Yahoo Japan
4. Agenda In this session, I will recap about “Debugging Jetpack Compose” lecture of Google I/O 2023. h"ps://io.google/2023/program/a3ed5302-d787-41bd-8623-54193d36caf0/intl/ja/ © Yahoo Japan
5. Agenda • RecomposiCon State in Debugger • Layout Inspector • DemonstraCon • Summary © Yahoo Japan
6. 01. Recomposi-on State in Debugger © Yahoo Japan
7. Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon © Yahoo Japan
8. Recomposi3on State in Debugger • Android Studio (Hedgehog) からデバッグツールでComposableの検証がし易 くなった • 「Recompositon State」というパラメータをデバッガで⾒れるようになった © Yahoo Japan
9. Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon © Yahoo Japan
10. Recomposi3on State in Debugger • Android Studio Hedgehog or later can check the “RecomposiCon State” within the standard debugger • By checking the “RecomposiCon State”, it is possible to easily check the parameters that triggered the recomposiCon “isShowLikeBu-on” has Changed © Yahoo Japan
11. Recomposi3on State in Debugger • Unchanged • Changed • Uncertain • Sta.c • Unstable © Yahoo Japan
12. 02. Layout Inspector © Yahoo Japan
13. Layout Inspector Pros • Debug the scrolling of lists and ViewPager without stopping the app • It is possible to intuiCvely understand the recomposiCon count only within this tool. • Visual confirmaCon of the recomposed area Cons • Unable to idenCfy the parameter that triggered the recomposiCon © Yahoo Japan
14. Layout Inspector © Yahoo Japan
15. Layout Inspector © Yahoo Japan
16. Layout Inspector © Yahoo Japan
17. Layout Inspector Recompose count: Indicates that the parameters have been changed and redrawn Skipped count: Count of skipped composiCons, assuming no difference in parameters © Yahoo Japan
18. Layout Inspector • Recomposed Composable is highlighted in blue to visually confirm the extent of the redraw. © Yahoo Japan
19. 03. Demonstra-on © Yahoo Japan
20. Demonstra3on In this demonstraCon, I will add items to head of items list. © Yahoo Japan
21. Demonstra3on a © Yahoo Japan
22. Demonstra3on a © Yahoo Japan
23. Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. © Yahoo Japan
24. Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. items( items = items, key = { it.id } ) { item -> Item(item = item, isShowLikeBubon = isShowLikeBubon, onClickLike = onClickLike) } © Yahoo Japan
25. Demonstra3on Pass ITEM ID as the key in LazyVerCcalGrid items. items( items = items, key = { it.id } ) { item -> Item(item = item, isShowLikeBubon = isShowLikeBubon, onClickLike = onClickLike) } © Yahoo Japan
26. Demonstra3on © Yahoo Japan
27. Demonstra3on © Yahoo Japan
28. 04. Summary © Yahoo Japan
29. Summary • Android Studio Hedgehog or later can check the status of recomposiCons within the standard debugger • Layout Inspector provides a method to check recomposiCon and skipped count without stopping the applicaCon. • Layout Inspector allows you to visually and clearly see the recomposed area when data has changed. © Yahoo Japan
30. © Yahoo Japan Thank you for listening!