Optimizing Compose App – Tools , Tips and Performance Guidelines

This is the DevFest Slide for How to Optimize for your Android industry project that is developed with compose. I will explain basic Baseline Profile workflow, tips and tricks, and how to set up and report your Compose Compiler and Metrics reports that can write scripts for your Continuous Integration Server.

Transcript

1. Optimizing Compose App– Tools , Tips and Performance Guidelines
2. “With Great Power comes with Great Responsibility”
3. Overview 01 02 Use R8 Take advantages using Baseline Profile Speed up start up and hot paths Enable optimizing, shrinking & security with R8 compiler 03 Understanding Compose Phases Some phase can make your app will slow down 04 05 Compose Best Practices Diagnose & Fix Stability issues What & how to fix it Common mistakes for compose recomposition
4. Use R8 mode in release mode Compose Performance Optimization
5. AppType Size App Launch Mode Non Minified 11.8 MB 596.6 ms Release Minified 6.5 MB 367.9 ms Release Minified + Shrinked 6.4 MB 361.3 ms Release Comparison
6. What is R8? Remove unused classes, functions and fields Remove unused resources Optimize the code itself Obfuscates your code Tool to optimize your app for release
7. android { buildTypes { getByName("release") { isMinifyEnabled = true } } } Enable code shrinking
8. android { buildTypes { getByName("release") { isMinifyEnabled = true isShrinkResources = true } } } Enable resources shrinking
9. android { buildTypes { getByName("release") { isMinifyEnabled = true isShrinkResources = true proguardFiles( getDefaultProguardFile("proguard-android-optimize.txt"), "Proguard-rules.pro" ) } } } R8 optimization
10. Take advantages using Baseline Profile Compose Performance Optimization
11. Baseline Profile • Rules for AOT compilation • Improve Performance • Ship with app or library
12. “Baseline Profiles improve code execution speed by about 30% from the first launch”
13. Baseline Profile Workflow
14. Understand Compose Phases Compose Performance Overview
15. Data UI Composition
16. Data UI Composition Layout
17. Data UI Composition Layout Drawing
18. Data UI Composition Layout Drawing What?
19. Data UI Composition Layout Drawing What? Where?
20. Data UI Composition Layout Drawing What? Where? How?
21. Data UI Composition Layout Drawing
22. Data UI Composition Layout Drawing
23. Data UI Composition Layout Drawing
24. Data UI Composition Layout Drawing
25. Data UI Composition Layout Drawing 1 2 3 Measure Children Decide own side Place children
26. Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1 Image
27. Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1 Image
28. Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1
29. Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1
30. Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Thaw Zin Toe (Ptut)
31. Row Image Column Text Text Data UI Composition Layout Drawing Thaw Zin Toe (Ptut) Out of the office
32. Compose Best Practices Compose Performance Optimization
33. @Composable fun ContactList( contacts: List<Contact>, comparator: Comparator<Contact>, modifier: Modifier = Modifier ) { LazyColumn(modifier) { // DON’T DO THIS items(contacts.sortedWith(comparator)) { contact -> // ... } } }
34. Use to only run expensive operations once remember {} 1
35. @Composable fun ContactList( contacts: List<Contact>, comparator: Comparator<Contact>, modifier: Modifier = Modifier ) { val sortedContacts = remember(contacts, comparator) { contacts.sortedWith(comparator) } LazyColumn(modifier) { items(sortedContacts) { // ... } } }
36. A key piece
37. fun LazyColumn{ items(contacts) { contact -> … } }
38. Define a key in Lazy List Items LazyList key 2
39. fun LazyColumn{ items(contacts, keys = { item.id } ) { contact -> … } } Use a key parameter to provide a unique key for each item
40. Deriving Change
41. val listState = rememberLazyListState() fun LazyColumn(state = listState){ // … } val showButton = listState.firstVisibleItemIndex > 0 AnimatedVisibility(visible = showButton) { ScrollToTopButton() } Top
42. Use to buffer the rate of change derivedStateOf {} 3
43. derivedStateOf {} ≈ distnctUntilChanged
44. val listState = rememberLazyListState() fun LazyColumn(state = listState){ // … } val showButton = remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } } AnimatedVisibility(visible = showButton) { ScrollToTopButton() }
45. Procrastination
46. val color by animateColorBetween(Color.Green, Color.Blue) Box(Modifier.fillMaxSize()).background(color)
47. val color by animateColorBetween(Color.Green, Color.Blue) Box(Modifier.fillMaxSize()).background(color) Composes every frame
48. Defer reading state until you need it Reading State 4
49. val color by animateColorBetween(Color.Green, Color.Blue) Box( Modifier .fillMaxSize() .drawBehind { drawRect(color) } ) function instance called in draw, no composition or layout
50. @Composable fun ContactCard(contact: Contact) { MyCard { Text(“Name: ${contact.name}”) } } Only this call is executed when contact’s .name changes
51. Diagnose & find compose stability issues Compose Performance Stability
52. How to setup and generate compiler reports Compose Compiler Reports
53. Setup to Compose Compiler Reports in build.gradle for root level project tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>().configureEach { kotlinOptions { if (project.findProperty("composeCompilerReports") == "true") { freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination= ${project.buildDir.absolutePath}/compose_compiler" ) } } }
54. Setup to Compose Compiler Metrics in build.gradle for root level project tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>().configureEach { kotlinOptions { if (project.findProperty("composeCompilerMetrics") == "true") { freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination= ${project.buildDir.absolutePath}/compose_compiler" ) } } }
55. Run the tasks in Terminal → For compiler report ./gradlew assembleRelease -PcomposeCompilerReports=true → For compiler metrics report ./gradlew assembleRelease -PcomposeCompilerMetrics=true
56. Example Compiler Report Outputs
57. Example Compiler Report Outputs • <modulename>-classes.txt: A report on the stability of classes in this module. • <modulename>-composables.txt: A report on how restartable and skippable the composables are in the module. • <modulename>-composables.csv:A CSV version of the composables report that you can import into a spreadsheet or processing using a script
58. How to fix Stability issues ? Compose Stability
59. Serve as “scope” where recomposition can start if the function's parameters haven't changed from their previous values, Compose will skip the function Restarable Skippable Compose Functions Stability
60. An object whose properties remain constant after it's created A type that is mutable, but the Compose runtime will be notified when its public properties change Immutable Stable Parameters Stability None of the above Unstable
61. @Composable fun AppIntroContent(content: Content) { ... }
62. data class Content(var name: String)
63. data class Content(var name: String) Not Immutable → Unstable
64. @Composable restartable fun ContentDetails(unstable content: Content) { ... } Unstable parameter→ Not skippable
65. data class Content(var name: String) Not Immutable → Unstable
66. data class Content(val name: String) Immutable → Stable
67. restartable scheme("[androidx.compose.ui.UiComposable]") fun AppIntroContent( unstable contents: List<Contents> stable onRetry: Function0<Unit>? = @static {} }
68. List - Set - Map are unstable
69. Stabilising unstable classes • Kotlinx immutable collections ◦ https://github.com/Kotlin/kotlinx.collections.immutable
70. Stabilising unstable classes • Kotlinx immutable collections ◦ https://github.com/Kotlin/kotlinx.collections.immutable • Annotation ◦ @Immutable
71. dependencies { implementation “org.jetbrains.kotlinx:kotlinx-collections-immutable:...” }
72. Immutable Collection @Composable fun AppIntroContent ( contents: ImmutableList<Content>, onContentClick: (Long) → Unit, modifier: Modifier = Modifier ) { }
73. Wrapper Class @Immutable data class contentCollection (val contents: List<Content>)
74. restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun AppIntroContent( stable contents: ImmutableList<Content> stable target: SnapshotStateMap<String, AppIntroTargetData> stable onRetry: Function0<Unit>? = @static {} }
75. • It make as small as possible • remove unused code and resources. Compose is a library so we need to take advantages with baseline profile to improve startup performance Use R8 mode Take advantages using Baseline Profile Covering your bases • What to show • Where to place it • How to render it Compose Phases Compose determines the stability of your Composables to determine if they can be skip Diagnose & fix for Stability Issues • Something remember • A key piece • Deriving change • Defer Reading state Compose Best Practices
76. “Thank you so much”
77. “Question & Answers”
78. Connect to me Thaw Zin Toe (P Tut) Mobile Developer - Android @ Seven Peaks Facebook - Pe Tut Linkedin - https://www.linkedin.com/in/thaw-zin-toe-35415b197/ Medium - https://medium.com/@thawzintoe For slide