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