Reactive UI and Reactive Extensions for Xamarin.Forms | Xamarin Developer Summit


>>All right. Well, let’s go
ahead, let’s get started here. Thanks everybody for making it out. This is going to be
a talk on ReactiveUI, a little bit of Reactive Extensions, but talking about using it in
a Xamarin Forms application. My name is Mike Stonis, there’s my Twitter handle up
there. It’s just my name. I’m based out of Chicago, work for a company called
Eight Bot where we do consulting for Xamarin application, Cloud stuff, Azure, things like that. So yeah. If you have any questions wherever
you can, come grab me later on. Big shout out to all the sponsors
for helping make this happen. None of us would be
here without this. So thanks to everybody who helped
make this actually possible. It’s super-exciting. Then obviously, if you
don’t have the app by now, I don’t know how you made it
here or what you’re doing, but just better go download if
you haven’t grab it already. So before we jump and everything, I just want to do like
a quick show of hands. Who here has ever used
Reactive Extensions? Couple of people. All right. Who here uses an MVVM framework
in your application? A lot of people. Prism? MVVMCross? MVVM Light? Anybody use ReactiveUI?>>Yeah.>>This guy. A couple of people here. I like all these people that just
raised their hand at the other. So we are going to be talking about ReactiveUI obviously
for the session here. But it’s cool because it’s
cool that everybody here uses an MVVM framework because you’re
like a frame of reference for it, and we’ll actually we’ll talk about bringing that in later on as well. ReactiveUI if you’re not familiar with it or if you’ve
never heard about it before, it’s like an MVVM framework. It’s like a light MVVM framework, or like the mismatch MVVM framework. Again, I’ll explain that
again in a little bit. It’s been around for quite some time. It was actually originally created by Anna Betts and the GitHub Team, and they used it as part of
the GitHub desktop application. So it’s something that
everybody is actually probably used an application that
hadn’t been there before. It’s used for some stuff like some Visual Studio plug-ins
and things like that as well. It’s a declarative, asynchronous
friendly way to build UIs, which is pretty neat as
we’ll dive into as well. It’s supported on every single
platform, like Windows, Forms, UWP, WPF, Avalonia, Tizen. What’s it?>>UNO.>>UNO, do we have any UNO people
here. We support UNO. It’s a fully supported, runs everywhere MVVM framework. Key features of a ReactiveUI then that we’re going
to dive into here. It’s got all the stuff that you would expect in
MVVM framework to have. There’s a base view model in
there with reactive object. It’s got some platform wrappers
out there to help do things with your actual runtime
platform a little bit easier. Data binding, commanding,
all that good stuff. But at the end of the day, ReactiveUI is actually like the MVVM framework. What I mean by that specifically, is that ReactiveUI is at
its heart, at its core. It’s just a bunch of
extension methods. I’m not going to pick
on anybody here, I’m definitely not
going to pick on Prism, and super definitely not
going to pick on MVVMCross. But some of those frameworks
are pretty prescriptive. They say when you build this thing, it needs to be built
exactly this way. Or when you want to implement a page, it needs to follow
this exact pattern. ReactiveUI doesn’t care. It’s like, “Yeah,
whatever. All right. You do you, we’ve got some
stuff to make your life easier, but you don’t have to
actually follow our patterns. We’ve just got some stuff
to make your life better.” There are patterns if you want to follow them, but you don’t have to. What’s cool about that is that
ReactiveUI actually works really nicely with a bunch of
other MVVM frameworks. I’d like to think of it as
the capybara of MVVM frameworks. Some of you guys know
what a capybara is? It’s like this giant
gerbil type thing. Like every animal on
earth seems to love it. Every time you see pictures of it, it’s like hanging out with alligators and birds and they’re just chilling. So is ReactiveUI. So you can use ReactiveUI
by itself as is. A lot of people use it that way. But if you already used something
like Prism or MVVMCross, you could pull ReactiveUI
into your projects and use its superpowers along with the framework that you
already know and love. So let’s take a few minutes
here to go through and look at those
superpowers and what comes with ReactiveUI itself. So ReactiveUI runtime comes
with three core libraries. We’ve got the Reactive Extensions. The Reactive Extensions if
you’re not familiar with them, this talk might be
a little bit crazy. We’re going to see some things
that might not fully make sense. But from a high level, is they give us the ability
to process streams of data. Things that happen like
button click events, input that’s coming from a user, anything that is providing a stream of events that we need
to handle and process further. So for us this is core and
key for everything that we do because if you think of building a user interface
for an application, specifically something like
a mobile user interface where people are
tapping, and swiping, and doing all this stuff, Reactive Extensions is going
to make our lives a lot easier to handle those interactions. The next thing that
it comes with here, actually we’re go here. But it’s like LINQ, it uses a LINQ-like syntax to
do all of your operations. So if you’re familiar
with using LINQ to do things like a select statement, and a where statement,
and stuff like that, Reactive Extensions follows that
same functional or fluent pattern for writing out your code as well. Then it makes a bunch
of operators that are typically difficult to do very easy. So I don’t know if
anybody went and saw Shane’s presentation
a little bit earlier today, but he was showing off
some operators like Debounce operator or Throttle
operator, stuff like that, where if you’re building that type ahead Google search thing and you don’t want to go call an API and so somebody stop typing for two seconds. Traditionally, writing that code
in C# is a pain in the butt, with Reactive Extensions
that stuff just becomes extremely simple there. The next thing that ReactiveUI
comes with is Splat. It’s a goofy name for
a really simple service locator. So Splat is not your auto fact, it’s not an inject,
it does everything, and I just give it
an interface and it resolves every interface at runtime, dependency injection
or IOC container. It was purpose-built to be used for mobile or to be used in
a very simplistic manner, and to provide very fast
interface resolution. So again, if we’re using this
in Xamarin Forms application, we’re probably running
the application on a mobile piece of
hardware and we just want really quick resolution of interfaces
and Splat gives that to us. It’s got a couple other things
that come along with it as well, like there is a logging
framework that’s inside of there that you could
use out of the box, or you can hook it into other
logging frameworks if you want. Then it’s got other things like
cross-platform type translators. If I give you a color, let me convert it into the native
color like that type of stuff. Or if I give you like a rectangle, let me convert some of that stuff. The last thing and this
is a new edition or a newer addition to
ReactiveUI is Dynamic data. Who here uses ObservableCollection
that comes with Forms? Who here loves ObservableCollection? Where are all those hands everybody? Come on, it’s cool.
Who’s ever tried to do like I’ve got a thousand items and I need to insert them
into an ObservableCollection, and then you see like your UI totally spaz out and not load or whatever. Dynamic data helps
resolve all those issues. Again, even if you don’t want
to use ReactiveUI or whatever, checkout Dynamic data because again, it provides this bunch
of built-in operators like LINQ style operators to
do things like filtering data, and transforming data, and doing all difficult stuff in
a super easy manner. The guy who originally created it, Roland, is some kind of wizard. So he did a pretty incredible job
and we can piggyback on that being the ReactiveUI team
and get his superpowers as well. Like I said it’s
the Batman’s utility belt, it’s an ObservableCollection. Every time you’re like,
“This doesn’t do that.” You dig in there further
and you’re like, “Oh, man, this already
built there for us.” So it’s pretty cool. In order to get ReactiveUI
setup and installed, just go to NuGet grab
a couple of packages. I’ve got the three that
I’m going to show off here at least for today’s presentation. We’re going to go and grab
the ReactiveUI.XamForm. There’s an Events package
that we’re going to pull in and then core ReactiveUI itself. We are just going to
want to install those to your different runtime
platform projects. So add those into your iOS project
or Android project, your NET standard project or
shared code site project, if you’ve got a Forms
application out there. Again, like I said, if you’re
doing something for like WinForms or WPF, just add in that. Everything that we’ll look at here
should work the exact same way. You’ll just go and grab
the corresponding package for that runtime platform. So it’s going to have a high-level
of what ReactiveUI is. What I want to do next
is take a look at the features that come
inside of ReactiveUI, the stuff that actually comes
with the MVVM framework. I thought the best place
to start here would be the View Model components. For us with ReactiveUI, that’s going to be
our ReactiveObject. So this is our base ViewModel
inside of ReactiveUI. It’s going to do things for us like provide us,
INotifyPropertyChange. It’s going to give us
some other abilities like things to suppress change
notifications, as we’ll see here. So logging, error, routing,
and stuff like that, but it’s just like
our core ViewModel component. So can everybody read that? It got this into a slide. I tried to make
the font super jumbo size, so it’s easier to read here. But if we look at a simple ViewModel
that I’m building out, maybe this is for some login page
or a User object. What I could do is just build out an object like this
that’s going to use, excuse me, the
ReactiveObject is my base. I can set up my properties here. In this case, you’ll see I’ve got my center that makes a call to a method called RaiseAndSetIfChanged. So this is an intelligence,
INotifyPropertyChange Implementation. Where if you have a FirstName set, let’s say you set the
FirstName to Michael, and then you set the
FirstName against Michael, it won’t raise a notification
on the second one. So we’ve probably all seen
that are implemented that similar ourselves in
the past as well. Another thing that’s
neat that we could do out here in this
ReactiveObject is we’ve got this Helper class that we could use called
ObservableAsPropertyHelper. Everybody has probably seen
something like this before, had this issue before, where you’ve got two properties
that you’ll want to assign. Let’s say it’s your
FirstName and your LastName. Whenever you change
those two variables, you want it to update
some FormattedName, like I really like it to be
formatted as LastName, FirstName. If you’re doing something else, if you’re doing like a traditional
I Notify Property Change, you might have to like inside of the Center for the
FirstName and LastName, make a call out to update, to send a notification
from the FormattedName. But what we could do
with this is just create this new property, it’s
ObservableAsPropertyHelper. You’ll see that it’s got just a value that we assigned to,
a read-only property. Then what we can do inside of
our ViewModel is we can start to use those Reactive extensions
to bring this data together. So here, you can see I’ve
got a WhenAnyValue which in the ReactiveUI terms means
whenever these properties update. So let me know whenever
any value gets updated here. So let me know when somebody
raises INotifyPropertyChange. What we’re going to say
that we want to do with that, you can [inaudible]. We’re going to say we’re going to do with that is we’re going to listen for my FirstName property to update, my LastName property to update, and then the third parameter
here is going to say give me the current or the most recent value
of those two properties. Give me the most recent FirstName, the most recent LastName, and then I’ve got
a StringFormatted on the right-hand side there
just to bring that together. Finally, I can make this fluent
call off here to ToProperty and just tell it go raise
the change for FormattedName. So I can take these two
together here and chain those properties together and
make that work that way as well. You might be looking
at some of the syntax here and it looks
a little bit verbose. I’m pretty lazy and
I hate writing code if I can get away with
it, I’ll avoid it. So what we can actually use is
another Helper library called FODI. Has anybody here ever used
FODI or heard of FODI before? It looks like
a good amount of people. If you’ve never heard
of that before boy, let me tell you. It’s pretty cool. It’s a library that does
compile-time transformation of your code to inject in things like INotifyPropertyChange or we
could use it here with Reactive. You’ll notice that I’ve
got these attributes out here on those properties, where I say that they’re Reactive,
and then at Compile Time, what it will do is it’ll just
take that plain old property and replace it with the version
that we had before. So if you were to open
up the DLL and look at it in ILSpy or
something like that, it’ll actually have all the Reactive change notification
bits inside of it. Another thing that I find
to be pretty helpful here is with Reactive Objects. What we could do is we can actually tell it to
SuppressChangeNotifications. It’s something that I find
is like weirdly hard to do. If you have like just a regular object that
raises property change, like you have to go in and
sometimes I’d make like a Helper method that sets
the private variable, but doesn’t raise the change. Well, we could do here is with our simpleViewModel that
uses Reactive Object, is I can say something like, hey, I’m going to set the FirstName
to Michael, last name Stonis, and then I could use
this using statement, and anything that I do inside
of this using statement here. So we can say we’ve got Michael here. We’re going to set our,
let me go back here. This says SuppressChangeNotifications inside of this using statement, and then anything that I
do inside of that block is not going to raise
those change notifications. So I can change my name’s to Miguel. I can change my name to Mike, and after that block there, within that block, it’s not going
to raise those notifications. As soon as I leave the block and
I change FirstName afterwards, again, it will start sending
out those change notifications. But as long as I’ve got that
using statement out there, they’re going to stop sending those. So in this case, the only
change notification I would’ve received was when I originally
set the property name to Michael. You can also do this which is similar to
SuppressChangeNotifications, but we’ve got
DelayChangeNotifications. So this is really helpful
if you’re going in and updating a property
multiple times and you don’t want it to be overly chatty and send out too many property
change notifications. This one what it will do is here, we can go and change my name
to Miguel, change to Mike. Then once we leave
this using statement block, what it will do is it’ll kick
out that change for Mike. It doesn’t just have
to be one property, I could have made
five or 10 different property changes inside of here, and then all of those changes, whatever the last value
was to go through will get pushed out to
my User interfaces. So pretty cool things inside of the best part of
Reactive Object there. The thing that I’m pretty
amped up about though is this thing called ReactiveCommand. ReactiveCommand is like a really
good implementation of ICommand. So everybody here probably
uses the Xamarin.FormsCommand. I guess some most people
have probably used it. Who here uses the CanExecute
portion of ICommand? You guys are lying. There’s
no way I’m skipping. It’s a pain in the butt to set
up like that. Can’t execute. You got to go in and set up an event handler type thing to listen for it and do some
stuff around there. We’ll show you some neat things
we can do with ReactiveCommand. It supports the ability
to do asynchronous and synchronous calls right out of
the box which is pretty neat. It provides a way, a very
like practical and easy to use way to disable the command
as we’ll find out as well. It also supports things
like command cancellation. So if I’m doing a long
running process maybe I’m calling an API and midway through, my user wants to cancel that, we’ve got pretty easy operators just to shut down those operations. It works just totally
fine with Xamarin Forms. So it implements ICommand, at the end of the day
and it just breaks right in to form super easily there. So let’s take a look at just a quick application
that I wrote up and this is a pretty typical workflow
that we have with clients. I thought that this would
be a good illustration of what we could do
with ReactiveCommand. So here you can see I’m updating a user interface for a login screen, I’m filling in my username, I’m putting in my password. If you notice down below
on that “Login” button, and I’ll actually go back here
a little bit just to pause it. If you look at
the “Login” button you’ll notice that at one point
in time it goes from being disabled, right here. My “Login” button’s disabled, but as soon as I type in a password
the “Login” button enables. It becomes available to me. Some other things that
you might notice here if I continue to let
this run is I’ll type in my password and then as I click the “Login” button,
you’ll notice two things. One, the “Login” button itself is
going to disable and then two, you’ll notice a loading indicator
shown on the screen. So this is a pretty
typical use case for what we want to do as developers. What if I told you
we could get all of that functionality from
one ReactiveCommand? It’s pretty neat. So without having to do a whole bunch
of crazy code, we can just implement
this and have it provide all that
functionality for us, or have that be the source of
all this functionality for us. So to do ReactiveCommand for
active UI what we’re going to do is use this
ReactiveCommand object here, and it’s going to
take two parameters. The first parameter is
going to be the data that’s coming into the command, so it’s going to be typed data. So unlike a regular
command where you just get object in and then it’s up to you to figure out
what the hell it is, this actually tells
you what’s coming in. If you’ve never seen
this type of unit before, if you’re not familiar
with Reactive Extensions, unit is like a void notification. It is saying, hey,
something happened. You shouldn’t care about
this payload whatsoever though. I’m just letting you
know that something happened or that
somebody’s notified you. So that’s our input type, and then the second parameter
there is our output type. So this is the data that’s
going to flow out of our command once it
completes running. So creative ReactiveCommand
and what we do is we build a little story like this. So it starts up at the top and
we’re going to say I want to create a ReactiveCommand and I’m
going to tell it that I want to create it from a task. So I want to do an asynchronous
process with this command. Like I said before, you could do
this with a synchronous process, you could actually
create commands from observables or have them fire
off observables when they run, and you can even create commands from other commands if you want
to get crazy with it. But we’re just going to look
at a simple example here. The first parameter that
I’m going to pass to that command then is going
to be my unit of work. So this is my method that I want
to execute to go to my work. Here you’ll notice that
even though I specified my command in the previous slide
was taking unit in, here we’re just going to say
it’s just a no parameter input. Because again, with unit I
really don’t care about it. So here I’m just going to say we really don’t care about the input. Then inside of there I’m just
going to go and make some call. Maybe just like an API
call or something like that to go do some work, and then at the end of that work
I’m going to kick out a result. Did you login successfully
or unsuccessfully? Just give me a thumbs
up or thumbs down. The second parameter that we
have with our command then is the controller for one
that command can execute. So this is our WhenAnyValue again. So the WhenAnyValue as we saw
earlier means that properties have changed and so this
WhenAnyValue is going to take the combination of
our username and password. Again, it’s cheesy and simple, but we’re just going to validate
that you have data inside of those two properties. So as soon as we have a value
in both username and password, then that will enable our command
to execute which is pretty cool. What the ReactiveCommand
is also going to do is it’s going to
provide some feedback to our user interface or it’s going
to provide some feedback that we could subscribe to that’s
going to let us know whether or not the command is executing. So there’s actually a property
that we can listen to, it’s an observable that we
can subscribe to as part of our command that
will tell us whether or not the unit of work that we’re doing for this command
is currently executing. So that’s what I was using in
that example out there to disable or to show the loading indicator
that lets it run. Another thing that’s neat about ReactiveCommands is that
while they are executing, they can disable themselves. So we can have it disable
itself so that “Login” button, I didn’t have to worry about like
users double tapping into it, I didn’t have to worry about manually disabling that command
or anything like that. Essentially, as long as this unit of work is running that
command is disabled. So it’s a neat thing
that solves a bunch of typical use case problems that
we have with commands out there. So it’s really something
I really love. Next up, I want to talk
about interactions. Interactions give us a way to in a very agnostic way and not platform specific
or anything like that way, breakout from our ViewModel to some other process to get
feedback back to our ViewModel. So this is a very typical
interaction that we have. You’re in the middle of some sign-up
process and you’re like hey, I need to ask the user can I
send you information later on? They can say, “Okay” or “Cancel” and it’s like right in
the middle of some workflow. What we could do is
we could just slap this interaction right in the middle
of something like a command, go out to our user
interface have it handle that interaction and bring that data
back as we’ll find out here. It doesn’t have anything to do with an actual platform
implementation. It’s just a real simple construct
that we could use on our platform or that we can even mock out as part of a unit test. Interactions look surprisingly
or unsurprisingly, I should say, maybe just
like a ReactiveCommand. So you’d create an interaction here, you’re going to tell it
the data that’s coming in. So you’re going to give
it that input type. You’re going to tell
it the output type, so I’m going to pass
a String in and I’m going to expect to get a Boolean back. Then inside of something like
a command like I said before, what we could do is we could take our interaction and we can make
a call to the handle method. Since this interaction is
looking for a string value in what we could do is we
can send a message to it like are you sure
you want to do work? Then over in our user
interface what we could do it’s like somewhere in our page, what we could do is
take our ViewModel, listen for that interaction, and register a handler. So whenever we call that handle
call inside of our ViewModel, this is going to
actually fire off here. We could do whatever we
need to do on a platform specific basis or
an implementation specific basis. In this case, we’re just
using forms to show an alert out there say
for register handler. We can show an alert out here and it could be
a synchronous process or in this case we’ve got
an asynchronous process so that can actually run out there
and take whatever time it needs. Finally, once it’s
completed we just make a call to set output and that will send that notification
back to our ViewModel and we can just continue
processing along our way. So we’ve broken out of our ViewModel back into native land or
back into the run time land, and now we can go right back to our ViewModel and not
even like skip a beat. We don’t have to
build anything janky, we didn’t have to build a bunch
of like weird interfaces to go do that, a simple way. Yeah. All right. I don’t have
it in this example, but ReactiveUI, and I’ll show you, I’ll have it in a future
example but the simple answer is ReactiveUI has a bunch of really simple helpers to
allow us to switch threads. So I could very easily specifically tell this thing like when this runs, make sure it always
runs on the UI thread. I’ll show an example of that here in just a few minutes to
give you a feel for it. But it’s a super painless way to say like guarantee that this
runs on the UI thread. So you don’t have to do
something like device stop, begin invoke on main thread, and then you’ve got
this stupid lambda thing that you always hate and you’re like, “This is like a sync and how do I like await that come
back and whatever.” It’ll make it really easy
to handle this stuff. There’s a lot more core stuff
that comes with ReactiveUI, but in terms of like
the ViewModel components, these are some of the heavy hitters, some of the ones that you
would use day in and day out, that command, those properties, and then these interactions. Next up then what we can look at here are going to be our UI components. So our UI components are going
to be the things that actually allow us to glue this
up to a user-interface. Interactive UI is pretty
cool and unique for this. So we get the typical things
that we’d expect out of the box, with an MVVM framework, we get bindings, one-way bindings,
two-way bindings. We’ve got some cool stuff for
built-in type conversion. There’s command binding. We can even do things like, when does the binding
update its source so we can control how notifications
get pushed back. But the one thing that I
think is super cool about ReactiveUI bindings is that they work like the exact same on
every single platform. So if you’re using
these bindings in a Xamarin. Forms application, or
Xamarin.iOS application, or an Android application, or a Winforms application, you write these bindings
the exact same way and they work on
all those platforms. So you don’t have to learn like a different binding language
or anything like that. Sort of like you learn
ReactiveUI once, and then I haven’t written a
Winforms application since forever, but I’m sure I can pick
it up and just using all this stuff that
comes with ReactiveUI, kind of use this binding
pattern and look like I actually know what the hell
I would be doing out there. So the bindings here there are separate from the
Xamarin.Forms bindings. Just to call callbacks earlier, if you don’t want to use
these bindings with ReactiveUI, don’t, that don’t matter. You can use the stuff that
comes straight out of the box, use the bindings that
come with forums. If you like how Prism does it, if you like how
MVVMCross does it, cool, you don’t need to use these, but you’re insane to not use these
because these are pretty awesome. So the way that these bindings work then
is a little bit like this. So this is in the context of
user interface components. So again if we’re
talking about forums, this would be out on a page
getting this hosted up there. What this allows us to do then
is we would have something like this dot operator. So I would say like this being my view that’s going
to host my bindings, the first parameter
that I would send into the bindings then would be
something like our ViewModel. So here’s going to be our notifier. Here’s going to be the thing
that we want to bind up to. So in this case, I
want to bind my view, my this being my view to
my ViewModel being my view model. So this is one that’s going
to provide the value. The second parameter then is going
to be the notifying property. So I want to know anytime
my Username property changes, and then finally out here
I’m going to say I want to bind this to something else. So in this case,
the view is going to be the actual view that’s
hosting this and I want to update my Username text property. This binding is it’s written
up here is a two-way binding, so this will take
the initial value from my ViewModel and push it
into the user interface, and then as I update the user
interface that will continue to push that back to the view model
afterward which is pretty cool. But there is support for
things like one-way binding. So you can just say it’s
basically the exact same thing, just take data from the ViewModel and pump it straight into
the user interface here. You can also do things
like command binding. So in this case, the view is going to have
a start work button, and the control that goes into that last parameter just needs to
implement the command pattern. So the control that’s in that last property there if it’s
like a Xamarin.Forms button, for example, it just
needs to have a command and a command parameter
property inside of it. So if you have that, you could just say BindCommand and then this will handle everything else getting passed to
that command out there. It’s not shown here
but if you wanted to, you could also optionally
bind the command parameter. So if you had some data that you
wanted to send in whether it was data that came off the ViewModel or something that
came from your view, you can actually pass that
into that BindCommand as well. So it’s again, pretty
neat and consistent. It looks the same way
over and over again. I’m going to call these like other bindings because these are
other ways that we could bind. But one of the coolest things
that we have in ReactiveUI or these two operators one called WhenAnyValue and another one
called WhenAnyObservable. We’ve already looked at
WhenAnyValue a little bit here, but I’ll just call it out again. In WhenAnyValue does
a couple of cool things. So at its core, WhenAnyValue let’s just know when a property change
notification occurs. So in this case what I’m telling
it is that I’m interested in the IsValid property updating
on some validation object. So just let me know whenever
that property updates. What it also does which
is a little bit of magic, is it will subscribe to that
property change even if I replaced the ViewModel or even if I replaced that UsernameValidation
object inside of it. So halfway through
running my binding here, let’s say I replaced
the ViewModel with a new instance object
of that ViewModel, this WhenAnyValue will
continue to work and continue to listen to
IsValid property change. It’s like the craziest
little bit of magic that saved me so many times in doing things where you replace something, maybe you don’t replace
the view model instance itself, but maybe you replace
something, this validator. Maybe you replace that halfway
through working through a page, and then you’re
binding stops working, in this case it continuous to work. What we can also do with
this then is we could chain this together using
reactive extensions. So in this case what
I’m going to do is use this method here called Select just like just
we’d have it in link, and I could tell it that in this case when I get that value of IsValid, I really want to bind it
to the color green or red. So I’m just going to make
a quick run-time decision or maybe platform time decision as
to what is valid means. So I really don’t like
value converters, so I hate the harp on them but
I don’t like writing them. This is sort of like
these quick and dirty way are quick and easy way and in reactive extensions to
do value conversion. So I can take this convert it to
red or green and it’s super easy. Then we had a question
before like, “Hey, what if I want to make
sure that this thing executes on the user
interface thread?” What we could do is use this
ObserveOn operator here. Basically what this is going to say is in this case we’re going to use the thing called the scheduler that
comes with part of ReactiveUI, and this is basically
you’re just going to ensure that anything below that line executes on
that provided thread. So in this case, I’m going to say ObserveOn my main thread scheduler, which is like my UI thread scheduler, just make sure that this
runs on the UI thread, and then I’m going to bind this to the background color of
a view and my user interface. So it’s just a nice
little way to write like a little happy code block, it reads easy, you can see
where the data comes in, you can see how it gets transformed. I can guarantee that it
runs on the UI thread, and then finally I can kick
it out from here as well. With ReactiveUI then there is another operator that’s very
similar to WhenAnyValue, it’s got all those cool powers like I mentioned before where you can replace inner properties,
and it continues to work. WhenAnyObservable though
is used basically to listen to observable notifications, and so we’ll use this primarily in our user interface apps to
listen to the completion of a Reactive command or perhaps the completion or the update of
an event or something like that. We might wrap an event to provide some observable on the background. So this just gives
us that same piece. So very similar to
WhenAnyValue, like I said, just gives us
the basically the ability to listen to the end of the command, if you think of it from that way. One of the other things
I want to show off here that’s pretty cool, that we can do with
these findings as well then, is we could do things on
the fly asynchronously. So has anybody in LINQ
ever tried to do like an async call inside of a select
where you’re like, “Hey, I’ve got a list of URLs and I
want to go enumerate through these and asynchronously call out to some web-page
and bring it back in.” With Reactive Extensions,
it’s cool with that. So I can just make a
call to SelectMany for example, give it async. In this case, I’m just
letting it display some alert to our user
that they can handle, and then I can continue along my way. So again, it just show on how I could use the Reactive
Extensions in combination with ReactiveUI and get
some additional superpowers that we don’t get out of the box with forms or out of the box with
LINQ in.NET, things like that. Cool. Next up, I want to talk about some additional helper libraries that we have as part of ReactiveUI. This one is a validation library. So with validation library
what you could do is, inside of your ViewModel, you can set up a validation rule. So the first parameter in
there’s going to be let me know whenever this value
changes or gets updated. The second parameter
that goes into there is, this is my unit of
work that I want to check to see whether
or not this is valid. So if it’s a username, let me know if it has a value
assigned to it or not. Then finally, our third parameter is going to be the string that we would return out if
we were not valid. So you must have a username
in this case type of thing. Just like we saw with
our other bindings then, our bind validation would go into
our view side and it works just like we were looking at
with a one-way bind or a regular two-way
binding in ReactiveUI, where I’d say I want to
listen to this view model, here’s my validation
object and then assign it to this text on the string
essentially whenever that fires off. So really cool, super easy
way to do validation. That works pretty similar to how we already do binding and things
like that in ReactiveUI. So it’s nice from that perspective. Next up is another newer library that we’ve got out
here, this is Sextant. This is a navigation library
for ReactiveUI. So these are hot bits. I would say these are new, which Rodney out here that’s
been working on this. So this has just given us a view model-based navigation
for ReactiveUI. Again, just gives us
some of that more of a consistent way for us to
implement our applications. A little bit more framework
to ReactiveUI. Also, it does some cool things too, like we could be notified
when navigation events occur. So if you ever want to
know when did something finish animating or
getting put on the screen, gives us some of that information
for when of those events occur. This next up one here is
my favorite bit of magic, and it’ll be a little bit
hard to explain but, I’m going to do my best. So one of the neat things
that you could do with Reactive Extensions is take a regular event and wrap
it as an observable. Again, if anybody here stopped
at Shane’s presentation earlier, he was showing off
some of this stuff. The problem with it is
that like the setup for it is a little bit verbose
and a pain in the butt, like you have to remember it’s like
observable from event pattern, and then like sometimes
the events don’t just raise regular EventArgs and they
got their goofy EventArgs, and just setting it up is
like a huge pain in the butt. But Glenn is part of
the team has gone through and created
this new library called Pharmacist, and what it will do, similar to
how that FODI library works, is it will look through the reference libraries
as part of your project. So say we add our Xamarin
forms to our project, and what it’s going to
do is it’s going to comb through that library, find all the events and automatically builds observable wrappers for
all those events at build time. It’s total magic and it just
makes it available to us. So in this case, if I was in a page, you’ll notice that I’ve got this new property out here called events. So there’s just a regular
Xamarin forms page, and I can say this.events, and then if I comb through this.events
you’ll notice that I’ve got these new things like property changed that I’ve got
highlighted out here. If I were to hover over this, you could see that
it’s an Iobservable of property changed notifications. So then I could use this and
use all that cool filtering and processing and stuff like that that we get out of
Reactive Extensions. So yeah, that’s
the high level bits of everything that comes with
ReactiveUI in Reactive Extensions, there are a lot, it goes very deep and
I’ve only got 45 minutes. I’m going to be here
for the next day. Come find me and ask me
questions I’ll be glad to talk off about any things
in more detail. This is the way that I feel about Reactive Extensions and ReactiveUI, like when two epic people come together and the coolest
handshake that’s ever occurred. Anybody here Predator fans? It’s my favorite movie of all time. If anybody wants to
talk about Predator, I’ll definitely talk
about it all day as well. None of this would be possible without support
from the community though. So I contribute
lightly to ReactiveUI. I wish I could contribute
more, but realistically, this team makes everything
happen and we owe them, I at least I owe them so much. So people like Glenn,
Rodney, Worldbeater, Colt, Geoffrey, Kent, Ana, everybody here has
made this possible. We have Rodney in the room.
So thanks, Rodney. Let’s give him a round of applause for making all of this
helpful and available to us. It’s a massive time commitment
and the huge support that we get from people like
you and for everybody honestly who supports
Open Source projects. Thank you so much. I mean, everybody here has a job using all of these Open Source projects and sometimes maintainers don’t
get the love, I feel like. If you are interested in using
ReactiveUI and you’re like, “I’ve looked online but I didn’t find the most awesome documentation.” One of those maintainers, Kent, wrote this book last year
earlier, earlier this year? Last year. Okay. It had been
in the works for a while. So You, I, and ReactiveUI, it is a fantastic book. I absolutely recommend it,
can’t recommend it enough. Just gives you-all the ins and outs, gives you great examples, It has got code examples and
everything like that. I don’t make a commission
by selling this, but you definitely
should go buy it and support Kent, it’s an awesome book. So cool. Yeah. So thank you. That’s everything I’ve got here. We’ve got time for Q&A, I’m super knowledgeable about stuff. So ask me anything about Microsoft, I know everything and
anything you want to ask me. Yeah, I think we’ve got
four or five minutes. If anybody has any questions, please feel free to ask away. Anybody? Anything? No.
One in the back, yeah.>>So I actually just
got into Reactive apps.>>Sure.>>Also a lot of developers
are using it to [inaudible]>>Sure.>>[inaudible]>>Right.>>[inaudible]>>So the question is, well kind of pull up like a sample from earlier. Whatever, this one’s
kind of a good one. But imagine you had like
maybe not the best one, but imagine you’d
have like 50 of these in a row doing all your work, right. So the question was, like because of this, I end up setting up a bunch
of these and I get like one massive constructor in my code. There’s a few ways you
can mitigate this and it all depends on
everybody’s coding style. So one of the things that you
could do here is like inside this, maybe the Select menu, let’s go get a different one,
we’ll think of something. Let’s go back to our Command.
Like here a Command. Instead of writing your method like, right in line like we have
in this dialogue here, you could abstract that method out and bring it into a
like a separate method. All the way around and just provide the method
name inside of there. As long as that method takes the same input and kicks
out the same output. You don’t have to
define anything else. You literally we just put
in a method called like Get confirmation or
something like that. Then you can get those out. You still end up with some amount just because there’s like some
stuff that you can abstract away. But you can collapse it
down a little bit that way. Personally, and maybe this is just like a preference type of thing. But I love having
these like big long stories of reactive chains because
they read like stories. It tells me like, where
did my data come in, what am I doing to my data, and then what am I
doing at the end of it? Like our team will do
a lot of things of like interspersing in between lines, like putting code comments
and stuff like that. So that somebody who’s coming in, who’s maybe not familiar
with it can read it through. It doesn’t solve that problem. You still end up with
the 900 line constructor and not a 100 line constructor
that’s running out there. But you could also, I mean if you had like
logical ways to break it up, you could break it up
into different operators. Like we have like an abstraction for my team
on top of reactive UIs. Just sort of like our sort
of pattern for doing it. We’ve got like a “Setup” observables
or “Register” observables, sort of method, and then like
“Register” validation methods. So I know I can go to
those methods and they’re basically our base class
calls into those.>>[inaudible].>>Right.>>[inaudible]>>That’s exactly what
we do. I know like especially if we’re doing something for design of like a user interface, I’m likely going to have
some like validation. Maybe I’ll have some Commands and you can just separate
that stuff that way. But you can’t totally avoid it, but kind of embrace
it a little bit too. Any other questions?
Yeah. Go ahead. Yeah.>>What happens when [inaudible]>>So the question is like, if I call something
from the main thread, I go to a background thread and then I want to come
back to the main thread, right. How do I manage that? One thing we didn’t look at here is, I’ll just pull it up maybe to just to look at where I’ve got
some of that code. Here. I do have this call out here to ObserveOn and so all of
this, like this one. Any observable you could use
this in a user interface side of things or you could use this like in your back-end and
your view model side of things. One call that I don’t have on
here is one called SubscribeOn. What that’s going to
allow me to do is with SubscribeOn, is I can say, for anything after
that first notification or whenever I build my subscription, actually to this chain
of observables, I could tell it which thread to SubscribeOn and I could tell it to SubscribeOn
a background thread. So that would ensure that everything below this happens
on a background thread. If need to make sure that
you want some parts, if you want it by default to
execute on a background thread, but then go back to the UI thread, you would just put
that ObserveOn like right before the next command where you
or the next little code block, where you want to do UI stuff. So I can control the thread area where my code is
operating. If that makes sense. So and you can only
put one SubscribeOn. It’s only going to listen
to SubscribeOn once. That’s already your default place
where you’re going to subscribe to do work and you can
set it for your user interface. Like a background threads. Background threads or
something like that. But ObserveOn, you
could actually put in multiple times within
an observable chain. So if you want to say
start on the UI thread, midway through switch
to a background thread, and then near the end, I’ll switch back to a UI thread. You could do that with ObserveOn multiple times inside of that chain.>>[inaudible]>>Correct. Yeah.>>[inaudible]>>It depends on who’s using this. So whenever you write
the word subscribe or whenever you build a subscription
with reactive extensions, it always kicks out a disposable. It is basically best practice that
whenever you’re done with it, be a good disposable owner
and dispose of those. If you don’t have like
any outside references, you could just leave it for
garbage collection and it will, once you can’t walk the chain, the container object is ready
for garbage collection. All these subscriptions
will get disposed as well. But if you want to be proactive
and that’s typically what we do. Is we just always have
that dispose with, ReactiveUI comes with something
called WhenActivated. I didn’t happen to show it
here as part of this demo, but WhenActivated gives
you in a disposable. It’s like an object that’s
like a list of disposables. You can make this dispose
with call and just have the framework basically automatically dispose off all
the stuff for you, I guess. So you don’t have to
worry about implementing IDisposable yourself. ReactiveUI gives us
a facility to clean up all those disposables in like
a pretty maintainable way, I guess. Yeah. Cool. Any other
questions, comments, thoughts, concerns,
personal health issues? Keep those to yourself. We’re cool. Well, thanks. We got
one more question. Yeah. Go ahead.>>So if I want to update the security one time, is
there probably [inaudible]>>.take and you give it the number one and then it will
only execute one time. So a lot of the operators
that you use in-link today, like if you think of
something that exists in-link, we could use it here. Plus a whole bunch of
additional ones that come with reactive extensions that are more time-based as opposed to
like iteration-based.>>[inaudible]>>I’m all [inaudible]. Yeah, yeah.>>[inaudible]>>I’ll shut it down for, yeah.>>[inaudible]>>Cool. All right. They’re pulling out the can
and written me off. I will be hanging out here afterwards and be glad to
answer any questions for you. Thanks for joining me at
the end of the first day here. Hope everybody’s having a good day.

2 thoughts on “Reactive UI and Reactive Extensions for Xamarin.Forms | Xamarin Developer Summit

  1. RxUI is the best. I use it for XF and starting to just it with PRISM now too. RxUI is great but missing so much that PRISM has in terms of features. From modularity, to EventAggregator, Regions and support for IoC such as Unity or DryIoC.

    Dayum though, writing with RxUI just makes your code so clean! It's beautiful!

Leave a Reply

Your email address will not be published. Required fields are marked *