This document discusses Reactive UI, a cross-platform MVVM framework built on Reactive Extensions (Rx). It provides an overview of Rx basics like Observables, Observers, and queries. It also describes how Reactive UI uses Rx concepts like ReactiveObject for view models, Bindings for view-model binding, and ReactiveCommand for executing asynchronous commands. The document concludes with a demo of Reactive UI in action and resources for learning more about Rx and Reactive UI.

1. Reactive UI
Mike Bluestein
Developer Evangelist Xamarin
mike.bluestein@xamarin.com
@mikebluestein
!
!
!
!
CT Code Camp
5/17/2014

2. Agenda
• Reactive Extensions for .NET
• ReactiveUI

3. Reactive Programming
Push instead of Pull

4. Reactive Extensions (Rx)

5. –Erik Meijer
“Rx is a library for composing asynchronous
and event-based programs using observable
collections.”

6. Reactive UI
Cross-Platform MVVM built on Rx

7. Rx Basics

8. Duality
• IObserveable/
IObserver
• dual to IEnumerable/
IEnumerator
• represent a data
source and a listener,
respectively

9. Observable
• IObservable<T> - async data stream that can be
observed
• Subscribe - similar to registering an event handler

10. Observer
• IObserver<T> - observe an IObservable<T>
• OnNext, OnCompleted, OnError

11. Observable vs. Events
• Declare, Publish, Subscribe
• Subject, OnNext, Subscribe
• Subscribe can take delegates for IObserver
methods
• Observable.FromEventPattern<T>
• Returns IEvent objects containing the sender
and event arguments

12. Queries
• LINQ methods added to IObservable

13. Queries
myObservable.Throttle(…)
.Select(x => …)
.Where(x => …)
.Subscribe(…)

14. Observable Composition
Dragging event composed of mouse button and mouse move events:
!
IObservable<Event<MouseEventArgs>> draggingEvent =
from mouseLeftDownEvent in control.GetMouseLeftDown()
from mouseMoveEvent in control.GetMouseMove().Until(control.GetMouseLeftUp())
select mouseMoveEvent;
from http://www.hanselman.com/blog/ReactiveExtensionsRxIsNowOpenSource.aspx

15. Reactive UI

16. –Paul Betts
“ReactiveUI is a cross-platform MVVM
framework, built around the Reactive
Extensions”

17. MVVM on Rx
• ViewModel
• Command
• Binding
• Property Change Notification

18. ReactiveObject
• Base class for view models
• Observables for property change notifications

19. Bindings
• IViewFor<T> - routing and binding on views
• Bind ( … )
• OneWayBind ( … )

20. ReactiveCommand
• Registers async method to be called when
command is executed

21. Demo
ReactiveTableViewController

22. Resources
• Rx on MSDN
• http://msdn.microsoft.com/en-us/data/gg577609
• Rx source on Codeplex
• https://rx.codeplex.com
• ReactiveUI source on Github
• https://github.com/reactiveui/ReactiveUI