reative ui
TRANSCRIPT
Reactive UIMike Bluestein
Developer Evangelist Xamarin [email protected]
@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