reative ui

Reactive UIMike Bluestein

Developer Evangelist Xamarin mike.bluestein@xamarin.com

@mikebluestein !!!!

CT Code Camp 5/17/2014

Agenda

• Reactive Extensions for .NET

• ReactiveUI

Reactive Programming

Push instead of Pull

Reactive Extensions (Rx)

–Erik Meijer

“Rx is a library for composing asynchronous and event-based programs using observable

collections.”

Reactive UI

Cross-Platform MVVM built on Rx

Rx Basics

Duality• IObserveable/

IObserver

• dual to IEnumerable/IEnumerator

• represent a data source and a listener, respectively

Observable

• IObservable<T> - async data stream that can be observed

• Subscribe - similar to registering an event handler

Observer

• IObserver<T> - observe an IObservable<T>

• OnNext, OnCompleted, OnError

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

Queries

• LINQ methods added to IObservable

Queries

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

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

Reactive UI

–Paul Betts

“ReactiveUI is a cross-platform MVVM framework, built around the Reactive

Extensions”

MVVM on Rx

• ViewModel

• Command

• Binding

• Property Change Notification

ReactiveObject

• Base class for view models

• Observables for property change notifications

Bindings

• IViewFor<T> - routing and binding on views

• Bind ( … )

• OneWayBind ( … )

ReactiveCommand

• Registers async method to be called when command is executed

DemoReactiveTableViewController

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