MVI - Overview with Linked Examples

Below, I will focus mainly on MVI, but I will also try to highlight the difference between it and MVVM. If you think you understand the difference but are not 100% sure, I hope this helps bring a little clarity. There will be short code samples later to try and highlight the difference.

This blog post is by no means exhaustive, but should serve as a good introduction and overview with relevant links for the details.

This blog targets everyone from newer Android Compose programmers to more experienced developers. For the newer programmer, the introduction of this concept should help you organize your code better. 

For the more experienced developers, this should serve as a good review and may give additional insights or clarification when explaining these concepts to others. There are also a couple of other posts I have planned that extend on this theme that should be interesting to intermediate to more advanced developers.

All the code examples and related explanations have been split off into a separate post to make thing a little easier to navigate. GitHub Gists can be found along with the examples and again at the end of this post.

MVI

Summary

MVI, Model-View-Intent, is widely considered the standard default recommended practice for Android Jetpack Compose Apps.

It prescribes a pattern for connecting the UI and data.

Main Features

• Unidirectional Data Flow (UDF)
• Single Source of Truth (Immutable)
• Simplifies Complexity
• Predictable (therefore easier to Debug and Test)
• Pairs well with Steams and Coroutines

Brief History (Why We Changed)

Before Compose and MVI became standard, we generally used MVVM (Model-View-ViewModel) with XML Layouts. This worked quite well for smaller, simple apps, but it soon became quite error-prone and messy as things got more complex. Basically, things tended to get out of sync between the UI and the data and would often lead to impossible states. I learned this through my own experience many years ago.

From my limited research, I believe MVI was first introduced / popularized into Android development back in 2017 with Hannes Dorfmann Fragmented Podcast. Before that, it is thought to have originated late 2014 with this blog post by André Staltz as part of the Cycle.js framework.

MVI Variations

There are excellent variations of the MVI pattern - Google uses what it calls UDF. When we talk about MVI, it may not always exactly be MVI, but it is often used as a blanket term to cover variations of this basic pattern that generally follow most of the main features I mentioned above.

As with any pattern or design, dogmatic practices (following 100% without thinking) are discouraged. If something feels wrong, it probably is.

If you are an enthusiastic Android programmer, you may know about Philipp Lackner's excellent YouTube Channel and PL Coding site. He made a good video covering the difference between MVVM vs. MVI and also explains his hybrid approach. I strongly recommend watching this video if you haven't already.

Code Examples

Please look at the Code Examples (not yet posted) before continuing any further. In that post, I cover a minimal example of MVI, a practical example, and a comparison with MVVM.

Reminder: Please read Code Examples (not yet posted) before continuing.

MVI (UDF) vs. MVVM Summary

For myself, I definitely prefer MVI for more complex work. I'll often use MVVM for smaller tasks and prototyping. I will also sometimes use a hybrid approach where I use MVI for most of the work and then add a little MVVM to test new ideas. 

Really, just do what works best for you (and your team). Try to keep your code easy to work with. I think that's the main consideration. Efficiency generally comes second.

MVI (UDF) vs. MVVM Confusion

A lot of people lack confidence explaining the difference even after studying from numerous resources.

I feel the reason so many people struggle to understand the difference between the two is twofold:

• The names are very similar so not easy to remember. A more distinct name would have been far easier for people to link the ideas.
• The difference is not really clearly reflected in the name.

Naming

If you need to remember the naming:

• Both - M - Model (Data / Repository)
• Both - V - View (UI)
• MVI - I - Intent (Action)
• MVVM - VM - ViewModel

MVI does not specifically mention the ViewModel and MVVM doesn't talk about actions. Trying to compare the pattern names also leads to confusion.

I've seen a lot of diagrams out there on the internet trying to explain MVI and MVVM. I don't think they really help.

Simplified Diagram

Instead, I think one diagram for both patterns makes more sense.

It is hard to understand the difference from a diagram so lets not try to do that. This diagram combined with the notes below, I think, is the best way to understand the  difference.

MVI (UDF) & MVVM Diagram for Android Compose

Note: The colors represent how requests / data are likely changed in each step of the process. The UI action to the ViewModel may result in a few requests to get required data. Data passed back to the ViewModel may get repackaged or converted before being sent to the UI.

Using this diagram, we can now focus on the difference:

MVI / UDF (Single Stream Approach)

• UI Actions - One function to pass requests to the ViewModel
• UI State - One data class that passes up the entire UI State for display to the user

MVVM (Individual Approach)

• UI Actions - Individual calls to the ViewModel
• UI State - Individual values that can be requested from the ViewModel

So the flow of data in terms of direction looks exactly the same; the difference is how the UI and ViewModel communicate.

Final Thoughts

Keep things simple. Remember the Single Stream Approach (UDF) for MVI and the Individual Approach for MVVM. I think that's the best way to remember the difference.

When working on your code, do whatever feels more natural and what you find easier to work with. Don't force yourself to use a pattern just because people tell you to; however, if you can't understand the benefits of MVI, I would strongly suggest using it a little more. You may be missing something important.

As well as the base MVI pattern outlined above, I also plan to post a few more related patterns that work alongside MVI. I will link those here once they are ready.

Links

My links

GitHub Gists

• Example 1: MVI - Basic Color Selector
• Example 2: MVI - Advanced Color Selector
• Comparison Example: MVVM - Advanced Color Selector

Posts

• Code Examples
• MVI - Desired State Pattern (work in progress - not yet live)
• MVI - Action Handler (work in progress - not yet live)

Official links

Google:

• Android Jetpack Compose
• Recommendations for Android architecture - Labeled UDF (Unidirectional Data Flow)

Other Links

Philipp Lackner (YouTube / Website) - Recommended Videos

• MVVM vs. MVI - Understand the Difference Once and for All
• MVVM in a Nutshell
• The Ultimate Beginner's Roadmap to Android App Architecture
• PL Coding Site

References

• Yes, That’s MVI - Pro Android Dev Post
• MVVM - Microsoft .Net Link