What's So Great About Jetpack Compose?
The advantages of Jetpack Compose we experienced while migrating Alarmy's 'About' screen
If you were to pick one of the hottest technologies in Android right now, it would probably be Jetpack Compose.
According to the official Android website, Jetpack Compose is defined as Android’s modern toolkit for building native UI.
Jetpack Compose Android Developer
To keep up with the latest UI building trends and, furthermore, to leverage the benefits of Compose, the Alarmy Android team is planning to transition our existing UI building methods to Jetpack Compose.
As a first step, we migrated the 'About' screen under 'Settings' to Jetpack Compose. I'd like to share the advantages we found by adopting Compose.
The following elements are required when drawing a View:
Drawing
Styling
Font, color, size, margin...
Setting up
Text, image...
Event Handling
Click events, drag events...
Let's take the "Rate app" button View on this screen as an example and compare the legacy UI system with Jetpack Compose based on the View tasks mentioned above.
If we list the View tasks required to draw this button from those three perspectives, it looks like this:
Drawing
Button shape
Rounded corners
Bold font
Font size
Gray background color
Setting up
Text setup
"Rate app"
Event Handling
Navigate to the Alarmy Play Store page on button click
To achieve this in the legacy UI system, View handling was scattered and managed across multiple places like below.
If you handle the same task using Jetpack Compose, you can manage all handling for a single View in one place like this.
To better understand the benefits of Compose, let's assume a situation where an arbitrary change request occurs, to see how much better it handles changes compared to the legacy UI approach.
Please change the color of the existing "Rate app" button to R.attr.colorSurface_MediumEmphasis ,
change the text to "Review app",
and add logging for the Rate app button event on click.
To implement these requirements, the legacy UI system needs to reflect the changes everywhere each task is handled.
Handling a single View is scattered, making it feel like an architecture with low cohesion.
On the other hand, with Jetpack Compose, a single View is handled in one place, so changes are also made solely inside the Composable function for that View.
Since a single View is handled in one place, it feels like it has higher cohesion compared to the legacy UI approach.
Through these examples, we compared the legacy UI handling method with the Jetpack Compose approach and looked at what benefits it offers.
To summarize, we were able to confirm the following advantages:
A single View is handled in one place.
Changes to a single View happen in one place.
As a result, Views are easier to manage.
Besides these, there are plenty more benefits to enjoy with Compose that weren't covered in this example.
Next time, I'll introduce what other advantages there are through another example.
We plan to continue migrating many UI elements in the Alarmy project to Jetpack Compose, and we look forward to a highly maintainable Alarmy project that leverages even more of Compose's benefits.
👉 Check out our Instagram for a sneak peek into DelightRoom's daily life