Photo by Christina Morillo on Unsplash

Jetpack Compose is Android’s modern toolkit for building native UI. It makes use of the declarative UI paradigm, with composable functions as building blocks. Other popular declarative UI frameworks include SwiftUI, Flutter and React Native. The transition from imperative to declarative UI frameworks has been largely adopted because it increases developer productivity, enabling us to build apps faster with less code.

Imperative design is the most common design paradigm. It involves having a separate model of the application’s UI. This design focuses on the how rather than the what. The layout and the logic is usually separated so you end up having more code for a simple layout. In Android, you have an XML file that contains the widgets and components to be rendered and a separate Kotlin or Java file for the logic.

Declarative design pattern is the new trend that allows developers to design the UI based on the data received. You describe what elements you need in your UI, and to some extent how they should look. This approach focuses on the what rather than the how. The UI of your app can be rendered without having a separate layout file. Declaratively developed user interfaces have control structures that allow them to be more dynamic.

Drawbacks of imperative design

Imperative UI pattern, though widely used, has its flaws that necessitate the shift to a declarative approach. A few examples in Android are:

1. Poor scaling

   Since we have separate layout files (XML) and logic files, this leads to a lot of code. Consider that a normal application will have styling attributes defined in styles.xml and even other attributes in attrs.xml added on top of the xml files for main activity and fragments. Having the associated Kotlin files in the same code is simply too much.

2. State management

   The UI is built as a hierarchy of layouts and widgets. Layouts are represented by Viewgroup objects that contain other views. Widgets are represented by view objects and they display individual UI components. With this tree structure, it is easy to encounter bugs as you develop it. To reflect a change in the data you have to find the specific widget to update in the widget tree. Having getters and setters in each of the widgets adds to the complexity of the operation.

3. Separation of concern

   A common design principle in computer science is separation of concern. Essentially, your code should be easily readable and testable by having different sections that focus on a distinct concern. Your UI code should not be intertwined with the code that handles logic. The Kotlin file communicates with the inflated Java or Kotlin objects from the layout file. This leads to the interdependency between modules and therefore does not achieve separation of concern.

4. Inheritance

   It favours inheritance over composition. In Kotlin and Java, there is no multiple inheritance. You can only inherit from one parent. The number of classes you can inherit from is limited. The composition over inheritance is a principle in object-oriented programming that says that classes should achieve polymorphic behavior and code reuse by their composition — that is, by containing instances of other classes that implement the desired functionality — rather than inheriting from a base or parent class. This can be achieved through custom view classes that are used to update your UI.

5. Creating custom views

   Custom views are important in a significant number of ways. They are used when you need to reuse particular components throughout the app. Creating a custom view imperatively however is not simple. It involves:

   • Overriding view constructors (they could be multiple).

   • Defining an XML resource for inflation.

   • Creating special XML attributes.

   • Modifying your custom widget by adding all the necessary properties and their respective getters and setters to the class.

   • Styles and how your view responds to different display modes such as light and dark themes.

   • Extra codes for touch and gesture support to handle touch events.

With such steps required to expand your custom implementation, it only makes it more difficult.

How exactly is Jetpack Compose better?

The limitations of Android’s XML toolkit which uses imperative UI are fixed by the introduction of Jetpack Compose. It makes use of the declarative UI paradigm to create the user interface in Android. Here are some of the ways its better:

1. Leads to improved productivity

   Business logic and UI code are written in Kotlin. This makes for less code and faster development. Developers can focus on the higher-level structure of the UI, instead of worrying about the implementation details.

2. Simplified UI development

   State management has been improved as developers do not have to deal with the complexities of managing the state and updating views manually. It uses a reactive model that consists of composables, which are functions that automatically update the UI in response to changes in data. No need to extend classes, or overwrite constructors.

3. Better performance

   The amount of work done to render UIs is greatly minimized since it uses a highly optimized rendering engine. As a result, you get faster app start-up times, smoother animations and better overall performance.

4. Clear separation of concern

   Many of the implicit dependencies that were present in the layout and business logic now become explicit. The UI and business logic are written in the same language in compose, thereby reducing coupling (dependency between different modules) and increasing cohesion in your code.

5. Flexible UI design

   In compose, developers can create custom UI components that can be reused across multiple screens. This helps reduce code duplication and allows for easier maintenance over time.

In addition, it comes with material design support.

Jetpack compose is preconfigured to support material design theme. Developers can create high-quality, digital experiences for Android apps, utilizing components and properties like shapes, typography and colors provided in the ‘materialTheme’ composable.

Jetpack compose is still a fairly new technology and as such community support is evolving as more developers adapt to the new standard. Though there are a few support resources available, they may not be as extensive as other established frameworks and libraries. Coding channels on YouTube as well as tech blogs and a few books provide adequate support to get started with Jetpack Compose.

In Conclusion

Overall, Jetpack Compose provides a more modern and efficient way to develop UIs for Android applications. It simplifies the development process, improves performance and makes it easier to create flexible and reusable UI components. However, it is necessary to understand its limitations and compatibility requirements, invest time in learning the new technology and conduct thorough testing of apps before production.

Have you used Jetpack Compose to create apps? I would love to hear about your experience. Drop a comment down below.