Reactive Extensions and ReactiveUI

Presentation given at MonoSpace 2011, http://www.reactiveui.net

Transcript

1. Reactive Extensions and ReactiveUI @xpaulbettsx Tuesday, December 27, 11
2. A Model-View-ViewModel framework for WPF, Silverlight, and Windows Phone... ...that integrates the Reactive Extensions for .NET. What is ReactiveUI Tuesday, December 27, 11
3. Write completely non-blocking UIs whose interactions are described in a declarative fashion, and be able to test long-running timelines instantly using virtual time Why is that cool? Tuesday, December 27, 11
4. Not just limited to XAML! • ReactiveUI core works anywhere • ...but the Mono compiler wasn’t havin’ it • With some hacking, works on MonoTouch Tuesday, December 27, 11
5. Code in XAML code-behind is untestable - let’s move as much of our behavior into a separate object that we can test, and abstract away commands from how they’re invoked (button clicks) MVVM Tuesday, December 27, 11
6. Functional Reactive Programming Tuesday, December 27, 11
7. LINQ is Awesome • Core of LINQ is the sequence (IEnumerable) • Operators create a “pipeline” - you put stuff in, get stuff out • new[] {1,2,3,4} .Where(x => x % 2 == 0) .Select(x => x * 10); >>> [20, 40] Tuesday, December 27, 11
8. A Sequence is just some stuff in a particular order (We’ll come back to this later!) Tuesday, December 27, 11
9. Functional Reactive Programming Tuesday, December 27, 11
10. We can no longer write synchronous software in an async world. - Abraham Lincoln Tuesday, December 27, 11
11. someWindow.MouseMove += OnMouseMove; You’ve been doing Reactive Programming for years! Tuesday, December 27, 11
12. • Events aren’t composable • Creating a “DoubleClicked” event from the MouseDown and MouseUp events should be easy, but it’s not. ...it’s just always sucked. Tuesday, December 27, 11
13. What is an Event? • If I watch “KeyUp” - what comes out of that? • Event arguments: “M”, “o”, “n”, “o” • Hmmm, that looks like some stuff in a particular order. Tuesday, December 27, 11
14. Tuesday, December 27, 11
15. IObservable<T> • We need a new interface though for Observable Sequences. • If IEnumerable<T> is a “list”, IObservable<T> is a “Future List” • IObservable<T> has exactly one method: IDisposable Subscribe(IObserver<T> subscriber) Tuesday, December 27, 11
16. IObserver<T> • The equivalent to IEnumerator<T> • Three methods = three things an Observable can do: void OnNext(T value); void OnError(Exception ex); void OnCompleted(); Tuesday, December 27, 11
17. Subject<T> • Subjects are Observables we can control by-hand - they are the List<T> of Rx. • LinqPad Demo! Tuesday, December 27, 11
18. IObservable as a Future • IObservable also can practically represent a Future (i.e. like Task<T>), by returning an IObservable of length 1 and completing • Remember this, it’s important! Tuesday, December 27, 11
19. Rx Async Methods • Just like TPL async methods always return Task<T>, Rx async methods always return IObservable<T> public IObservable<int> AsyncAdd(int a, int b) { return Observable.Start(() => return a+b); } Tuesday, December 27, 11
20. Using Async Methods // Block until the async call comes back var result = asyncCall(17).First(); // Get the result async asyncCall(42).Subscribe(x => /* Do Stuff */); // Let’s try a list var results = new[]{17, 42, 87}.ToObservable() .SelectMany(x => asyncCall(x)) .ToList().First(); Tuesday, December 27, 11
21. Demo! Tuesday, December 27, 11
22. LINQ-to-Events Tuesday, December 27, 11
23. Finally, we get to RxUI • RxUI gives you three main things • An object that can be Observed (ReactiveObject) • An ICommand which implements IObservable • A collection that can be Observed (ReactiveCollection<T>) Tuesday, December 27, 11
24. Property change notifications are Events. Events => Observables. Tuesday, December 27, 11
25. RxUI is all about converting Properties to Observables, and Observables into Properties. Tuesday, December 27, 11
26. Output Properties Tuesday, December 27, 11
27. public ColorPickerViewModel() { IObservable<Color> colorValues = this.WhenAny( x => x.Opacity, x.Brightness, x.Hue, (opacity, brightness, hue) => Color.FromHSV(opacity.Value, brightness.Value, hue.Value)); colorValues.Subscribe(x => Console.WriteLine("Color is set to: {0}", x)); colorValues.ToProperty(this, x => x.FinalColor); } Tuesday, December 27, 11
28. Another Example Tuesday, December 27, 11
29. • This app consists of three things: An input (the query) An output (the array of images) A command (the “Search” button) Our ViewModel Tuesday, December 27, 11
30. ReactiveCommand SearchButton { get; protected set;} string SearchText { get; protected set;} List<BitmapImage> ImagesToDisplay { get; set; } searchButton .Select(x => this.SearchText) .Where(x => String.IsNotNullOrEmpty(x)) .SelectMany(x => fetchImagesFromBingSearch(x)) .ToProperty(this, x => x.ImagesToDisplay); Thinking Functionally Tuesday, December 27, 11
31. Testing with Virtual Time Tuesday, December 27, 11
32. Thanks! http://www.reactiveui.net Tuesday, December 27, 11