{"id":73701,"date":"2023-12-13T15:29:58","date_gmt":"2023-12-13T07:29:58","guid":{"rendered":"https:\/\/version-2.com\/?p=73701"},"modified":"2023-11-27T15:34:44","modified_gmt":"2023-11-27T07:34:44","slug":"improving-nordvpns-android-performance-using-the-compose-compiler-plugin","status":"publish","type":"post","link":"https:\/\/version-2.com\/en\/2023\/12\/improving-nordvpns-android-performance-using-the-compose-compiler-plugin\/","title":{"rendered":"Improving NordVPN\u2019s Android performance using the Compose Compiler plugin"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
At NordVPN, we’ve harnessed the power of Jetpack Compose and its feature-rich capabilities to craft the user interface of our Android app. While Compose has accelerated our feature development workflow, our commitment to product quality drives us above all. We\u2019re continuously exploring strategies for maintaining optimal performance.<\/div>
<\/div>

\"\"<\/span>The new Compose integration has sparked a lot of internal discussion regarding the app\u2019s performance. One of the things we at NordVPN do is to integrate the <\/span>Compose Compiler plugin<\/a> in our day-to-day development process, which helps us improve our code. In this blog post, we explain what the Compose Compiler plugin is, how it works, and how we use it at <\/span>NordVPN<\/a>.<\/span><\/span><\/p><\/div>

What problems did we have?<\/b><\/h2>

When working with Jetpack Compose, we encountered performance issues related to the stability of composable functions. Our primary goal in working with composable functions was to make them as stable as possible, or “skippable” in Compose terminology. In this context, “skippable” means that if a composable function is recomposed and its parameters haven’t changed since the previous recomposition, Compose will skip the function and reuse the previous values.<\/p>

With Compose, we can see significant performance improvements because even minor improvements can reduce recomposition count levels throughout the app. To assess the stability of composable functions, we can leverage the Compose Compiler plugin.<\/p>

The Compose Compiler plugin<\/b><\/h2>

Compose Compiler is a plugin that can generate reports and metrics for components or code written in Compose. These reports provide detailed insights into the behavior of our Compose code. The plugin was added in version 1.2 of the Compose library.<\/p>

With this detailed insight, we can begin making improvements to our code.<\/p>

How does it work?<\/b><\/h2>

The Compose Compiler plugin is a Gradle task that generates reports for composable code within a module. It assesses the stability of the code, offering the flexibility to run it locally or in a CI pipeline when necessary.<\/p>

It is recommended to generate the report in Release builds.<\/p><\/blockquote>

To ensure that the plugin works perfectly, we first need to configure it in the project’s Gradle file.<\/p>

1<\/span><\/p>

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {<\/span><\/div><\/div>

2<\/span><\/p>

compilerOptions {<\/span><\/div><\/div>

3<\/span><\/p>

if (project.findProperty(“nordvpn-app.enableComposeCompilerReports”) == “true”) {<\/span><\/div><\/div>

4<\/span><\/p>

freeCompilerArgs.addAll([<\/span><\/div><\/div>

5<\/span><\/p>

“-P”,<\/span><\/div><\/div>

6<\/span><\/p>

“plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=” +<\/span><\/div><\/div>

7<\/span><\/p>

project.buildDir.absolutePath + “\/compose_metrics”<\/span><\/div><\/div>

8<\/span><\/p>

])<\/span><\/div><\/div>

9<\/span><\/p>

freeCompilerArgs.addAll([<\/span><\/div><\/div>

10<\/span><\/p>

“-P”,<\/span><\/div><\/div>

11<\/span><\/p>

“plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=” +<\/span><\/div><\/div>

12<\/span><\/p>

project.buildDir.absolutePath + “\/compose_metrics”<\/span><\/div><\/div>

13<\/span><\/p>

])<\/span><\/div><\/div>

14<\/span><\/p>

}<\/span><\/div><\/div>

15<\/span><\/p>

}<\/span><\/div><\/div>

16<\/span><\/p>

}<\/span><\/div><\/div>
\u00a0<\/pre><\/div><\/div>