Journey to Jetpack Compose

‍

Why Jetpack Compose? 

Jetpack Compose has taken the Android development world by storm. 

A modern toolkit for building user interfaces (UI), Jetpack Compose makes it easier and faster to develop UIs for Android apps. 

Here at Freetrade, we wanted to start using Jetpack Compose for a number of reasons. 

First, as mobile engineers, we’re always looking to work with the latest and most exciting tech, with state-of-the-art libraries.

Second, Jetpack Compose will help us deliver better, more responsive customer experiences at a faster pace. 

Last but not least, Jetpack Compose uses a declarative approach to development. This means that instead of having to write a lot of code to create and manage UI components, we can simply declare how the UI should look and behave. Our app is reactive, so a declarative UI framework complements this well.

‍

How did we tackle the challenge? 

Like many mobile engineering functions, we strive to find the right balance between working core platform tasks and building new features for our customers. Taking the right approach to the prioritisation of Jetpack Compose is yet another example of just that.

Our main issue was that we still extensively used the Kotlin synthetics library (a deprecated Android UI toolkit) in legacy views. This blocked us from updating our Kotlin version, which in turn prevented us from using the latest Jetpack Compose dependencies.

So the question became: how should we deprecate Kotlin synthetics? (For the non-engineers among us, deprecation means the software or code feature is still useable, but it’s not necessarily recommended).

One option we explored was using an automated Gradle script solution, which replaced synthetic calls with a hardcoded copy, and using findViewById. ‍

However, we decided against this because we wanted a solution that allowed our legacy views to use ViewBindings, which is a more efficient and type-safe way to access view elements. This ultimately required us to divide and conquer and go with our own solution. 

At Freetrade, we encourage engineers to work across the full stack and we saw this as a great opportunity to educate our engineers on Android view toolkits. We held internal training sessions to help our developers get up to speed on the new ViewBindings library, and we also provided extensive documentation and support. Each mobile engineer (with some backend engineers jumping in to help!) was assigned a set number of view files and got to work. 

This asynchronous approach removed dependencies across the team and enabled each engineer to proceed in the way that worked best for them, balancing their existing priorities. 

How did it go? Well, this approach proved to be highly effective, and we managed to get through all the synthetic files asynchronously in less than 2 months - far less time than we’d anticipated. 

‍

‍

Once we migrated our Synthetic views to use ViewBindings, we needed to deprecate Jetifier from our codebase and finally upgrade to the latest Kotlin version - going through our entire codebase and fixing any errors along the way. 

‍

What was the end result? 

Once we made these changes, we could finally use Jetpack Compose. We were excited by how quickly it let us build complex and responsive UIs. We were particularly impressed with how versatile the animation APIs are. 

We decided to test it out on our upcoming feature, Recurring orders. Here’s a little sneak peek: 

‍

‍

With just 47 lines of code we were able to create this custom, responsive and animated view component. Before Jetpack Compose, a similar view component on our Insights tab would have required nearly double the lines of code.

Overall, our journey to using Jetpack Compose was a challenging but rewarding experience. 

We’re excited to use it as we build out the future of our app, and to see the type of new experiences we can create. Android customers, stay tuned!

‍

The value of your investments can go down as well as up and you may get back less than you invest. Always do your own research.