Getting Started With MVVM in Jetpack Compose

<p>You can find the previous article about the Jetpack Compose tutorial here:</p> <ul> <li>A Glimpse Into Jetpack Compose by Building an App</li> <li>Layouting in Jetpack Compose</li> <li>Navigation in Jetpack Compose</li> </ul> <p>In this article, we will learn how to apply MVVM to Android applications using Jetpack Compose.</p> <h1>What is MVVM?</h1> <p>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&nbsp;<code>ViewModel</code>. The pattern itself is explained in this diagram.</p> <p>&nbsp;</p> <p>Diagram about pattern in MVVM</p> <p>MVVM is divided into three parts:</p> <ol> <li><code>View</code>&nbsp;: This section is responsible for showing&nbsp;<code>User Interface</code>&nbsp;for the end user from use case logic that is being directed in&nbsp;<code>ViewModel</code>. This section is also responsible for collecting input from the end user, such as click, submit form, and then transfer it to&nbsp;<code>ViewModel</code>. Usually, this section consists&nbsp;<code>activity</code>&nbsp;or&nbsp;<code>fragment</code>.</li> <li><code>ViewModel</code>&nbsp;: This section is responsible for presentation logic that usually directs business logic from&nbsp;<code>Model</code>&nbsp;to&nbsp;<code>View</code>, or give input from&nbsp;<code>View</code>&nbsp;to&nbsp;<code>Model</code>.</li> <li><code>Model</code>&nbsp;: This section serves as the brain of the application. This section is responsible for business logic that will be directed to&nbsp;<code>View</code>&nbsp;from&nbsp;<code>ViewModel</code>. This section also handles use cases that receive input from the end user. Usually, this section consists of service class.</li> </ol> <p>For more information about MVVM, you may refer to it&nbsp;here&nbsp;&mdash; this article explains MVP too.</p> <h1>Here Our Application Work</h1> <p>Using MVVM, our application will more or less look like this diagram below:</p> <p>Our Application consists&nbsp;<code>HomeFragment</code>&nbsp;and&nbsp;<code>DetailFragment</code>&nbsp;(View Section), each fragment has own&nbsp;<code>ViewModel</code>&nbsp;(ViewModel Section), that will refer to repositories/service (Model Section). In repositories, we will retrieve our data from&nbsp;<code>rawg.io</code>&nbsp;REST API.</p> <p><a href="https://betterprogramming.pub/mvvm-in-jetpack-compose-part-4-fe757a1a1b84">Read More</a></p>
Tags: Jetpack MVVM