Hello friends, today we will have an introduction to my favorite MVVM framework ReactiveUI. I wrote an article about reactiveui a while ago you can find it here. But that article is outdated, since the framework has evolved. The software development world grows so fast and this article can be seen as my effort to keep up the pace.

What is Reactiveui

As mentioned on their website, Reactiveui is An advanced, composable, functional reactive model-view-viewmodel framework for all .NET platforms!

Reactiveui leverages reactive programming to facilitate the implementation of the MVVM pattern in your apps. Also, Reactiveui is not very opinionated as compared to other MVVM frameworks. Ever heard of Reactive Extensions ?Reactive Extensions (RX) is a library which provides you a convenient way to declare callbacks and manage asynchronous executions in your code and it does all of this using the LinQ syntax. It makes your source code more readable and avoids ? spaghetti code. Now Imagine you could leverage all of these to implement the MVVM architectural design pattern. This is what ReactiveUI permits developers to do and a lot more.

What we will build

Reactiveui is available on several platforms but in this post, we will use reactiveui in a Xamarin Forms application. Its usage is similar on every platform. So knowing how to use reactiveui with Xamarin Forms will still be profitable to you even if you are a WPF developer.

We will build a simple TODO application which will showcase several features of reactiveui.

If you like this post, don’t hesitate to follow me on Twitter or Github and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.

Here is the source code for the app implemented in this blog post.

Model, ViewModel and the ReactiveObject

The reactive object contains an implementation of INPC. Thus it is used to notify property changes on view models and if necessary on models too. To notify property changes in a property, this method is used:

For example, in our todo app, the base view model has a property named “IsBusy”. The role of this property is to notify the UI that the app is busy everytime its value is set to true.

In our case, the model is represented by the Todo class. This class also inherits from the ReactiveObject we will discuss why later.

Commands

In reactiveui, commands are made using the ReactiveCommand. It permits us to create commands from simple methods, from tasks, from observables… Here are a few examples bellow.

Bellow, we want to perform a simple synchronous operation in our command so we create it using a normal method.

Bellow, we want to perform an asynchronous operation in our command. So, we create our command from a method which returns a task. At the same time the command should have a parameter.

Observing Property changes

This is one of my favorite feature in reactiveui. You can easily observe property changes in your view model and perform actions such as Changing a command’s execution state. Some other implementations of MVVM require developers to go in the property’s setter to perform actions when a value changes. You can even combine property changes to create a unique observable.

For example, in our TODO application, we want some commands to be unable to execute when the view model is busy. With reactiveui, we the “WhenAnyValue()” method to create an observable, and pass that observable as parameter when creating our commands. That is all.

NB: in case property changes are not fired in your observable, you will have to install an additional nuget package. “Fody” and add the “[Reactive]” attribute to the property you want to observe.

For example, observing several properties at a time. Below, we want to enable the save command only when a todo item’s title and description has been set.

Dynamic Data

Have you ever wanted a tool which will permits you to leverage the power of reactive extensions in a collection of items ? Dynamic data is made for you. In this article we will only have a little introduction to Dynamic data. You can find more about it here.

Dynamic data is kind of an evolution of ReactiveLists which is now deprecated. Dynamic data is found in a different nuget package

In our list of todo items, we want an item to be removed from the list if it is marked as completed. To do this, we need to monitor property changes for items in our collection. Dynamic data permits us to do this. This is why our Todo class inherits from the reactive object. To notify when its “IsCompleted” property is set to true.

Validation

The ability to validate user input is a crucial part of your view model. Reactiveui permits you to validate data on the fly using its built in methods “WhenAny and WhenAnyValue”. You can use these methods to create observables and check data validity.

But for more complex scenarios, the above method of validation might not be ideal. You can use Reactiveui.Validation which provides a way to perform validation in a more sophisticated way. You can find more about it here.

Though these are great ways to implement validation in Reactiveui, there is another way. Based on David Britch’s article about enterprise validation. I implemented his approach but added Reactiveui’s features on top to provide a better data validation tool.

First we have the ValidatableObject, which represents the data object to be validated. It leverages reactiveui’s observable to perform automatic validation.

Then you have the validation rules which are added to your validation object. The validation object has a set of rules you give it, then observes when its value change to check its value’s validity. This is absolutely simple and clean validation.

The complete implementation is found in this repository. This is how to use it in your view model:

Service Location with Splat

Splat is a light weight library which has several functionalities. It can be used as a dependency injection container. In this situation, you can think of it as the dependency injection container found in your View Model Locator or App Locator. Bellow we have an example:

Splat is found in a different nugget package. You can learn more about splat here and all its features.

Interactions

Interactions in reactiveui is a tool used to communicate between your app’s components. It reminds me of the Messaging Center in Xamarin Forms. You can use it in scenarios like requesting user confirmation before performing specific actions in your view model. In our app, we will use interactions to call from the view model a confirmation dialog in the view before deleting a todo item.

Meanwhile in the view:

Conclusion

Using our simple Xamarin Forms todo application, we explored several features of Reactiveui. There you have an overview of using Reactiveui with Xamarin Forms. Though Reactiveui is cross-platform, and what is demonstrated here works on other platforms.

References

https://reactiveui.net/

https://github.com/reactiveui/ReactiveUI.Validation

https://devblogs.microsoft.com/xamarin/validation-xamarin-forms-enterprise-apps/

Follow me on social media and stay updated

2 comments

  1. Anthony Armfield

    Reply

    Thanks for this breakdown. It is really clean and easy to understand. I would like to subscribe to your blog, but can’t find a way to subscribe to get alerts to my email. Are you planning on building a mailing list?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.