Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose Debugging to fix performance problems

Jetpack Compose Debugging to fix performance problems

Yu Tanigawa

June 01, 2023
Tweet

Other Decks in Programming

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