Architecture Design by pxhere.com

[Architecture Design] — Exploring MVI from MVVM

MVVM, MVP, MVC and MVI

Every Android Developer must have heard of these design patterns in their quest. Before knowing about MVI(Model-View-Intent), Let me tell you that I had been using MVVM(Model-View-View-Model ) and had no plans to migrate to some other design patterns until I encountered the State Problem(two or more screens are overlapped to each other). In this article, I want to share my experiences with the MVI Design Pattern.

As stated, Let’s Understand Why MVI?

Why MVI?

“From my point of view, Parent-Child relations are a code smell, because they introduce a direct coupling between both Parent and Child, which leads to code that is hard to read, hard to maintain, where changing requirement affects a lot of components” — HANNES DORFMANN

The following are the reasons which will compel you to migrate to Model-View-Intent.

• No state problem — It might be quite confusing that some times when you try to see the whole picture of the problems state (since you’ll need to take into account such parameters as text, progress bars, lists, etc). In addition to it, also there are chances that one state overlaps the other as in case of loading and error states.
• Immutability and unidirectional data flow — This feature significantly simplifies both development and support of the application as we just need a single method for rendering ViewState in your Activity, Fragment, View, etc.
• Debuggable and reproducible states — Having only one version of ViewStates makes it simple to determine bugs.
• Decoupled logic — Each component in ViewStates has its responsibility.
• Testability — ViewState enables you to write the tests.

To Understand MVI more clearly let’s first figure out, what MVI is?

What Is MVI?

In general, if we see Model-View-Intent from a mathematical point of view(f:X→Y), We have inputs ‘X’ and we perform some function ‘f:’ to it and give back outputs ‘Y’.

every architecture has its components, So does MVI, and the good thing is that the addition of User in the pattern itself is what makes it different from other Architectural design patterns.

Graph Model-View-Intent

User Interacts with the UI, like when the user clicks on the button then this becomes Intent() which Manipulates the State of the screen via checking our business logic in our Model(), and Model() Updates the Views(), then User will See the New State.

Simple isn’t it?

As you already know that there is a unidirectional flow of data that ensures that none of these components break this chain and start interacting with each other. This kind of approach restricts any change in the State of the system only via a defined set of actions (intentions). Any undefined action of the user can not cause any undesired change to our System.

And also this enables easy debugging of our application like if our app crashes somewhere we know what is the current state of User when it crashed.

Implementation of MVI on a Sample Project

I have created this sample project in which I have shown the Superhero Card when User Clicks on Button.

sample project

Step 1)- Adding Dependencies

Open build.gradle(project: app) and the following code snippet under dependencies.

Step 2)- Defining MainViewState

This class contains all the possible ViewStates that you want to be shown to the user.

Step 3) — Create MainView Interface extend with MvpView

Step 4) — Create a PartialViewState Interface

This interface will control the State of Our application.

Step 5)- Create One DataSource

Step 6)- Create an Another Class MainPresenter

And extends this class with MviBasePresenter<MainView, MainViewState>

Step 7) —Update the Views on MainActivity

And you are done!

GitHub Link here!

If you like this article then leave a clap,🙌

If you want to know more about MVI, I would highly recommend checking out the below-mentioned references.

References

• Benoît Quenaudon. Model-View-Intent for Android
• Garima Jain. Why MVI? Model View Intent — The curious case of yet another pattern
• Hannes Dorfmann. Reactive apps with Model-View-Intent
• Kausik Gopal. RxJava by Example — Volume 3, the Multicast Edition
• Jake Wharton. Managing State with RxJava
• Hannes Dorfmann. Android Software Architecture by Example
• video: Android Development Tutorial — Hello MVI (Model-View-Intent)