Optimizing Compose App – Tools , Tips and Performance Guidelines

Slide 1

Slide 1 text

Optimizing Compose App– Tools , Tips and Performance Guidelines

Slide 2

Slide 2 text

“With Great Power comes with Great Responsibility”

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Use R8 mode in release mode Compose Performance Optimization

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

android { buildTypes { getByName("release") { isMinifyEnabled = true } } } Enable code shrinking

Slide 8

Slide 8 text

android { buildTypes { getByName("release") { isMinifyEnabled = true isShrinkResources = true } } } Enable resources shrinking

Slide 9

Slide 9 text

android { buildTypes { getByName("release") { isMinifyEnabled = true isShrinkResources = true proguardFiles( getDefaultProguardFile("proguard-android-optimize.txt"), "Proguard-rules.pro" ) } } } R8 optimization

Slide 10

Slide 10 text

Take advantages using Baseline Profile Compose Performance Optimization

Slide 11

Slide 11 text

Baseline Profile ● Rules for AOT compilation ● Improve Performance ● Ship with app or library

Slide 12

Slide 12 text

“Baseline Profiles improve code execution speed by about 30% from the first launch”

Slide 13

Slide 13 text

Baseline Profile Workflow

Slide 14

Slide 14 text

Understand Compose Phases Compose Performance Overview

Slide 15

Slide 15 text

Data UI Composition

Slide 16

Slide 16 text

Data UI Composition Layout

Slide 17

Slide 17 text

Data UI Composition Layout Drawing

Slide 18

Slide 18 text

Data UI Composition Layout Drawing What?

Slide 19

Slide 19 text

Data UI Composition Layout Drawing What? Where?

Slide 20

Slide 20 text

Data UI Composition Layout Drawing What? Where? How?

Slide 21

Slide 21 text

Data UI Composition Layout Drawing

Slide 22

Slide 22 text

Data UI Composition Layout Drawing

Slide 23

Slide 23 text

Data UI Composition Layout Drawing

Slide 24

Slide 24 text

Data UI Composition Layout Drawing

Slide 25

Slide 25 text

Data UI Composition Layout Drawing 1 2 3 Measure Children Decide own side Place children

Slide 26

Slide 26 text

Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1 Image

Slide 27

Slide 27 text

Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1 Image

Slide 28

Slide 28 text

Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1

Slide 29

Slide 29 text

Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Text 1

Slide 30

Slide 30 text

Row Image Column Text Text Data UI Composition Layout Drawing Text 2 Thaw Zin Toe (Ptut)

Slide 31

Slide 31 text

Row Image Column Text Text Data UI Composition Layout Drawing Thaw Zin Toe (Ptut) Out of the office

Slide 32

Slide 32 text

Compose Best Practices Compose Performance Optimization

Slide 33

Slide 33 text

@Composable fun ContactList( contacts: List, comparator: Comparator, modifier: Modifier = Modifier ) { LazyColumn(modifier) { // DON’T DO THIS items(contacts.sortedWith(comparator)) { contact -> // ... } } }

Slide 34

Slide 34 text

Use to only run expensive operations once remember {} 1

Slide 35

Slide 35 text

@Composable fun ContactList( contacts: List, comparator: Comparator, modifier: Modifier = Modifier ) { val sortedContacts = remember(contacts, comparator) { contacts.sortedWith(comparator) } LazyColumn(modifier) { items(sortedContacts) { // ... } } }

Slide 36

Slide 36 text

A key piece

Slide 37

Slide 37 text

fun LazyColumn{ items(contacts) { contact -> … } }

Slide 38

Slide 38 text

Define a key in Lazy List Items LazyList key 2

Slide 39

Slide 39 text

fun LazyColumn{ items(contacts, keys = { item.id } ) { contact -> … } } Use a key parameter to provide a unique key for each item

Slide 40

Slide 40 text

Deriving Change

Slide 41

Slide 41 text

val listState = rememberLazyListState() fun LazyColumn(state = listState){ // … } val showButton = listState.firstVisibleItemIndex > 0 AnimatedVisibility(visible = showButton) { ScrollToTopButton() } Top

Slide 42

Slide 42 text

Use to buffer the rate of change derivedStateOf {} 3

Slide 43

Slide 43 text

derivedStateOf {} ≈ distnctUntilChanged

Slide 44

Slide 44 text

val listState = rememberLazyListState() fun LazyColumn(state = listState){ // … } val showButton = remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } } AnimatedVisibility(visible = showButton) { ScrollToTopButton() }

Slide 45

Slide 45 text

Procrastination

Slide 46

Slide 46 text

val color by animateColorBetween(Color.Green, Color.Blue) Box(Modifier.fillMaxSize()).background(color)

Slide 47

Slide 47 text

val color by animateColorBetween(Color.Green, Color.Blue) Box(Modifier.fillMaxSize()).background(color) Composes every frame

Slide 48

Slide 48 text

Defer reading state until you need it Reading State 4

Slide 49

Slide 49 text

val color by animateColorBetween(Color.Green, Color.Blue) Box( Modifier .fillMaxSize() .drawBehind { drawRect(color) } ) function instance called in draw, no composition or layout

Slide 50

Slide 50 text

@Composable fun ContactCard(contact: Contact) { MyCard { Text(“Name: ${contact.name}”) } } Only this call is executed when contact’s .name changes

Slide 51

Slide 51 text

Diagnose & find compose stability issues Compose Performance Stability

Slide 52

Slide 52 text

How to setup and generate compiler reports Compose Compiler Reports

Slide 53

Slide 53 text

Setup to Compose Compiler Reports in build.gradle for root level project tasks.withType().configureEach { kotlinOptions { if (project.findProperty("composeCompilerReports") == "true") { freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination= ${project.buildDir.absolutePath}/compose_compiler" ) } } }

Slide 54

Slide 54 text

Setup to Compose Compiler Metrics in build.gradle for root level project tasks.withType().configureEach { kotlinOptions { if (project.findProperty("composeCompilerMetrics") == "true") { freeCompilerArgs += listOf( "-P", "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination= ${project.buildDir.absolutePath}/compose_compiler" ) } } }

Slide 55

Slide 55 text

Run the tasks in Terminal → For compiler report ./gradlew assembleRelease -PcomposeCompilerReports=true → For compiler metrics report ./gradlew assembleRelease -PcomposeCompilerMetrics=true

Slide 56

Slide 56 text

Example Compiler Report Outputs

Slide 57

Slide 57 text

Example Compiler Report Outputs ● -classes.txt: A report on the stability of classes in this module. ● -composables.txt: A report on how restartable and skippable the composables are in the module. ● -composables.csv:A CSV version of the composables report that you can import into a spreadsheet or processing using a script

Slide 58

Slide 58 text

How to fix Stability issues ? Compose Stability

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

@Composable fun AppIntroContent(content: Content) { ... }

Slide 62

Slide 62 text

data class Content(var name: String)

Slide 63

Slide 63 text

data class Content(var name: String) Not Immutable → Unstable

Slide 64

Slide 64 text

@Composable restartable fun ContentDetails(unstable content: Content) { ... } Unstable parameter→ Not skippable

Slide 65

Slide 65 text

data class Content(var name: String) Not Immutable → Unstable

Slide 66

Slide 66 text

data class Content(val name: String) Immutable → Stable

Slide 67

Slide 67 text

restartable scheme("[androidx.compose.ui.UiComposable]") fun AppIntroContent( unstable contents: List stable onRetry: Function0? = @static {} }

Slide 68

Slide 68 text

List - Set - Map are unstable

Slide 69

Slide 69 text

Stabilising unstable classes ● Kotlinx immutable collections ○ https://github.com/Kotlin/kotlinx.collections.immutable

Slide 70

Slide 70 text

Stabilising unstable classes ● Kotlinx immutable collections ○ https://github.com/Kotlin/kotlinx.collections.immutable ● Annotation ○ @Immutable

Slide 71

Slide 71 text

dependencies { implementation “org.jetbrains.kotlinx:kotlinx-collections-immutable:...” }

Slide 72

Slide 72 text

Immutable Collection @Composable fun AppIntroContent ( contents: ImmutableList, onContentClick: (Long) → Unit, modifier: Modifier = Modifier ) { }

Slide 73

Slide 73 text

Wrapper Class @Immutable data class contentCollection (val contents: List)

Slide 74

Slide 74 text

restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun AppIntroContent( stable contents: ImmutableList stable target: SnapshotStateMap stable onRetry: Function0? = @static {} }

Slide 75

Slide 75 text

● 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

Slide 76

Slide 76 text

“Thank you so much”

Slide 77

Slide 77 text

“Question & Answers”

Slide 78

Slide 78 text

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