Best Architecture for Jetpack Compose
Compose UI and ViewModel interaction
11 months back, JetBrains announced the stable release of Jetpack Compose and it has taken over the Android Community like a storm. The new UI-tooling kit is becoming everyone’s favourite. However, understanding how to integrate this with modern architecture may be challenging. Let’s have a look at how we can do this.
Workflow
In the featured image, you have an idea of what we would do here. All our screen states will live inside of the ViewModel. We would also use a specific function that would listen to the user’s touch interactions and mutate our state accordingly. These changes will make the UI recompose with the updated data.
Setup
We need these two dependencies before we proceed with our application. Add them to your app-level build.gradle file.
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.0'Build the UI
Let us have a simple UI with a couple of Buttons and a couple of Texts.
We are starting to have a schematic view of our screen. We have two Texts on the top and three Buttons on the bottom.
Create the ViewModel
We need two extra classes in addition to the ViewModel.
- UIState — This is a
data classthat will have all the information required as a state for your screen. - UIEvent — This is a
sealed classthat will include all the possible user interactions with your screen.
Integrating the Screen and ViewModel
Now coming back to the Screen composable, we need to pass the instance of the ViewModel as a parameter and use it to define our screen.
When the UIEvent changes the state inside the ViewModel, the Screen is recomposed with the updated data. The ViewModel and your screen are tightly coupled together and work side-by-side.
Conclusion
This is a very basic example of how to use ViewModel with Jetpack Compose. I have tried various architectures and this is, by far in my opinion, the best. Separating the concerns in your application is always a good idea in the long run. Events can also be described as initiating network requests or retrieving data from the local database.
