You can find the previous article about the Jetpack Compose tutorial here:
- A Glimpse Into Jetpack Compose by Building an App
- Layouting in Jetpack Compose
- Navigation in Jetpack Compose
In this article, we will learn how to apply MVVM to Android applications using Jetpack Compose.
What is MVVM?
MVVM, aka Model-View-ViewModel is a software architecture pattern that is designed for a separate view from business logic (use case) that will be handled in ViewModel. The pattern itself is explained in this diagram.
Diagram about pattern in MVVM
MVVM is divided into three parts:
View: This section is responsible for showingUser Interfacefor the end user from use case logic that is being directed inViewModel. This section is also responsible for collecting input from the end user, such as click, submit form, and then transfer it toViewModel. Usually, this section consistsactivityorfragment.ViewModel: This section is responsible for presentation logic that usually directs business logic fromModeltoView, or give input fromViewtoModel.Model: This section serves as the brain of the application. This section is responsible for business logic that will be directed toViewfromViewModel. This section also handles use cases that receive input from the end user. Usually, this section consists of service class.
For more information about MVVM, you may refer to it here — this article explains MVP too.
Here Our Application Work
Using MVVM, our application will more or less look like this diagram below:
Our Application consists HomeFragment and DetailFragment (View Section), each fragment has own ViewModel (ViewModel Section), that will refer to repositories/service (Model Section). In repositories, we will retrieve our data from rawg.io REST API.