Intro

The purpose of this post is to put in practice and crystallise what we learnt in the Reactive Programming post. The deliverable of this post is a desktop application built with WPF (MVVM) and Rx. However, the concepts apply to any UI framework; web, mobile, or desktop.

If you want to know more about reactive programming and Rx check my posts tagged with Rx.

Requirements

Largely we need an application that will enable the user to start and stop monitoring certain stock prices.

The prices will update every 5 seconds. The users should be able to submit a purchase order for a selected stock.

The user should also be able to filter the stock items based on symbol name.

The user should be able to get historic data per stock.

Finally, the app should be responsive.

Rx Thinking

Reactive is about getting notified of data changes; a data source pushes changes to subscribed observers. In other words whenever you come across a problem where a state gets changed this state can be observed. A data change source is pretty much everywhere. A user input text box, a status label, task completion, progress report, button click, mouse movement, return result of a method, database read, or web request, etc.

Quick Design

For certain data changes Rx might be an over engineering. Next lets identify the data change sources:

  1. Start/Stop Button
  2. Filter text input – starts filtering after 300msec pause of the last keystroke (Rx Throttling)
  3. Periodic update of stock prices source
  4. Load historic prices per company (demonstrating yield with IO bound operation)

Next section will demonstrate code snippets of the above design points.

The App

rxsampleapp

screenshot-2016-12-14-14-55-16

Implementation

Adopting the reactive approach means we going to have a data source and a data observer (or a consumer and provider). For instance, a UI button click event handler (consumer) invokes a backed service (provider) that returns certain data. The options are that the back end is not reactive aware hence you have to accommodate the consumer to let return data act as a reactive source. Alternatively, the provider is reactive aware and return IObservable<T> ready for the consumer to hook onto it.

Reactive Provider

First code snippet shows the XAML code for the filter text input and toggle button. The state of the filter text and button are bound to a notification property in the view model (Window’s data context).

From Rx the Observable.FromEventPattern<PropertyChangedEventArgs>(…) extension is used to convert a CLR event to an observable source. With MVVM each notification property in the VM notifies a dependency property from the View by implementing the INotifyPropertyChanged. Every time a property is set it fires ProperyChanged event. Hence, we can treat such event as an observable source using the following extension.

Reactive Consumer

For demonstration purposes in the history view I am using slightly different approach. The back-end service yields results fetched from data source (e.g. DB via Web API). In the view i am converting the IEnumerable to observable source.

Source Code

Download

Leave a Reply

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