MVVM Pattern with ReactiveUI and Xamarin.Forms

Building a Cross Platform MVVM app with ReactiveUI and Xamarin.Forms.

Have you ever heard about Reactiveui ? or let’s first say Reactive Extensions (RX)?. If yes then you will be comfortable with the rest of this post, else let me just slightly introduce it to you. 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 helps makes your source code more readable and avoids 🍝 code (Know what am talking about right. 😊). Now Imagine you could leverage all of these with the MVVM architectural design pattern. This is what ReactiveUI permits developers to do and alot more. You can easily build MVVM apps with ReactiveUI and Xamarin.Forms, this post is all about that.

What we will be building

We will build a simple Todo Xamarin.Forms application which will have a login page. Here are the topics we will cover. This app is simple but it makes uses of several features of ReactiveUI

Note that our model is inheriting from ReactiveObject which is the base class for all ViewModels in ReactiveUI, But we need it here because it implements the INotifyPropertyChanged which we need for one property of our Mode “IsDone”.

ViewModels

The ViewModel will have the properties to which the view will bind and it is the one responsible for the logic performed on the data presented. We will first make a BaseViewModel from which every view model will inherit.

Now we create a command which will serve in login the user, and we do so with the ReactiveCommand public ReactiveCommand LoginCommand { get; private set; }

Remember how a login screen should function, it should only let the user have access when he has correct emai and password and when his email and passwords match certain criteria (i.e it should be validated).

Matching correct username and passwords will be done using with this service. “Don’t bother about it now, we will cover it later”.

ILogin _loginService;

The Login command should only fire when The email and password are valid. This is when the power of ReactiveUI is demonstrated!!!!!!!!. Watch carefully.

///When there is a change in either the password or email,
///This is been fired and if it is validated according to
///What is shown below, the ValidLogin Property is been updated.
this.WhenAnyValue(x => x.UserName, x => x.Password,
(email, password) =>
(
///Validate the password
!string.IsNullOrEmpty(password) && password.Length > 5
)
&&
(
///Validate teh email.
!string.IsNullOrEmpty(email)
&&
Regex.Matches(email, "^\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$").Count == 1
))
.ToProperty(this, v => v.ValidLogin, out _validLogin);
///We add the logic first, describing what the login command will perfom when ran
///And we add a CamExecute clause which states that the command will be able to execute only
///If Email and Password are valid, that is, when ValidLogin has a value of true.
LoginCommand = ReactiveCommand.CreateFromTask(async () =>
{
var lg = await login.Login(_userName, _password);
if (lg)
{
HostScreen.Router
.Navigate
.Execute(new ItemsViewModel())
.Subscribe();
}
}, this.WhenAnyValue(x => x.ValidLogin, x => x.ValidLogin, (validLogin, valid) => ValidLogin && valid));

The ValidLogin Property is what is called a OAPH this is used when a property’s value depends on another property. Declared as follows.

The ItemsViewModel will be for the Todos which the user will use. It has several portions similar to the LoginViewModel, but here is what is new in it.

This view model has a property called Todos which is a ReactiveList of Todo Items. This list is an improved version of Observable collections, with addintional events one of which is the capability of listening to when an item changes in the list.

When ever a user will mark a todo as completed, the item will be sent to the bottom of the list and set as inactive on the View. Here is how this is done.

The Demo app should be functional and hopefully, this post will help you get started with this awesome Framework.

This Xamarin Forms application to help you manage your expenses and income was built entirely with Xamarin Forms and ReactiveUI. You can download and use it or play with it for free on Android and Windows 10 (Universal Windows Platform). You can get it on Playstore, or on the Microsoft Store.

Follow me on social media and stay updated

Like this:

Conclusion

All the simplicity and the beauty which Reactive extensions brings to us, is like a blessing. This post just covers a little bit of what you can do when you combine the power of Reactiveui and Xamarin.Forms . You can for example, decide to listen to changes on a property, then delay, and perform an action by invoking a command. You can also, subscribe to this delay to manipulate your code later. This is extremly usefull in several scenarios. In fact, just have a glance at the documentation on Reactiveui and Reactive Extensions for .Net.

If you liked this post, or it was useful to you, please 👍 like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter and like my page on facebook.