Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Reactiveui 
@samhogy 
Cross-platform MVVM with
Cross-Platform Requirements 
Responsiveness 
Code Sharing 
Reliability
Code Sharing
Views 
View Model 
Model 
__________ 
Shared code
1.Properties 2. Commands 3. Data Binding 
What is shown? 
What can be done? 
What’s a View Model?
Asynchrony 
Concurrency 
Testability 
Portability 
Responsiveness 
Event Management
Observable 
subscribe(Observer) 
Observer 
update() 
1 
* 
publisher 
Subscriber
Reactive-Extensions/Rx.NET 
Rx-Main 
(The Reactive Extensions) 
Rx
IObservable<T> 
subscribe(Observer<T>) 
IObserver<T> 
onNext(T item) 
onCompleted() 
onError(Exception e) 
1 
*
Zero or more 
Followed optionally by either 
onNext 
onCompleted 
onError 
or
h 
e 
l 
l 
o 
! 
ALMOST ANYTHING CAN BE IOBSERVABLE! 
X 
X: 50 y: 50 
X: 55 y: 60 
X: 60 y: 70 
X: 65 y: 75
Enumerable vs Observable 
T MoveNext() throw Exception return 
OnNext (T item) OnError (Exception) OnCompleted()
Enumerables model data at rest 
Observables model data in motion 
Rx = LINQ to Events
clickObservable 
Observable.FromEventPattern 
<RoutedEventHandler, RoutedEventArgs>( 
h => btn.Click += h, 
h => btn.Click...
.Buffer(TimeSpan.FromSeconds(0.2), 2) 
.Select(x => x.Count()) 
.Where(x => x > 1) 
.. 
2 
2 
. 
1 
.. 
.. 
2 
2 
2 
2 
cl...
Responsiveness
PercentageCompleteObservable 
.SubscribeOn(RxApp.TaskPoolScheduler) 
.ObserveOn(RxApp.MainThreadScheduler) 
.Subscribe(x =...
Testability
TestScheduler 
advanceTimeBy(TRelative time) 
advanceTimeTo(TAbsolute time) 
start() 
Test with Virtual Time
Let’s test our MouseDown to DoubleClick code! 
DEMO
ReactiveUI 
reactiveui 
( Rx + Cross-Platform MVVM ) 
REACTIVEUI
Simple handling of properties that implement INotifyPropertyChanged 
this.RaiseAndSetIfChanged
Makes it easy to convert 
observables into properties 
and properties into observables 
ToProperty() 
this.WhenAnyValue
Manage when commands can execute, or are executing, 
using observables 
Ensure they are scheduled correctly 
ReactiveComma...
Cross-platform data binding to your views 
this.Bind this.OneWayBind this.BindCommand
Cross-platform scheduling 
RxApp.MainThreadScheduler RxApp.TaskPoolScheduler
Github for Windows
Progenesis QI for proteomics
ReactiveFlickr 
sh1989/ReactiveFlickr
ReactiveFlickr 
Desktop 
Mobile 
Test
Show me the codes! 
DEMO
Thanks! 
@samhogy 
Any questions?
Upcoming SlideShare
Loading in …5
×

Keep it responsive! Cross-platform MVVM with ReactiveUI

3,116 views

Published on

Building an awesome user interface is hard work. You’ve got the complexities of real life to deal with - handling user inputs, dealing with slow network connections and managing background workers. There’s also this testing thing that people keep going on about!

We need a way of handling the real world, whilst behaving in a predictable and responsive manner. Enter ReactiveUI, a fusion of MVVM and the Reactive Extensions (Rx) for .NET applications.

Published in: Technology
  • Be the first to comment

Keep it responsive! Cross-platform MVVM with ReactiveUI

  1. 1. Reactiveui @samhogy Cross-platform MVVM with
  2. 2. Cross-Platform Requirements Responsiveness Code Sharing Reliability
  3. 3. Code Sharing
  4. 4. Views View Model Model __________ Shared code
  5. 5. 1.Properties 2. Commands 3. Data Binding What is shown? What can be done? What’s a View Model?
  6. 6. Asynchrony Concurrency Testability Portability Responsiveness Event Management
  7. 7. Observable subscribe(Observer) Observer update() 1 * publisher Subscriber
  8. 8. Reactive-Extensions/Rx.NET Rx-Main (The Reactive Extensions) Rx
  9. 9. IObservable<T> subscribe(Observer<T>) IObserver<T> onNext(T item) onCompleted() onError(Exception e) 1 *
  10. 10. Zero or more Followed optionally by either onNext onCompleted onError or
  11. 11. h e l l o ! ALMOST ANYTHING CAN BE IOBSERVABLE! X X: 50 y: 50 X: 55 y: 60 X: 60 y: 70 X: 65 y: 75
  12. 12. Enumerable vs Observable T MoveNext() throw Exception return OnNext (T item) OnError (Exception) OnCompleted()
  13. 13. Enumerables model data at rest Observables model data in motion Rx = LINQ to Events
  14. 14. clickObservable Observable.FromEventPattern <RoutedEventHandler, RoutedEventArgs>( h => btn.Click += h, h => btn.Click -= h)
  15. 15. .Buffer(TimeSpan.FromSeconds(0.2), 2) .Select(x => x.Count()) .Where(x => x > 1) .. 2 2 . 1 .. .. 2 2 2 2 clickObservable
  16. 16. Responsiveness
  17. 17. PercentageCompleteObservable .SubscribeOn(RxApp.TaskPoolScheduler) .ObserveOn(RxApp.MainThreadScheduler) .Subscribe(x => ); Runs on background thread Runs on UI Thread Console.WriteLine
  18. 18. Testability
  19. 19. TestScheduler advanceTimeBy(TRelative time) advanceTimeTo(TAbsolute time) start() Test with Virtual Time
  20. 20. Let’s test our MouseDown to DoubleClick code! DEMO
  21. 21. ReactiveUI reactiveui ( Rx + Cross-Platform MVVM ) REACTIVEUI
  22. 22. Simple handling of properties that implement INotifyPropertyChanged this.RaiseAndSetIfChanged
  23. 23. Makes it easy to convert observables into properties and properties into observables ToProperty() this.WhenAnyValue
  24. 24. Manage when commands can execute, or are executing, using observables Ensure they are scheduled correctly ReactiveCommand ReactiveAsyncCommand
  25. 25. Cross-platform data binding to your views this.Bind this.OneWayBind this.BindCommand
  26. 26. Cross-platform scheduling RxApp.MainThreadScheduler RxApp.TaskPoolScheduler
  27. 27. Github for Windows
  28. 28. Progenesis QI for proteomics
  29. 29. ReactiveFlickr sh1989/ReactiveFlickr
  30. 30. ReactiveFlickr Desktop Mobile Test
  31. 31. Show me the codes! DEMO
  32. 32. Thanks! @samhogy Any questions?

×