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 <code>ViewModel</code>. The pattern itself is explained in this diagram.</p>
<p> </p>
<p>Diagram about pattern in MVVM</p>
<p>MVVM is divided into three parts:</p>
<ol>
<li><code>View</code> : This section is responsible for showing <code>User Interface</code> for the end user from use case logic that is being directed in <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 <code>ViewModel</code>. Usually, this section consists <code>activity</code> or <code>fragment</code>.</li>
<li><code>ViewModel</code> : This section is responsible for presentation logic that usually directs business logic from <code>Model</code> to <code>View</code>, or give input from <code>View</code> to <code>Model</code>.</li>
<li><code>Model</code> : This section serves as the brain of the application. This section is responsible for business logic that will be directed to <code>View</code> from <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 here — 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 <code>HomeFragment</code> and <code>DetailFragment</code> (View Section), each fragment has own <code>ViewModel</code> (ViewModel Section), that will refer to repositories/service (Model Section). In repositories, we will retrieve our data from <code>rawg.io</code> REST API.</p>
<p><a href="https://betterprogramming.pub/mvvm-in-jetpack-compose-part-4-fe757a1a1b84">Read More</a></p>