Lessons learnt from implementing Jetpack Compose
Jetpack Compose has been a major hype ever since it was announced and is quickly been adopted by the Android community. Jetpack Compose is a modern toolkit for building native android UI. It is the recommended toolkit by Android Developers for building android apps. It is said to be simple, fast, and intuitive.
Being an android developer since last 7+ years, I know how important it is to adopt new changes in the android world and so naturally, I jumped at the chance of adopting Jetpack Compose in my production app as soon as the stable version was released.
To get started with Jetpack Compose checkout my previous blog for how to gradually start using Compose in your projects.
In this blog, I would like to share what I learned by implementing Jetpack Compose in my XML based on-going project. The blog is more of a pro-con list rather than listing point-by-point analysis.
Pros
⌨ Less code to write
With Composables, you write much less code as you don’t have to worry about maintaining an XML layout file and a class file to handle their actions separately.
🚀 Once you get a gist of it, you design UI much faster
I found myself creating static design for not very complex designs much faster once I got used to the UI composables and modifiers.
🔄 No need for data binding and the Binding adapters that come with it
Data binding made life very easy but also required additional code. With Compose, that additional need to maintain the binding adapters and the gradle build issues that came with it are reduced.
🗂 Easily merged with existing architecture
My existing project had MVVM model and with Compose viewModel() function it is very easy to use viewmodel in your composables. I also found a great article where Garima Jain explains how to work with Jetpack Compose using the MVI model for those who still love it.
⭐️ State Management
One of my favorite features of Jetpack Compose. State management is extremely easy and smooth. MutableState object and remember are super useful and my favorite part of Jetpack Compose
🍻 Interoperable with XML based code
One of the feature helped me most during my transition to Jetpack Compose was that Compose can co-exist in a view-based environment, thus enabling us to use our exisiting views in Composables. This saves time and avoids duplicacy.
💪🏻 Efficient
Composables should be stateless. Composables can be made recomposible by changing the inputs they receive. The Compose framework can intelligently recompose only those components that have changed. Thus, the need to re-draw the entire view is discarded.
❤️ Did I say state management is super easy with Jetpack Compose? 😛
It was the only reason why some time back I loved to work with Flutter- Easy state management with less hassle. And now we have that in Android too.
🎉 Easy Animations
Animations are much easier to achieve with less code with Jetpack Compose than with view-based system. Quick animations can be written using super useful APIs likeAnimatedVisibility, Crossfade, Modifier.animateContentSize, etc. Simply using AnimatedVisibility to show/hide some content on your screens can liven up your app.
📚 Great collection of 3rd Party libraries
We have great 3rd party libraries to leverage like accompanist, Landscapist, Coil, Balloon, Charty etc.
Cons
🛣 Still a long way to go
There is still plenty of room for improvements.
For example- I had a requirement where I had to show a Popup window and inside it I have various selections amongst which was a DropdownMenu. But I was not able to anchor the DropdownMenu to it’s parent as is required by the Compose framework. We ended up changing the view entirely by discarding the dropdown.
📝 Comes with a learning curve
Compose comes with a lot of learning curve where android developers are required to refer to the documentation and other online resources to get started.
⬆️ State hoisting can get tricky
State hoisting (Shifting state to caller composable to make composables recomposible with change in input) can get a bit tricky with complex UI hierarchy.
For example- I had a page and 3–4 sub pages (all with complex UI) that had a filter composable fixed on top of all of these. Maintaining the filter selections for each page was quite challenging and came with their own bag of performance issues.
🙁 You start to miss the likes of ConstraintLayout and LinearLayout
When you are still a long way to being a Pro in Jetpack Compose, while designing a complex screen you kinda start missing the XML views, viewgroups. Because you know you could have achieved the pixel perfect UI with these views in minutes rather than trying in iterations to make it accurate with Compose.
Final thoughts 💭
Jetpack Compose involves lot of learning curve and the world around us is so super-fast paced that it is difficult to catch up without an active project using Jetpack Compose going on. I still have to explore and learn a lot of things in Jetpack Compose like how to draw after view is rendered, canvas, complex animations, etc. But I see a great potential with it, especially when I want to work on KMM instead of Flutter for multi-platform projects. I am looking forward to exploring it more and start with KMM projects soon.
