Dowel banner

A CLI tool to convert multi-moduleJetpack Compose compiler metricsinto beautiful HTML reports

Download Mendable

License CI

1. What are Jetpack Compose compiler metrics?

The Compose Compiler plugin can generate reports/metrics around certain Compose-specific concepts that can be useful in understanding what is happening with some of the Compose code at a fine-grained level.

It can output various performance-related metrics at build time, allowing us to peek behind the curtains and see where any potential performance issues are.

Read more here

2. Why Mendable?

Although, the metrics generated by the Compose Compiler are in pseudo-Kotlin style function signatures, which are reasonably readable. But, over time these files get big and unwieldy to work with, and checking each-and-every composable in those txt files becomes cumbersome and clumsy. Also, these reports are spread across different files for different modules.

That is where Mendable comes in and takes care of generating HTML reports for Compose compiler metrics, which are much easier to work with. And Mendable only presents composable methods which need your attention, and highlights the issue-causing part with appropriate colors. It filters out the rest of the composables which are non-problematic.

Mendable also takes reports of multiple modules and merges them into different sections of a single beautiful HTML page to reduce going back and forth while working.

Note : Mendable only generates HTML report for the composables metrics. In other words, it only targets the ‘-composables.txt` files.

3. Gradle setup – for generating Compose compiler metrics

Add the following lines to your root project’s build.gradle file. This will direct the Compose compiler to generate metrics and save all of them into the root project’s build folder (for all of the modules).

Groovy

subprojects {
    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
        kotlinOptions {
            // Trigger this with:
            // ./gradlew assembleRelease -PenableMultiModuleComposeReports=true --rerun-tasks
            if (project.findProperty("enableMultiModuleComposeReports") == "true") {
                freeCompilerArgs += ["-P", "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + rootProject.buildDir.absolutePath + "/compose_metrics/"]
                freeCompilerArgs += ["-P", "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + rootProject.buildDir.absolutePath + "/compose_metrics/"]
            }
        }
    }
}
Kotlin scipt

allprojects {
    tasks.withType(org.jetbrains.kotlin.gradle.dsl.KotlinCompile::class.java).configureEach {
        kotlinOptions {
            // Trigger this with:
            // ./gradlew assembleRelease -PenableMultiModuleComposeReports=true --rerun-tasks
            if (project.findProperty("enableMultiModuleComposeReports") == "true") {
                freeCompilerArgs += listOf("-P", "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + rootProject.buildDir.absolutePath + "/compose_metrics/")
                freeCompilerArgs += listOf("-P", "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + rootProject.buildDir.absolutePath + "/compose_metrics/")
            }
        }
    }
}

With the above setup, you can generate Compose compiler metrics by executing the following command in the terminal window.

./gradlew assembleRelease -PenableMultiModuleComposeReports=true --rerun-tasks

4. How do I use Mendable?

Note : The following steps assume that you have a similar gradle setup as to the one described in step 3.

It is very straightforward. Download and execute the jar file while pointing it to the appropriate directory which contains all the Compose compiler-generated metrics files.

Mendable will take care of the rest. It will figure out metrics files of individual modules, parse them, compute and generate a beautiful HTML report for you.

4.1 ✨ Generate HTML report with a single command ✨

Download and place the jar file in the same folder which contains all the generated Compose compiler metrics ( should be YourProject/build/compose_metrics). And then execute the jar file with the following command.

java -jar mendable.jar

After executing this command there should be index.html file generated in the same folder, which will contain the combined metrics of all the modules.

4.2 Generate HTML report by specifying paths manually

While the above method is the easiest, and should work fine for most of the use cases, Mendable also supports reading and writing files to custom locations. The following are the supported options via CLI arguments.

java -jar mendable.jar
    --composablesReportsPath, -i  [Default value : <Current working dir>] -> Path to the directory containing all of the composables.txt files
    --htmlOutputPath, -o          [Default value : <Current working dir>] -> HTML output directory
    --outputName, -oName          [Default value : "index"]               -> Name of the output HTML file
    --help, -h                                                            -> Usage info

For example :

java -jar mendable.jar
    -i /Users/username/Desktop/Your-project/build/compose_metrics \
    -o /Users/username/Desktop/Reports \
    -oName Your-project-metrics \

For the above command, files will be read from ‘/Users/username/Desktop/Your-project/build/compose_metrics’ and the output file will be saved at ‘/Users/username/Desktop/Reports’ and that file will be named ‘ Your-project-metrics.html’.

And your HTML report should look something like this

Mendable sample screenshot


Other things to know

  • Clicking on the composable’s name in the HTML report will copy that name to the clipboard

  • You can build an executable jar yourself by executing the following command in the root of the project

./gradlew mendable:clean mendable:jar

Contributions

Contributions are super welcome! See Contributing Guidelines.

Discussions

Have any questions or queries, or want to discuss anything? Feel free and start a discussion.

Acknowledgements

Huge thanks to Shreyas Patil. This repo has been inspired by his version of compose-report-to-html CLI tool.

License

 Copyright 2022 Jaya Surya Thotapalli

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

GitHub

View Github