Google proudly advertises the new Jetpack Compose Library with the slogan "Build better apps faster". After about half a year in use, the statement can be made; there is definitely something to it. The way back to the original layout system is difficult to justify. It is clear to us that from now on we want to rely on this.
What is Jetpack Compose?
Jetpack Compose is the new modern toolkit for Android. It makes it easier and faster to create user interfaces (UI) for Android apps. Jetpack Compose takes full advantage of Kotlin, the standard Android language. This also reveals the biggest difference from the traditional way of building Android UIs. Instead of using XML files to design the UI, Kotlin is being used. The layout is now displayed with descriptive expressions, which can be read almost like a text. Attached is a comparison of how a title and a small text below it can be mapped:
At Google's annual tech conference, Google I/O, the first development version of Jetpack Compose was presented in 2019. At the time, it was explicitly marketed as "pre-alpha" and very unstable. A little over 2 years, a pandemic and numerous alpha & beta releases later, Jetpack Compose has been available in version 1.0 since July 2021. Due to the long development phase, a lot of feedback from the community could be taken into account.
In the last few months we were able to build up some knowledge about it. This started with the #AndroidDevChallenge last April. There, various tasks were presented, which should be solved with Jetpack Compose. We could even win some prizes by participating.
Wir fordern uns gerne selber heraus und erweitern unser Wissen - das wird auch mal belohnt! Unser Android Dev @yannickpulver wurde fürs Mitmachen an der #AndroidDevChallenge von @Google mit fancy #JetpackCompose Trophäe und Poster beschenkt✨🚀 pic.twitter.com/HPtGxi1Hfm
— Apps with love (@appswithlove) May 12, 2021
In the meantime, we have already been able to implement Jetpack Compose in several projects. The following sections mention points that particularly convinced us.
Speed in the development
In the original layout system of Android there is a component called RecyclerView. This component is responsible for the display of scrollable lists as known from the Instagram feed, for example. Therefore, the RecyclerView can be found in almost every app. However, setting up such a list often requires several hundred lines of code. If other elements are to be displayed in addition to posts, then it quickly becomes confusing.
Jetpack Compose provides the LazyColumn and LazyRow components for this purpose. It's amazing how much more efficient this can be built with Jetpack Compose. Even people without programming knowledge can see what this is all about:
This pattern of descriptive code runs throughout the framework. This form is called "Descriptive UI".
Descriptive UI
The code is much more readable than in the old layout system. Previously, layouts had to be defined in XML and accessed in Kotlin. In Jetpack Compose, this is unified and so now everything can be written in Kotlin.
This is achieved by using descriptive UI. This type of layout is known from other languages like Flutter or SwiftUI. Here is an example of how the code for a list of texts looks on the different platforms:
Although the code is sometimes very different, much of the structure is similar. This is definitely in favor of the developers. They can now talk about the rough descriptive structure in a platform-independent way.
The components in Jetpack Compose are simply named and efficient to use. The two-year development phase was well worth it. More information on how Jetpack Compose and Swift UI are similar can be found on Mohit's blog.
States
With Jetpack Compose, the term "state" has become more central than ever before. The state specifies how the UI should behave. Is the data not loaded yet? Is there an error? How many elements should be shown in the list? All of this is defined in a central state. Depending on the state, the UI is displayed differently. Jetpack Compose uses algorithms to redraw only the changes. This process is called "recomposition".
However, the use of states also brought a mental shift. Familiar processes from the old UI system sometimes have to be completely rethought. But the advantages are obvious. Control is in the hands of the developers. No more processes happen "magically". 🧙
A small example: to create an input field, it must be specified where the value comes from and what happens to it when the input is made. If this is not done, nothing new will be displayed.
The parameter "onValueChange" can be used to specify what happens when the input is made. If the state would not be set, nothing would change for the user on the screen. This looks then as if the input did not work.
Interoperability
The integration into the existing layout system was very important for Google. Many of the open source libraries from other developers were not compatible at the beginning. Therefore, a way had to be found to integrate them into the new system anyway. In Jetpack Compose, this is solved with the "AndroidView" component.
The "factory" parameter can be used to specify which (old) view should be created. The "update" parameter is used to specify code that will be executed on each recomposition.
We used the "AndroidView" for example to make Mapbox compatible with the Jetpack Compose system. We encountered several problems, most of which had to do with the handling of the state. Other than that, old components can be used with Jetpack Compose relatively easily. It just takes some time to get familiar with the handling.
Nice to know
In this section, I would like to talk about a few things that are particularly convincing about Jetpack Compose.
spacedBy
One of my favorite features of Jetpack Compose is spacedBy. With this function you can define the space between elements in lists. That this can be done so easily is just great. In the past this was - well - not easy.
Modifier
Practically every standard component has the possibility to add a modifier. The modifier defines how an element looks, what size it has, whether it is clickable, and much more. A small example:
Several modifiers of the same type (in the example above the padding) can also be linked together. So the text component gets a frame which is a little bit away from the text itself, and again a distance outside the frame. Several nested complicated layouts are history.
Performance
During development, we noticed that the "debug" builds of the apps are sometimes slow. For example, large lists sometimes cannot be scrolled without any stuttering. However, these problems disappear as soon as a "release" build is used. Just like they are delivered in the Play Store. It is likely that this will be improved in future versions of Compose. In the meantime, this instruction is also on the official Android Developer Site.
Accompanist
The Accompanist Libraries ontain various "bleeding edge" features not yet found in Jetpack Compose. So there are components like pager, swipe to refresh, or even navigation transitions to be found in these libraries. The libraries were created by Chris Banes (former Google developer) and are now available as official Google Libraries. The use of the Accompanist Libraries is, as the name suggests, very common in Jetpack Compose projects. Sooner or later, these functions may appear in the official libraries.
Compose Multiplatform
The first version of Compose Multiplatform was also released at the end of 2021. This should now make it possible to develop apps for web, desktop and Android all in one. Similar to what is possible with Flutter. So far, we have been able to find a use case for it, but we will certainly keep an eye on the ongoing developments.
Roadmap
It is obvious that Jetpack Compose is not yet as mature as the conventional layout system. However, together with the "Accompanist Library", practically everything is already made possible. For everything that is still missing, Google has published a roadmap. There you can see what should be developed for Jetpack Compose in the next months / years.
Conclusion
Jetpack Compose facilitates the development of UI's enormously. Animations are often very easy to implement or "given" per se. Layouts can be developed much faster. It's also a lot of fun! There are definitely enough reasons to use Compose for future projects. I really hope Jetpack Compose doesn't end up on the "Killed by Google" list ;)
