A Deep Dive Into Jetpack Compose

Designing a Kotlin-first UI Kit

Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. — Android Developers

This article is not about how to use Jetpack Compose or its basics. It’s about some of the insights of how and why it is being developed.

If you want to know the basics and how to use Jetpack Compose, read my latest article on how to use the developer preview of Jetpack Compose.

What Is the Need for a New UI Kit?

In Android, the UI toolkit goes way back in history, at least 10 years. Since then, things have changed a lot like the devices we use, expectations from users, and the expectations of the developers of the tools and languages they’re using.

Above is one of the reasons for the new UI toolkit, The other important reason is that the View.java class has so much code. Every component in the Android UI is extended from this class.

The file is very large so that you can’t see the file on GitHub because it contains literally 30,000 lines of code and that’s insane, right!

Anna-Chiara from the Android team said that they have implemented some API regrets along the way which they can’t take back and fix or evolve the APIs without breaking the functionality, so it is a good time for a fresh start.

That’s how Jetpack Compose came to light.

Jetpack Compose Primary Focus

  1. Accelerate development
  2. Powerful tools
  3. Intuitive Kotlin API

1. Accelerate development

As you start development, you’ll always like to have more time to write business logic rather than spend time on certain things like animations, color changes, and so on. Have a look at the following view:

Material edit-text

This material edit-text seems to be simple but under the hood, there will be many things that need to be taken care of like animations, color changes, state management, and so on.

Whereas Jetpack Compose provides all material things out of the box without any work. This makes the apps developed with Compose material-designed apps with less effort.

2. Powerful tools

A UI toolkit without the right tools is useless, so learning from the decade of experience, the Jetpack Compose team started working with JetBrains to provide powerful tools that support developers at scale in Android Studio with Compose functionalities.

Have a look:

Compose developer 03 preview

The above picture is what the Compose feature looks like in Android Studio while developing UI. You can see the output design on the right side while you’re writing code on the left, like state changes for the views either in light/dark mode.

It’s similar to text/design in the present Android Studio but way more advanced and easy to use. This feature is only available in the Canary version and specifically developed for Compose.

3. Intuitive Kotlin API

Jetpack Compose is more for developers than for Android UI. So, the Android team is developing the code in open source with Kotlin.

Of course, all Android code is open source but in particular the Compose code, it is updated daily here. So, you can see and play with the code, and at the same time you can provide feedback here.

As Compose is still in development, every developer’s feedback counts.

API Design

The Android team has vast experience creating APIs and reviewing them over a decade from now but there is a catch — they’re using Java as programming language.

Jetpack Compose is the first large project that is being developed in Kotlin, so the Android team is exploring the new world of Kotlin API guidelines to create a set of Compose API-specific guidelines and this is still work in progress, a long way to go.

Principles of Compose API

Everything is a function

As I mentioned in my previous article, Compose is a declarative UI system where we design the UI with a set of functions, where one function calls the other and builds the UI required in a tree structure.

In Compose, this tree is called a UI graph which is another function. This UI graph is refreshed every time when there is a change in the UI required, like if you have if statements in the function and the Kotlin compiler will take care of this.

Top-level function

In Compose, there will be no classes, only functions, and every function is a top-level function so there won’t be any inheritance or hierarchy problems in Compose.

With this process, a composable function always generates the same UI based on the inputs it receives, so there will be no cheating as we give up the class structure.

Moving from class structure to this function-level UI build is a huge shift both for developers and the Android team. This top-level functionality is in discussion right now, it might or might not make it to release.

Composition over inheritance

Jetpack Compose prefers composition over inheritance. Compose builds UIs based on other pieces but doesn’t inherit the behavior.

If you observe in Android, every UI component is inherited from the View class. Like EditText is inherited from Textview and the Textview is inherited from some other view and the hierarchy goes to the root level View.class and this class has a lot of features.

View hierarchy in Android

Whereas the Compose team shifted the whole system from inheritance to top-level functions.

Textview, EditText, checkboxes, and all UI components are their own functions and they compose other functions to create instead of inheriting from another class.

Compose architecture

Single source of truth

Single source of truth is a very important feature on which the entire Jetpack Compose is built. If you’re used to existing UI toolkits then you might know how the perform-click works.

perform click in Android architecture

First, it changes the state of the view and then performs the action. This caused many bugs with views like checkboxes because, first, it changes from checked to unchecked or vice-versa, and then, for some reason, if the operation failed, developers have to assign the previous state manually.

In Compose, the functionality is opposite. Here, functions like checkboxes have two parameters. One is to show the state in the UI and the other is the lambda function to observe the change in the state where the UI should change accordingly.

This is so that views like checkboxes don’t hold to any state. This allows the developers to properly handle the state changes of the views.

Compose checkbox

A Close Look at Compose

Compose at Runtime

There are four divisions in Compose at run-time as shown in the above image. Let’s see them one-by-one.

Core

This is the core of Compose as the name implies, you can skip it if you don’t want to learn in-depth.

Basically, the core contains four building blocks:

  1. Draw
  2. Layout
  3. Input
  4. Semantics
  1. Draw — Draw gives you access to the canvas so you can do all of your custom drawing.
  2. Layout — Through layout, we can measure the things and place the views accordingly.
  3. Input — Developers can access events through input and perform gestures.
  4. Semantics — We can provide semantic information about the tree.

Foundation

The core of the foundation is to gather all the things mentioned above and collectively create an abstract layer to make it easy for developers.

Material

In this layer, all of the material components will be available so that we can use the existing components while building a complicated view.

This is the most wonderful part where the Compose team did an amazing job, all views that are available here are materially supported so the apps that are built using Compose will be materialistic by default with the least amount of work from the developer’s side.

Slot APIs

Slot APIs came into existence to give space to the developers so that they can do whatever customization they want. The Android team tried to guess many customizations that developers might think of, but they can’t imagine the developer’s thoughts all the time, like with the textview drawable.

So, the Compose team gives space to the component so that developers can do whatever they want, like with the button; you can keep text or text with an image or anything you want, as shown below

Better Programming

Advice for programmers.

Siva Ganesh Kantamani

Written by

Android🎖lead at Brandpier Inc based in Hyderabad, 🚀Traveler💨, 📝Blogger, 💭Dreamer. Find me at about.me/sivaganesh_kantamani and on Twitter @SG5202.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade