android architecture: Part 4: MVVM with RxJava

By | May 13, 2018


What is MVVM architecture?

Model-View-ViewModel (MVVM) is a successor of MVC, invented by Microsoft architects to apply event-driven programming to applications involving user interface (UI) (Here is the original article). Separation of concerns reaches its highest in this architecture, as the different parts of the architecture are completely separate and have minimum dependence on each other.

The figure below shows how MVVM compares to MVP and MVC. Contrary to MVC and MVP, there is no two-sided relation between the View and ViewModel in MVVM. In other words, the ViewModel does not even know who the View is. The same is also true for the ViewModel and the Model.

 

 

The above separation in MVVM is very favourable in writing modular applications. For example, replacing the View in MVVM for another View does not have a single effect on the architecture, since ViewModel is completely View agnostic. Also because the Model does not have or use any instance of the ViewModel, changing the ViewModel would not affect it, namely the Model is ViewModel agnostic. Thus the flow control is one-sided from the View (UI) to the Model, which is one of the principles of a clean architecture.
Due to the one-way flow control of MVVM, the outer layers of the architecture cannot be directly informed of the changes in inner layers by the inner elements. Instead they can observe for changes by subscribing to the data of interest in inner layer elements. I will explain this more in the next section.

 

MVVP architecture in android

Let’s suppose the same benchmark movie app example introduced in the first part of this series. User enters a search term for a movie and presses the ‘FIND’ button, based on which the app searches for the list of movies including that search term and shows them. Clicking on each movie on the list then shows its details.

 

 

I will now explain how this app is implemented in MVVM followed by the complete android app, which is available on my GitHub page.

When the user clicks on the ‘FIND’ button on the View, a method is called from the ViewModel with the search term as its argument:

 

The ViewModel then calls the findAddress  method from the Model to search for the movie name:

 

When the response comes from the Model, the onSuccess  method of the RxJava observer carries the successful result, but as the ViewModel is View agnostic, it does not have or use any View instance to pass the result for showing. It instead triggers an event in the resultListObservable  by calling  resultListObservable.onNext(fetchItemTextFrom(t)) , which is observed by the View:

 

So the observable plays a mediator role between the View and ViewModel:

  • ViewModel triggers an event in its observable
  • View updates the UI by subscribing to ViewModel’s observable

Here’s the full code for the View. In this example, View is an Activity class, but Fragment can also be equally used:

 

Here is the ViewModel:

 

and finally the Model:

 

Full project is on my GitHub page here.

What I like and dislike about MVVM?

I really like it, no flies on it to me. It has all the advantages of MVP, plus better separation of concerns and thus maintainability, extendability and testability. It also leads to less code than MVP on larger projects. For this sample app, however, the difference was not significant.

The only downside to this architecture might be the need for learning some event-driven or reactive programming. In android this is usually realised using Eventbus, RxJava/android or LiveData among others.

Also care must be taken to cancel the subscription of the observers to the observables according to the lifecycle of the view. If not properly done this can result in exceptions.

The bottom line is that MVVM seems to be the preferred architecture by Google. The architecture components introduced by Google in the last two years, i.e. ViewModel, LiveData, Lifecycle, are all based on MVVM architecture. I will write a complete series on architecture components later on.

 

Please help by spreading the word:

2 thoughts on “android architecture: Part 4: MVVM with RxJava

Leave a Reply

Your email address will not be published. Required fields are marked *