DEV Community

Cover image for The UI revolution on Android: Jetpack Compose
Harsh Joshi
Harsh Joshi

Posted on • Updated on

The UI revolution on Android: Jetpack Compose

It is a product led world. Products today are design led. Design further is experience led.

As much as a product is an experience, It is also a relationship and an expression.

Jetpack compose is a new way of expression in the world of native android apps.

You must already have experienced the depth of such a relationship when you took your phone to washrooms, scrolled to sleep with Instagram or checked Whatsapp notifications as the first thing in the morning.

Today's product is not just "How it works" but is also (perhaps more) an expression of "How it feels".

The essence of a product as a relationship and expression is far more than just a mere usage.

Jetpack Compose is here to make this process fast, accelerated and efficient.

What is Jetpack Compose?

Google developer docs define Jetpack compose as "Android’s modern toolkit for building native UI."

So far so good. Looks like Android team has done something new to better UI development for native android applications.

The docs further go on to say, "It simplifies and accelerates UI development on Android. Quickly brings your app to life with less code, powerful tools, and intuitive Kotlin APIs.".

In the past, UI on native android was expressed using a combination XML layout + Java / Kotlin files. Many would argue that in the world of React it was a boring way of doing UI.

Jetpack Compose enables you to write your UI in Kotlin.

Woaahh, that's big news for people having adapted to writing native android apps in Kotlin. But does this affect you if you are writing native android apps in Java? Perhaps not!

As many say, the right time to move to Kotlin was a year ago but if you haven't already, the right time is now. I will write more on what I think about Kotlin in a separate blog.

But why Jetpack Compose?

Android Developer Docs answer this question in a very elaborative way here.

Intuitively, it seems like an upgrade. One might argue on its need in the mobile world but this is much power given in a much needed space.

All Kotlin and no XML makes Jack's app development fast, efficient and wise.

powernew.gif

  • Write less code - It's all Kotlin and no XML now. With jetpack compose it is possible to write UI with 'dramatically less code'
  • It's Declarative - If you are coming from the world of react, you might know what a delight declarative UI is. Declarative API simply means all you need to do is describe your UI. Read more here.

Design challenges it Addresses:

Jetpack compose is a well thought of upgrade. It addresses some key design challenges of the native android world.

One of which is "Separation of Concerns".

Here is an example-

You have a View Model written in Kotlin. This view Model interacts with the XML layout file. The degree of coupling between these two tends to be high. (If you don't already know, you can know about coupling here

Tighter the coupling, more the dependency. If these two are so intimately connected, why the separation of Kotlin and XML? What if you could write the layout in Kotlin rather than XML?

If you think wisely, this is not violation of "Separation of Concerns" rather it tries to manage the 'separation' for you. And how you ask? Through something called a "Composable Function". We already have used many many functions to separate the concerns in the past. This is not different.

Here's how it looks like:

@Composable
fun NameOfFunction(){
    Text(text = "Hello Compose")
        Button(text = "Say Hello", onClick = {
            // handle a click event here
        })
}
Enter fullscreen mode Exit fullscreen mode

Read this well written piece to understand Composables in more depth.

The other one - Source of Truth.

Imagine having an app that has a dropdown. The dropdown lets you choose between options pizza, burger, and orange slice. You chose pizza and a major network call followed which somehow failed. What is the truth of your selection now? Is it the dropdown which still shows pizza as selected choice but in reality there is no choice. I know it is confusing.

Jetpack compose solves it by introducing "State". State is the single source of truth now. You do something on UI, the state changes and so does the truth.
You can pass state to composable functions just like props in react. It observes for changes in the state and updates itself accordingly. The onus of updating the state is not on it anymore.

Read this great piece on state and single source of truth to know more about it. Although this blogs takes react into account to explain the concept of SSOT, it will help you get more clarity

Who's already using Compose?

Who's using Compose

From Twitter to Play Store to Pinterest app, many have chosen Compose. This space will help you discover more on who's using compose?

Resources you can utilise to learn more about Jetpack Compose

I know this blog did not do the best job to explain everything about Jetpack compose but it didn't intend to. I hope it introduced you (If you hadn't already heard) and got you excited about it.
Jetpack Compose looks very promising and would set a new benchmark in the world of native apps.

You can utilise some great resources on the internet to learn more about Compose. I am mentioning a few good ones that I came across here:

Latest comments (1)

Collapse
 
musthashman profile image
mustHASHman

They really weren't kidding when they said its dramatically less code. It really does significantly reduce the amount of code you have to write. The one thing I think they should work on is a way to do automatic build and refresh for Previewing Composables. That would be nice but I wouldn't mad if they didn't. It's good enough as is and I like that you can preview multiple composables at once. I bet they're working on it as we speak. The Compose team has really done an incredible job. It is a huge upgrade for the Kotlin ecosystem. But the real upgrade will come when they're done with the K2 compiler I believe it is currently in alpha.