This document discusses ReactiveUI, a lightweight MVVM framework for Xamarin.Forms based on Reactive Extensions (Rx), highlighting its capabilities for asynchronous programming and data binding. It covers various components such as observables, schedulers, and methods to utilize ReactiveUI with Xamarin.Forms, including binding views to view models and managing view states efficiently. Additionally, it provides useful resources such as operator references, example projects, and further reading links related to ReactiveUI and Rx.

1. Reactive UI
on
Xamarin.Forms
What is Rx and how to use Related MVVM framework on
Xamarin.Forms

2. ReactiveUI
Lightweight MVVM framework based on “Rx”(Reactive Extension):
• http://reactiveui.net/
• http://github.com/reactiveui/ReactiveUI
.NET Foundation project, MIT License
Can apply onWindows Forms, UWP, WPF, Xamarin , Xamarin.Forms

3. What is Rx?
• Rx(ReactiveX): Reactive Extension for async programming http://reactivex.io/
• .NET library (.NET Standard 2.0, Apache License):
Nuget: http://www.nuget.org/packages/System.Reactive/
Source: http://github.com/dotnet/reactive
• Other Language Implementation: http://reactivex.io/languages.html
• Rx = Observables + LINQ + Schedulers (LINQ for event & async data steam)
• Observable : Push Data model
• Scheduler :Virtual Clock(Fast forward for testing) &WorkerThread orchestrator
• Rx is declarative & composable & unified & reactive

4. Pull vs. Push
IObserverableIEnumerable
Pull Data
(Fetch)
Push Data
(Subscribe)
Interactive Reactive
Call
Function
Event
Handler

5. Event Handler vs. Event Stream
(Time consideration)
Rx OperatorEvent Handler

6. Demo: Using Rx for Event
Color Selector
• Source Repo: http://bit.ly/2LG9Ace
• Using FromEventPattern() helper method (src:
http://bit.ly/2KaoeTu ) , wrap event source into an
observable event stream

7. Use Do() Operator to help debugging observing pipelines:
http://reactivex.io/documentation/operators/do.html

8. Demo: Rx for Async/Await
Search Bar auto-complete
• Source Repo: http://bit.ly/2vqG1jR
• Using Rx, we can prevent redundant or
intermediate state query, saving bandwidth

9. Using ToObservable<TResult>() helper method (src: http://bit.ly/2OBU2nE ),
Function returns Task<TResult> can convert to IObservable<Tresult>
Reversely can additionally call FirstAsync() or LastAsync() to make Observable stream awaitable:
https://rehansaeed.com/reactive-extensions-part5-awaiting-observables/

10. Use ReactiveUI on Xamarin.Forms
• Source repo: http://bit.ly/2LGiN4i
• View (XAML Page) class inherited from
ReactiveContentPage<TViewModel>
(src: http://bit.ly/2OsYpRA )
• ViewModel class inherited from
ReactiveObject
(src: http://bit.ly/2LKDTNW )

11. ReactiveUI on Xamarin.Forms
APIs to bindView ↔ViewModel on ReactiveContentPage<T>:
• Bind() , OneWayBind(), BindCommand():
https://reactiveui.net/docs/handbook/data-binding/
• IfView is directly inherited from Xamarin.Forms’ ContentPage class, adopt IViewFor<TVM>
interface for connectingViewModel class:
https://reactiveui.net/docs/handbook/views/view-location#view-location-iviewfor
For doing INotificationAPI of Xamarin.Forms inViewModel (ReactiveObject):
• RaiseAndSetIfChanged() will make databinding UI parts in Xamarin.Forms get notified.
• ObservableAsPropertyHelper<T> & ToProperty() makeViewModel’s Property backend
datasource being an Observable stream.

12. ReactiveUI on Xamarin.Forms
ReactiveUI APIs to maintainView State:
• WhenAnyValue() , RxApp.MainThreadScheduler, WhenActivated()
Combining usage of
Rx.NET’s CompositDisposable (src: http://bit.ly/2KfsJMk ) with
ReactiveUI’s DisposeWith() (src: http://bit.ly/2NWpN9J ), we can
efficiently get rid of writing code to do Subscribed objects disposal onView.

14. ReactiveUI on Xamarin.Forms
View Routing
Its routing is optional (IRoutableViewModel interface forViewModel), and
not very robust right now:
• https://reactiveui.net/docs/handbook/routing/
https://reactiveui.net/api/reactiveui/iroutableviewmodel/
• It may change in the future:
https://github.com/reactiveui/ReactiveUI/issues/1107
• Example project:
https://github.com/GiusepeCasagrande/RoutingSimpleSample

15. Resources
• Rx Operators reference: http://reactivex.io/documentation/operators.html
• RxJS Marbles: http://rxmarbles.com
• Marble Diagram explain: http://medium.com/@navdeepsingh_2336/marble-
diagrams-an-overview-e04462c75175
• https://rehansaeed.com/reactive-extensions-part1-replacing-events/
• Slack chatroom: https://reactivex.slack.com
• Reactive-Examples: http://github.com/theeightbot/reactive-examples
• You, I, AND ReactiveUI:
http://kent-boogaart.com/you-i-and-reactiveui/
http://github.com/kentcb/YouIandReactiveUI
• Rx.NET, from the inside out: https://youtu.be/NcoNYo3MYbo
• ReactiveUI – A new way of thinking: https://youtu.be/A_qmik32Kos