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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Agenda
   • RecomposiCon State in Debugger
   • Layout Inspector
   • DemonstraCon
   • Summary
   © Yahoo Japan
   

   View Slide

6. 01. Recomposi-on State in Debugger
   © Yahoo Japan
   

   View Slide

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
   

   View Slide

8. Recomposi3on State in Debugger
   • Android Studio (Hedgehog) からデバッグツールでComposableの検証がし易
   くなった
   • 「Recompositon State」というパラメータをデバッガで⾒れるようになった
   © Yahoo Japan
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Recomposi3on State in Debugger
    • Unchanged
    • Changed
    • Uncertain
    • Sta.c
    • Unstable
    © Yahoo Japan
    

    View Slide

12. 02. Layout Inspector
    © Yahoo Japan
    

    View Slide

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
    

    View Slide

14. Layout Inspector
    © Yahoo Japan
    

    View Slide

15. Layout Inspector
    © Yahoo Japan
    

    View Slide

16. Layout Inspector
    © Yahoo Japan
    

    View Slide

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
    

    View Slide

18. Layout Inspector
    • Recomposed Composable is highlighted in blue to visually confirm the extent of
    the redraw.
    © Yahoo Japan
    

    View Slide

19. 03. Demonstra-on
    © Yahoo Japan
    

    View Slide

20. Demonstra3on
    In this demonstraCon, I will add items to head of items list.
    © Yahoo Japan
    

    View Slide

21. Demonstra3on
    a
    © Yahoo Japan
    

    View Slide

22. Demonstra3on
    a
    © Yahoo Japan
    

    View Slide

23. Demonstra3on
    Pass ITEM ID as the key in LazyVerCcalGrid items.
    © Yahoo Japan
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Demonstra3on
    © Yahoo Japan
    

    View Slide

27. Demonstra3on
    © Yahoo Japan
    

    View Slide

28. 04. Summary
    © Yahoo Japan
    

    View Slide

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
    

    View Slide

30. © Yahoo Japan
    Thank you for listening!
    

    View Slide