reative ui
TRANSCRIPT
![Page 1: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/1.jpg)
Reactive UIMike Bluestein
Developer Evangelist Xamarin [email protected]
@mikebluestein !!!!
CT Code Camp 5/17/2014
![Page 2: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/2.jpg)
Agenda
• Reactive Extensions for .NET
• ReactiveUI
![Page 3: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/3.jpg)
Reactive Programming
Push instead of Pull
![Page 4: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/4.jpg)
Reactive Extensions (Rx)
![Page 5: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/5.jpg)
–Erik Meijer
“Rx is a library for composing asynchronous and event-based programs using observable
collections.”
![Page 6: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/6.jpg)
Reactive UI
Cross-Platform MVVM built on Rx
![Page 7: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/7.jpg)
Rx Basics
![Page 8: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/8.jpg)
Duality• IObserveable/
IObserver
• dual to IEnumerable/IEnumerator
• represent a data source and a listener, respectively
![Page 9: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/9.jpg)
Observable
• IObservable<T> - async data stream that can be observed
• Subscribe - similar to registering an event handler
![Page 10: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/10.jpg)
Observer
• IObserver<T> - observe an IObservable<T>
• OnNext, OnCompleted, OnError
![Page 11: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/11.jpg)
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
![Page 12: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/12.jpg)
Queries
• LINQ methods added to IObservable
![Page 13: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/13.jpg)
Queries
myObservable.Throttle(…) .Select(x => …) .Where(x => …) .Subscribe(…)
![Page 14: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/14.jpg)
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
![Page 15: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/15.jpg)
Reactive UI
![Page 16: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/16.jpg)
–Paul Betts
“ReactiveUI is a cross-platform MVVM framework, built around the Reactive
Extensions”
![Page 17: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/17.jpg)
MVVM on Rx
• ViewModel
• Command
• Binding
• Property Change Notification
![Page 18: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/18.jpg)
ReactiveObject
• Base class for view models
• Observables for property change notifications
![Page 19: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/19.jpg)
Bindings
• IViewFor<T> - routing and binding on views
• Bind ( … )
• OneWayBind ( … )
![Page 20: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/20.jpg)
ReactiveCommand
• Registers async method to be called when command is executed
![Page 21: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/21.jpg)
DemoReactiveTableViewController
![Page 22: Reative UI](https://reader034.vdocument.in/reader034/viewer/2022042501/554f5dafb4c905c8088b4803/html5/thumbnails/22.jpg)
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