Jetpack Compose 1.0 - Beauty in Simplicity

“Form follows function,” or so they say. That old tenet of design may be a bit trite, but it does happen to describe a significant shift in direction for Android developers that has been a couple years in the making. If we turn back the clock to May, 2019 and make our way to the Google I/O conference in Mountain View, California, we’ll find ourselves witnessing the genesis of this very exciting development in the world of Android app development. Then still in its infancy, Google announced a breakthrough UI toolkit written entirely in Kotlin: Jetpack Compose. In the two years since Google’s initial revelation, developers from around the world have contributed countless hours through the Android Open Source Project (AOSP), providing critical feedback for October 2019’s Developer Preview 1, June 2020’s Developer Preview 2, and Jetpack Compose Alpha, collectively shaping the newly-released Jetpack Compose 1.0, a stable toolkit that will revolutionize the way that UI frameworks are developed for Android applications.

Before we go too far down the road of lauding the potential unlocked by Jetpack Compose 1.0, let’s talk about what it actually does. To break it down to its core function, Jetpack Compose is a set of tools that makes creating high-quality UI for Android a lot quicker and a lot easier. It does this by reversing the approach to building the UI framework from what is referred to as “Imperative Programming” to “Declarative Programming.” If we look back for a moment at our overly-simplistic law of design (form follows function), Imperative Programming can be thought of as the reverse, or function following form. Using that approach, the process is explicitly crafted in order to achieve a certain result. The declarative approach, in contrast, begins by stating the desired result and working backwards from there, describing your UI by calling a series of functions that then transform your data into a clean UI hierarchy. Then when the data changes, the UI framework you have in place recalls the functions automatically and updates the view hierarchy. 

Understanding Two Approaches: Imperative & Declarative Programming

When comparing imperative and declarative programming, neither approach is universally better than the other. However, Jetpack Compose’s declarative approach ultimately will often allow you to bring your app to life while having to write way less code than had you used an imperative approach. In a recent video on Jetpack Compose produced by Touchlab, Michael (one of our expert developers) explained some of the key components of this innovation. His primary point of interest was the fact that XML files become superfluous when developing using Jetpack Compose. “Instead of the layout being defined in a separate XML file required to call your UI content, everything you need is in one place. The Kotlin code describes the UI for the Jetpack Compose framework, which creates the appropriate views, continuously updating and maintaining your UI.” Michael went on to talk about some of the broader implications of implementing this fairly dramatic shift in approach: “While tricky for experienced developers to change their mindset, I think it’ll make the learning experience for new devs way better. No need to learn a whole new language just to write layouts, no need for a full day crash course on RecyclerViews, etc.” 

In short, the one-two punch of Kotlin and Jetpack Compose provides a more approachable environment for developers to produce new innovations faster and with fewer mistakes. Brady, another member of the Touchlab development team, looks at the ease with which Compose allows you to customize UI as well as the fact that the toolkit can be incorporated into existing Java piece by piece, and sees a few adoption trends on the horizon:

• Incremental Adoption – Within a screen, some elements will utilize XML and some will utilize Compose. 
• Adoption For New Features – Old XML doesn’t need to be re-written unless there is a need or desire for it to be redone. New features can be created using the new system, gradually reshaping the app.
• Faster Development – The more this is used, the faster new design systems will be developed.
• Compose Desktop As A Playground – Before moving to Compose on Android, Compose Desktop can be used for quick UI development.

Birds of a Feather: Jetpack Compose & Kotlin Multiplatform Mobile (KMM)

Joining Jetpack Compose as a promising offering for Android app developers is Kotlin Multiplatform Mobile (KMM), another cutting-edge technology that is also used in production apps and makes use of the new intermediate representation (IR) backend of the compiler. By allowing you to apply one codebase to your app’s business logic, KMM shares the top-down philosophy that informs Jetpack Compose, where data flows from the business logic down to the functions that are called to form the UI framework. “KMM has traditionally emphasized sharing business logic over sharing UI,” Brady explained, “With Compose UI spreading to other platforms, sharing UI natively is becoming a more promising possibility. And like KMM, Compose supports incremental adoption, making its implementation suitable to a wide range of apps.” 

While Jetpack Compose has already undergone numerous revisions to become a stable Kotlin toolkit and has rapidly grown by orders of magnitude in the facility that it provides Android developers, it is still coming into its full potential. Describing this ongoing growth, Brady points out, “The rough edges of using both Compose and KMM have been smoothed out. For example, using Kotlin native serialization, a key KMM library, and Compose in the same Gradle module is now possible.” This growth and revision process will continue, as is true with any tech that receives widespread adoption, as Jetpack Compose opens new doors by allowing easy multiplatform development (Android, Desktop, and some early native development will share UI code) and adjusts in order to answer new questions that open new doors. With plenty of room to grow, Brady explained the short and long-term multiplatform possibilities with Jetpack Compose:

• Short-term: Compose and the Android View system are interchangeable; a Kotlin Flow can drive either one in a reactive way, but Compose is not yet stable for other platforms, and only preliminary work has been done for native desktop Compose, which is adjacent to native iOS. So your architecture can remain unchanged, but Compose on iOS is a ways off for now.
• Long-term: Compose has a phenomenal following, community contributions, and libraries; we think it has a bright future. It will likely replace the legacy View system as the de facto UI toolkit on Android, and it is spreading to other platforms.

What’s next for Touchlab?

One of the most promising offerings on the horizon for Touchlab is the Touchlab KaMP Kit, which is a set of tools we are compiling to make entry into the KMP (Kotlin Multiplatform) ecosystem painless and worthwhile for mobile teams. Since the KMP ecosystem has evolved rapidly, there is a lot of confusion and outdated information out there. Our goal is to clear the air and give teams exactly what they need to take advantage of this exciting stage in the developer world. “KaMP Kit uses Jetpack Compose now that 1.0.0 is released,” Brady explained. “We will keep the previous View-based version in a separate branch for those who are unable to make the jump to Compose just yet. Our priority is to support the developer community’s diverse needs when adopting KMM.” 

Exploring Jetpack Compose 1.0 will be a new frontier for many developers and their teams, but the Kotlin-based UI toolkit will not feel entirely unfamiliar either. Considering the multiplatform capabilities it enables, the beautiful simplicity of the UI framework, the reduction in potential for human error, the freeing of hours spent writing busywork code, it is hard to think that anyone will look back once they take their first step on that journey. If you want to know more about what Jetpack Compose has to offer you, please reach out to us at Touchlab. We are excited to hear from you.