WEBVTT 00:00:00.000 --> 00:00:03.190 >> All right. Hello. How is everyone doing? 00:00:03.380 --> 00:00:08.280 Fourth to the way through our Xam Summit here. 00:00:08.280 --> 00:00:12.870 So yeah, I'm Shane Neuville. Spelled it right? 00:00:12.870 --> 00:00:17.715 Yeah. Shane Neuville. I'm with the Xamarin Forms team. 00:00:17.715 --> 00:00:20.280 Prior to being with Xamarin Forms, 00:00:20.280 --> 00:00:23.490 I worked a decent amount with the ReactiveUI. 00:00:23.490 --> 00:00:26.160 So I still try to champion that as much as I 00:00:26.160 --> 00:00:29.310 can even from within Microsoft. 00:00:29.310 --> 00:00:35.970 So the talk here is going to be heavily about Reactive Extensions, 00:00:35.970 --> 00:00:39.990 specifically just the concepts behind the drive reactive, 00:00:39.990 --> 00:00:42.990 how they near to events. 00:00:42.990 --> 00:00:44.975 Then later, Michael's going to do 00:00:44.975 --> 00:00:47.600 a more extensive talk on mapping out over like 00:00:47.600 --> 00:00:52.040 MVVM and how to power your frameworks for that. 00:00:52.040 --> 00:00:56.055 So to get us started with this, 00:00:56.055 --> 00:00:59.305 how many people have used Reactive Extensions, 00:00:59.305 --> 00:01:01.350 just to get, "Oh, hey. That's nice."? 00:01:01.350 --> 00:01:02.895 Every time I asked, there's more hands. 00:01:02.895 --> 00:01:08.040 So that's a good sign. Let's see. 00:01:08.040 --> 00:01:12.250 So how many people think I'm talking about JavaScript and ReactJS? 00:01:12.250 --> 00:01:15.250 That guy over there, him? All right. 00:01:16.130 --> 00:01:20.150 So some of the vernacular started to clear up as well. 00:01:20.150 --> 00:01:23.450 Does anyone think I'm going to talk about observable collections 00:01:23.450 --> 00:01:26.940 for about an hour? No. All right. 00:01:26.940 --> 00:01:29.990 So along that, this frame 00:01:29.990 --> 00:01:33.530 becomes a little less relevant as the talks go on. 00:01:33.530 --> 00:01:37.580 There was definitely some confusion that started out. 00:01:37.580 --> 00:01:39.980 So I remember the first time I heard of ReactJS. 00:01:39.980 --> 00:01:42.955 I'd been doing RxJS for some time. 00:01:42.955 --> 00:01:45.380 It was about five minutes into the conversation, 00:01:45.380 --> 00:01:48.695 I realized we weren't having the same conversation. 00:01:48.695 --> 00:01:51.890 So there's not really 00:01:51.890 --> 00:01:55.920 any relationship there besides the first five letters. 00:01:57.410 --> 00:02:01.105 The angular has started heavily using RxJS. 00:02:01.105 --> 00:02:03.260 So Angular is probably more synonymous 00:02:03.260 --> 00:02:05.870 with RxJS at this point, but yeah. 00:02:05.870 --> 00:02:08.810 Then, the next area where people get thrown 00:02:08.810 --> 00:02:12.305 off has to do with the ReactiveX and ReactiveUI, 00:02:12.305 --> 00:02:14.345 and where those division points are. 00:02:14.345 --> 00:02:21.810 So ReactiveX is a platform-agnostic concept. 00:02:21.810 --> 00:02:25.760 So the ReactiveX concept 00:02:25.760 --> 00:02:28.940 is implemented across multiple frameworks. 00:02:28.940 --> 00:02:35.390 So there's a coco, a Java, RxJS. 00:02:35.390 --> 00:02:40.515 There's a whole swath of languages that implement the concepts. 00:02:40.515 --> 00:02:45.090 Then, ReactiveUI is the MVVM layer 00:02:45.090 --> 00:02:48.750 that helps plug ReactiveX into your MVVM. 00:02:48.750 --> 00:02:52.905 So when people are talking about Reactive, 00:02:52.905 --> 00:02:54.705 they're not just talking about ReactiveUI. 00:02:54.705 --> 00:02:55.820 They're mainly talking about 00:02:55.820 --> 00:02:59.090 functional reactive programming and 00:02:59.090 --> 00:03:02.810 how observable based programming paradigms work. 00:03:02.810 --> 00:03:05.870 So the ReactiveX aspect is 00:03:05.870 --> 00:03:10.655 largely what this talk is going to revolve around, 00:03:10.655 --> 00:03:15.245 which will be a good precursor for Michael's talk later. 00:03:15.245 --> 00:03:18.830 So why did it beep at me? 00:03:18.830 --> 00:03:20.240 Hold on. I probably maybe I don't have it 00:03:20.240 --> 00:03:22.845 highlighted. There we go. 00:03:22.845 --> 00:03:29.300 So let's break down what we're really looking at here. 00:03:29.300 --> 00:03:32.420 So let's talk about events really quick. 00:03:32.420 --> 00:03:35.570 So how do you subscribe to events? It's all pretty basic. 00:03:35.570 --> 00:03:37.945 We've all seen this code before. 00:03:37.945 --> 00:03:41.190 There you go. Pretty exciting, right? 00:03:41.190 --> 00:03:46.085 So effectively, you have your publisher on the left. 00:03:46.085 --> 00:03:48.260 You have your events and then you have 00:03:48.260 --> 00:03:50.990 your observer on the right there. 00:03:50.990 --> 00:03:57.230 So that, it's a basic event notification pattern, 00:03:57.230 --> 00:03:58.760 your basic observer pattern. 00:03:58.760 --> 00:04:02.030 So this was the syntax in C# one. 00:04:02.030 --> 00:04:04.190 Effectively, the top one does the same thing 00:04:04.190 --> 00:04:06.395 as the bottom, but syntactic sugar. 00:04:06.395 --> 00:04:10.725 So let's break down what an event is. 00:04:10.725 --> 00:04:14.005 So an event is essentially, 00:04:14.005 --> 00:04:21.095 it's a series of individual things that occur to the produce data. 00:04:21.095 --> 00:04:25.260 So if I'm typing my name, 00:04:25.990 --> 00:04:29.930 I type S, there's an event, h and event, 00:04:29.930 --> 00:04:33.635 a and event, I think you see where all those is going, 00:04:33.635 --> 00:04:39.080 and the representation of that data is here. 00:04:39.080 --> 00:04:41.990 So that is the set of data that have 00:04:41.990 --> 00:04:46.325 occurred based on those events. 00:04:46.325 --> 00:04:49.220 So that's your event. 00:04:49.220 --> 00:04:51.455 So nothing too mind-blowing at this point. 00:04:51.455 --> 00:04:55.340 So steps to stop observing an event. 00:04:55.340 --> 00:04:58.000 So how do you stop observing an event? 00:04:58.000 --> 00:05:00.600 We've all unobserved front events, right? 00:05:00.600 --> 00:05:01.760 Like we've all said, "Hey, I no 00:05:01.760 --> 00:05:03.620 longer care about what this thing happens." 00:05:03.620 --> 00:05:08.960 So usually, the process of figuring out how 00:05:08.960 --> 00:05:11.720 to unsubscribe event starts 00:05:11.720 --> 00:05:15.155 with the customer complaining that your app is slow. 00:05:15.155 --> 00:05:19.070 So the customer files an issue and says, "Hey, 00:05:19.070 --> 00:05:21.840 my app slows down after using it. 00:05:22.670 --> 00:05:24.690 What's going wrong? 00:05:24.690 --> 00:05:27.075 The more I'm using it, it's not working." 00:05:27.075 --> 00:05:30.550 So first, you don't believe them. 00:05:31.400 --> 00:05:35.090 You think they've installed something like 00:05:35.090 --> 00:05:37.730 Dilbert screensaver that's taking 00:05:37.730 --> 00:05:39.980 up the whole browser window or something like that. 00:05:39.980 --> 00:05:42.290 Because when you start up your application and 00:05:42.290 --> 00:05:44.795 you use it for about 15 seconds, it's fast. 00:05:44.795 --> 00:05:46.895 Everything works great. It's responsive. 00:05:46.895 --> 00:05:51.670 You've figured out that it's perfect. 00:05:51.670 --> 00:05:54.435 So then, you're like, "All right. I guess I believe them." 00:05:54.435 --> 00:05:58.530 So at this point, you dust off your debugging hat, 00:05:58.530 --> 00:06:01.110 reread through all of tests and blogs on how 00:06:01.110 --> 00:06:04.185 to analyze stack frames, 00:06:04.185 --> 00:06:06.675 and you start pulling everything in. 00:06:06.675 --> 00:06:08.145 You get the stack DOMs. 00:06:08.145 --> 00:06:10.925 You look at how long objects are living. 00:06:10.925 --> 00:06:13.055 You do it over and over again. 00:06:13.055 --> 00:06:15.740 Finally, you're getting down. 00:06:15.740 --> 00:06:18.290 There's lots of staring at arrows pointing at things, 00:06:18.290 --> 00:06:19.940 and wondering what objects matter, 00:06:19.940 --> 00:06:22.280 and subtracting this from that until you 00:06:22.280 --> 00:06:23.900 finally see that there 00:06:23.900 --> 00:06:25.595 was that one line of code or you forgot to write that. 00:06:25.595 --> 00:06:27.990 You're like, "Oh, man." Then, all of a sudden, 00:06:27.990 --> 00:06:30.195 everything starts running super fast. 00:06:30.195 --> 00:06:33.699 So yeah, I mean, basically, 00:06:35.210 --> 00:06:38.280 subscribe and unsubscribe from them. 00:06:38.280 --> 00:06:43.980 So that's the semantics of it. 00:06:43.980 --> 00:06:48.345 But the semantic, it's a little gnarly I feel like. 00:06:48.345 --> 00:06:52.655 Because one, you have to remember to do two things. 00:06:52.655 --> 00:06:55.130 Anytime I have to remember to do more than one thing, 00:06:55.130 --> 00:06:57.850 you're going to fail usually in programming. 00:06:57.850 --> 00:07:00.695 Plus, you have to retain your references to everything. 00:07:00.695 --> 00:07:04.040 So in order to do the importance of that second one, 00:07:04.040 --> 00:07:05.210 you need everything that's in 00:07:05.210 --> 00:07:08.125 your first one to do everything in your second one, 00:07:08.125 --> 00:07:11.930 like you have to maintain those ideas. 00:07:11.930 --> 00:07:16.725 So in general event management is just, it's messy. 00:07:16.725 --> 00:07:20.015 It's not the cleanest type of operation. 00:07:20.015 --> 00:07:21.290 I mean, like let's say, 00:07:21.290 --> 00:07:26.600 you only care about a single event, for example, 00:07:26.600 --> 00:07:28.465 like we've all written this code, 00:07:28.465 --> 00:07:31.340 where if you want to unsubscribe from something like 00:07:31.340 --> 00:07:35.600 you only wanted to fire one. 00:07:35.600 --> 00:07:38.915 So let's say, like an appearing page or something of that nature, 00:07:38.915 --> 00:07:42.140 so you have to have the reference at top 00:07:42.140 --> 00:07:45.830 so that the closure inside has access to it, 00:07:45.830 --> 00:07:47.975 then you assign the handler, 00:07:47.975 --> 00:07:50.255 and then you do the handler at the end. 00:07:50.255 --> 00:07:55.280 So there's this successive ceremony 00:07:55.280 --> 00:07:59.150 that comes from the set of operations. 00:07:59.150 --> 00:08:03.050 So this looks familiar. Is everyone written this code before? 00:08:03.050 --> 00:08:05.790 Yeah? All right. 00:08:06.930 --> 00:08:12.655 So and here I'm still talking about events. 00:08:12.655 --> 00:08:14.860 This is what I call my IObservable Infomercial. 00:08:14.860 --> 00:08:16.360 Where you do something crazy and you're like, 00:08:16.360 --> 00:08:17.680 "Oh my God, it's so terrible." 00:08:17.680 --> 00:08:22.135 It's not that bad. But here I'm indicating all the stuff. 00:08:22.135 --> 00:08:24.115 This isn't Xamarin Forms, 00:08:24.115 --> 00:08:26.725 when you're wiring up to an event. 00:08:26.725 --> 00:08:29.485 So you wire up to the event, 00:08:29.485 --> 00:08:32.425 you have to find okay, where's my dispose aspects? 00:08:32.425 --> 00:08:33.835 Okay, it's down here. 00:08:33.835 --> 00:08:37.330 I have to make sure to dispose from the events and 00:08:37.330 --> 00:08:41.350 all this stuff is in disparate locations in your entire file. 00:08:41.350 --> 00:08:42.730 These are all these things. 00:08:42.730 --> 00:08:44.290 This ceremony you have to do 00:08:44.290 --> 00:08:46.240 with all these event management systems. 00:08:46.240 --> 00:08:48.790 Look right up there, you have to subscribe to it. 00:08:48.790 --> 00:08:51.385 Then you have your handler down here. 00:08:51.385 --> 00:08:52.810 You're dealing with the data in 00:08:52.810 --> 00:08:55.180 a separate spot and then bends up here. 00:08:55.180 --> 00:08:59.635 It's this very disconnected experience. 00:08:59.635 --> 00:09:01.240 So here I even typed the wrong things, 00:09:01.240 --> 00:09:03.625 I'm so flustered to how hard it is. 00:09:03.625 --> 00:09:07.720 But yeah. So I got the infomercial, where did the soda go? 00:09:07.720 --> 00:09:13.225 So that's the thing. 00:09:13.225 --> 00:09:18.175 So events are these singular synchronous data points. 00:09:18.175 --> 00:09:20.650 So you get a text change events 00:09:20.650 --> 00:09:22.690 and then all you have is that text change event. 00:09:22.690 --> 00:09:24.460 You just have that letter. You just have that letter 00:09:24.460 --> 00:09:27.195 S that you have to deal with. 00:09:27.195 --> 00:09:29.145 But what if you want to do more with that? 00:09:29.145 --> 00:09:31.200 What if, because whenever you have an event, 00:09:31.200 --> 00:09:33.840 you very rarely care about the one event. 00:09:33.840 --> 00:09:36.680 You care about the data set of events. 00:09:36.680 --> 00:09:37.870 You care about everything that's 00:09:37.870 --> 00:09:40.510 happening over the period of time. 00:09:40.510 --> 00:09:43.750 So what if you want to do something very exciting. 00:09:43.750 --> 00:09:45.220 So what if you want to say, 00:09:45.220 --> 00:09:47.590 skip your first five events and 00:09:47.590 --> 00:09:50.050 then only care about the next four, 00:09:50.050 --> 00:09:52.015 then you want to debounce the events, 00:09:52.015 --> 00:09:56.139 so if they're typing super-fast only wait two seconds, 00:09:56.139 --> 00:09:57.610 then let's say you want to filter out 00:09:57.610 --> 00:09:59.215 any events that are corn flower blue 00:09:59.215 --> 00:10:02.545 just because it's a horrible color possibly, I don't know. 00:10:02.545 --> 00:10:05.110 Then you want to 00:10:05.110 --> 00:10:07.120 kick off the web request and then they start over, 00:10:07.120 --> 00:10:08.860 so you want to just throw that away. 00:10:08.860 --> 00:10:12.220 Like this type of pattern is 00:10:12.220 --> 00:10:16.900 very common as far as your event management, 00:10:16.900 --> 00:10:22.630 especially in MVVM frameworks and things that are more UI based. 00:10:22.630 --> 00:10:25.420 You're always having to react 00:10:25.420 --> 00:10:29.830 against incoming data points with connectivity getting lost. 00:10:29.830 --> 00:10:31.240 So like what if your connectivity gets 00:10:31.240 --> 00:10:33.460 lost at the web requests to point? 00:10:33.460 --> 00:10:34.870 How do you interrupt 00:10:34.870 --> 00:10:39.745 that web request once the connectivity is lost? 00:10:39.745 --> 00:10:48.460 How do you do that in a reliable way that is easy to manage. 00:10:48.460 --> 00:10:50.680 So all of these concepts have 00:10:50.680 --> 00:10:58.060 very clear versions of the verbs that mapped them in the reactive. 00:10:58.060 --> 00:10:59.830 So these are all actual things you can 00:10:59.830 --> 00:11:02.590 use in reactive to articulate 00:11:02.590 --> 00:11:07.795 all of these attempts over your data, 00:11:07.795 --> 00:11:09.880 over year event stream. 00:11:09.880 --> 00:11:13.720 All right. So what else can we do with events? 00:11:13.720 --> 00:11:19.010 Not really that much. The very simple basic patterns. 00:11:19.260 --> 00:11:23.725 So that's my tear-down of events. 00:11:23.725 --> 00:11:26.110 So at this point, if you haven't really used 00:11:26.110 --> 00:11:28.450 reactive you're probably like, "Oh I've been so terrible. 00:11:28.450 --> 00:11:31.600 I've been doing this wrong the whole time," and you're having 00:11:31.600 --> 00:11:33.610 an existential crisis about 00:11:33.610 --> 00:11:37.970 all the issues that you didn't know you had that now you have. 00:11:39.900 --> 00:11:45.580 So let's translate this over to Observables. 00:11:45.580 --> 00:11:48.370 So IObservable has been around for a while. 00:11:48.370 --> 00:11:49.660 It's essentially just like 00:11:49.660 --> 00:11:52.855 a publish subscription model 00:11:52.855 --> 00:11:55.900 that's inside the core framework of.Net and 00:11:55.900 --> 00:11:59.005 then ReactiveX is more of 00:11:59.005 --> 00:12:04.465 an expression of how to interact with those Observables. 00:12:04.465 --> 00:12:11.245 So let's break down what an Observable is here. 00:12:11.245 --> 00:12:15.020 So it's essentially an Observer Pattern. 00:12:18.690 --> 00:12:21.790 Fundamentally, it's the same thing as an event. 00:12:21.790 --> 00:12:26.000 An event is effectively an observer pattern. 00:12:27.420 --> 00:12:30.775 So you have your event here, 00:12:30.775 --> 00:12:34.449 your handler and your publisher 00:12:34.449 --> 00:12:37.870 and then that's analogous to this right here. 00:12:37.870 --> 00:12:42.865 So you have your observable that is watching, 00:12:42.865 --> 00:12:45.070 its doing the same thing. 00:12:45.070 --> 00:12:47.980 So you have the same idea. 00:12:47.980 --> 00:12:51.220 Effectively, you can do the exact same thing with both of those at 00:12:51.220 --> 00:12:54.925 the base layer and get your data points. 00:12:54.925 --> 00:12:56.650 But the exciting thing now, 00:12:56.650 --> 00:12:58.285 so this is where the exciting points 00:12:58.285 --> 00:13:00.620 of everything comes into play. 00:13:03.690 --> 00:13:07.540 With an event, you don't really have anything. 00:13:07.540 --> 00:13:09.385 You just have an event. 00:13:09.385 --> 00:13:11.770 But now with an observable, 00:13:11.770 --> 00:13:13.510 you have a representation of that event. 00:13:13.510 --> 00:13:17.095 You actually have like a data object that you can do things with. 00:13:17.095 --> 00:13:22.645 So it's the difference between having one item from 00:13:22.645 --> 00:13:25.360 a list instead of other than 00:13:25.360 --> 00:13:28.675 having say the entire list that you can now operate over. 00:13:28.675 --> 00:13:32.140 So that's where your differences come into play. 00:13:32.140 --> 00:13:35.590 So you can think of the observable very much 00:13:35.590 --> 00:13:39.550 as the Iterator Pattern. 00:13:39.550 --> 00:13:42.340 So this is taken from reactivex.Io 00:13:42.340 --> 00:13:44.485 which is one of the main sources, 00:13:44.485 --> 00:13:45.520 which is a really good source. 00:13:45.520 --> 00:13:48.100 It has a breakdown of all your operators and everything. 00:13:48.100 --> 00:13:49.930 So I've a link to it there at the bottom for you. 00:13:49.930 --> 00:13:56.605 Yeah it's effectively mapping 00:13:56.605 --> 00:14:02.170 your observable idea to 00:14:02.170 --> 00:14:03.925 the same things you can do with an iterator. 00:14:03.925 --> 00:14:05.635 There's almost a perfect 00:14:05.635 --> 00:14:08.560 one-to-one comparisons there, when you iterate. 00:14:08.560 --> 00:14:11.605 So an iterator is like IEnumerator. 00:14:11.605 --> 00:14:13.945 That's the equivalent. 00:14:13.945 --> 00:14:18.085 IEnumerator's what's equivalent to IObservable, basically. 00:14:18.085 --> 00:14:19.750 So anything you can do to an IEnumerator, 00:14:19.750 --> 00:14:21.355 you can do it to an IObservable. 00:14:21.355 --> 00:14:23.410 So that was like remember when Link first came 00:14:23.410 --> 00:14:25.990 out and everyone was super excited about 00:14:25.990 --> 00:14:28.225 Link like Link over objects and 00:14:28.225 --> 00:14:31.510 Link to SQL and then they were less excited about Link to SQL, 00:14:31.510 --> 00:14:33.800 but Link was so exciting. 00:14:36.960 --> 00:14:41.260 So effectively you have your retrieved data which is next, onNext. 00:14:41.260 --> 00:14:44.650 So as each of your data points come through. 00:14:44.650 --> 00:14:47.920 That's where it stops as far as where 00:14:47.920 --> 00:14:52.030 Observables become more exciting than your events. 00:14:52.030 --> 00:14:54.550 So you get these other things. 00:14:54.550 --> 00:14:56.875 So you get an air for example. 00:14:56.875 --> 00:15:02.770 If your event that you're observing manifests an exception, 00:15:02.770 --> 00:15:05.800 you can deal with that as part of the observable. 00:15:05.800 --> 00:15:09.340 So as part of the data flow of the operation, you can indicate, 00:15:09.340 --> 00:15:12.970 hey there's this event through an exception. 00:15:12.970 --> 00:15:14.515 So for example, a web request. 00:15:14.515 --> 00:15:16.990 If a web request is occurring and it 00:15:16.990 --> 00:15:20.020 throws an exception because 00:15:20.020 --> 00:15:22.165 the Internet goes down or something similar to that, 00:15:22.165 --> 00:15:24.850 then you can effectively catch that 00:15:24.850 --> 00:15:28.645 and deal with that within that construct. 00:15:28.645 --> 00:15:29.920 So it makes your code a lot 00:15:29.920 --> 00:15:35.695 more robust and then you also get this idea of 00:15:35.695 --> 00:15:39.760 completion where you can fire if 00:15:39.760 --> 00:15:43.345 somebody has indicated that 00:15:43.345 --> 00:15:45.790 they no longer care about the data points, 00:15:45.790 --> 00:15:47.725 you can then act upon that. 00:15:47.725 --> 00:15:50.590 All of those things become features of 00:15:50.590 --> 00:15:54.070 how you interact with your data. 00:15:54.070 --> 00:16:01.760 So here's some more comparison points. 00:16:06.120 --> 00:16:09.070 So this is also taken from ReactiveX. 00:16:09.070 --> 00:16:13.030 As you can see here, you have your Iterable which is your lapse, 00:16:13.030 --> 00:16:14.890 so that's like your IEnumerator and 00:16:14.890 --> 00:16:16.860 you're right which is your IObservable. 00:16:16.860 --> 00:16:19.150 So one is getting data from local memory, 00:16:19.150 --> 00:16:20.210 so that's going to be maybe like a 00:16:20.210 --> 00:16:21.890 synchronous operation where you just 00:16:21.890 --> 00:16:23.870 have your data's realized at 00:16:23.870 --> 00:16:26.240 the top and you're right one is from network, 00:16:26.240 --> 00:16:29.580 it might be slower data feed. 00:16:29.580 --> 00:16:32.915 So there, you can see you get these same ideas 00:16:32.915 --> 00:16:37.350 over your event streams which is just, it's super-powerful. 00:16:37.870 --> 00:16:42.940 Neat stuff. All right. 00:16:42.940 --> 00:16:45.450 Let's break down how the 00:16:45.450 --> 00:16:48.610 building blocks of your IObservables a bit here. 00:16:50.010 --> 00:16:54.250 So this is the basic idea of how you build up IObservable. 00:16:54.250 --> 00:16:57.205 So as you see in that first step there, 00:16:57.205 --> 00:17:01.940 you see the familiar subscribe and unsubscribe, 00:17:03.840 --> 00:17:07.450 it's not that exciting, it's just passing through 00:17:07.450 --> 00:17:10.390 different functions to the observer, 00:17:10.390 --> 00:17:11.830 so the observer knows how to deal 00:17:11.830 --> 00:17:14.185 with subscriptions and unsubscribes, 00:17:14.185 --> 00:17:18.250 so that it can containerize that behavior within the IObservable. 00:17:18.250 --> 00:17:26.185 So here's the comparative versions of those, 00:17:26.185 --> 00:17:29.515 of what those represent. 00:17:29.515 --> 00:17:34.690 So subscribe is effectively invoking that top guy, 00:17:34.690 --> 00:17:37.840 the top one clicked and saying, "Okay, 00:17:37.840 --> 00:17:40.090 now I care about my events," and then 00:17:40.090 --> 00:17:43.000 the bottom one there is now disposing, 00:17:43.000 --> 00:17:45.715 which is then unsubscribing. 00:17:45.715 --> 00:17:48.730 This is where it starts to get really powerful, 00:17:48.730 --> 00:17:54.535 because you have this whole representation 00:17:54.535 --> 00:17:58.210 is encapsulated in familiar pattern. 00:17:58.210 --> 00:18:01.810 So you have IDisposable which we've all used, 00:18:01.810 --> 00:18:10.080 and we have logical data structures 00:18:10.080 --> 00:18:11.310 and ways that we can use 00:18:11.310 --> 00:18:14.760 those more effectively than just say unsubscribing. 00:18:14.760 --> 00:18:18.700 So some really cool ways you can do that, 00:18:18.700 --> 00:18:20.680 you can easily manage these life times. 00:18:20.680 --> 00:18:25.359 So remember before where you have to make sure to unsubscribe, 00:18:25.359 --> 00:18:28.600 so like in Xamarin Forms for example, 00:18:28.600 --> 00:18:32.590 if you're changing an element or if something new comes 00:18:32.590 --> 00:18:34.210 in that you want to subscribe to 00:18:34.210 --> 00:18:36.325 and you don't care about the old thing anymore, 00:18:36.325 --> 00:18:40.000 you have to do this thing where you unsubscribe from the old one, 00:18:40.000 --> 00:18:41.290 subscribe to the new one, 00:18:41.290 --> 00:18:44.920 then also your dispose point have 00:18:44.920 --> 00:18:48.955 to make sure you're unsubscribing from those events as well. 00:18:48.955 --> 00:18:50.650 So that's what's neat though, 00:18:50.650 --> 00:18:57.070 is that your entire event observation management system 00:18:57.070 --> 00:19:00.055 can be articulated through disposables. 00:19:00.055 --> 00:19:02.740 We act to that and a lot of these things here 00:19:02.740 --> 00:19:05.215 I wish they would just pull into the.Net Framework, 00:19:05.215 --> 00:19:08.290 but for now, in 00:19:08.290 --> 00:19:11.440 ReactiveX you have these things like CompositeDisposable. 00:19:11.440 --> 00:19:13.450 So the idea there is you can aggregate 00:19:13.450 --> 00:19:17.035 all your disposables into a single data structure, 00:19:17.035 --> 00:19:20.260 and then that data structure now, 00:19:20.260 --> 00:19:22.225 you can just dispose of once, 00:19:22.225 --> 00:19:26.125 once the lifetime of the containing class is gone, 00:19:26.125 --> 00:19:28.540 and now all your event management is taken care of. 00:19:28.540 --> 00:19:33.310 So you can attach your PropertyChanged subscriptions there, 00:19:33.310 --> 00:19:37.570 your TextChanged subscriptions, and then you just dispose of it. 00:19:37.570 --> 00:19:38.650 So it's neat because you're getting 00:19:38.650 --> 00:19:44.200 these object concepts that you can apply to your events, 00:19:44.200 --> 00:19:48.740 so it's nice, I like it. 00:19:51.900 --> 00:19:55.030 For example, like I was talking about before, 00:19:55.030 --> 00:19:57.430 where you have an instance 00:19:57.430 --> 00:19:59.725 where you have an old element that you're subscribed to, 00:19:59.725 --> 00:20:01.000 I mean a new element comes 00:20:01.000 --> 00:20:04.690 in so you don't care about the old one anymore. 00:20:04.690 --> 00:20:06.310 So it has like these cool concepts 00:20:06.310 --> 00:20:08.110 here with like a serial disposal, 00:20:08.110 --> 00:20:09.910 where anything that you assign to that will 00:20:09.910 --> 00:20:12.250 automatically dispose of the thing before it. 00:20:12.250 --> 00:20:14.980 So in these ideas here, 00:20:14.980 --> 00:20:16.900 you don't have to 00:20:16.900 --> 00:20:19.690 unsubscribe for what came in there, which is really neat. 00:20:19.690 --> 00:20:23.530 But you know that this is the new hotness that you care about, 00:20:23.530 --> 00:20:25.390 and then once that comes in, 00:20:25.390 --> 00:20:28.735 you just get rid of whatever was there before, 00:20:28.735 --> 00:20:30.370 so then that allows you to set-up 00:20:30.370 --> 00:20:36.470 these really cool expressions of what you want to do. 00:20:37.320 --> 00:20:41.770 Because a lot of the stuff with Reactive which is really nice, 00:20:41.770 --> 00:20:47.560 is having all of your intent in a single location. 00:20:47.560 --> 00:20:51.050 Event management is very callback-based, 00:20:52.080 --> 00:20:56.320 you don't get in as bad styles like a total callback hell, 00:20:56.320 --> 00:20:58.645 but it's still kind of the same thing. 00:20:58.645 --> 00:21:01.330 It's callback management and then interacting 00:21:01.330 --> 00:21:03.760 all these different callback scenarios when you have 00:21:03.760 --> 00:21:06.665 the same thing with how you manage the lifetime of it. 00:21:06.665 --> 00:21:13.470 But has anyone here done Xamarin Forms stuff? 00:21:13.470 --> 00:21:17.050 I'm just mapping logical modelings here. 00:21:17.050 --> 00:21:20.455 So you have this idea now where 00:21:20.455 --> 00:21:25.690 the way you can 00:21:25.690 --> 00:21:27.250 manage the entire life cycle of 00:21:27.250 --> 00:21:30.635 something is just right there in that middle part, 00:21:30.635 --> 00:21:33.840 and that's everything you have to do. 00:21:33.840 --> 00:21:36.315 Once that's set-up there, 00:21:36.315 --> 00:21:40.635 now any time you come in and you have an element change, 00:21:40.635 --> 00:21:42.650 and you only care about the new element, 00:21:42.650 --> 00:21:47.230 assigning a new disposable causes the previous one to dispose, 00:21:47.230 --> 00:21:49.990 so now all of your events are totally unwired, 00:21:49.990 --> 00:21:52.645 and then now you start wiring up your new ones. 00:21:52.645 --> 00:21:53.860 Then in your disposed, 00:21:53.860 --> 00:21:56.260 you just have a single serial dispose which is 00:21:56.260 --> 00:22:01.750 your class level managed resource that you're disposing of. 00:22:01.750 --> 00:22:06.880 So now there's not 00:22:06.880 --> 00:22:10.480 this complexity of management as far as your advance handling. 00:22:10.480 --> 00:22:13.300 So this actually was the first thing that got me into 00:22:13.300 --> 00:22:17.630 Reactive Programming was the disposable management, 00:22:18.900 --> 00:22:22.150 I think it was like a year before I'd even used anything else. 00:22:22.150 --> 00:22:25.540 Just because I had a Silverlight application that was having 00:22:25.540 --> 00:22:30.775 some subscription issues and then I happened upon this stuff, 00:22:30.775 --> 00:22:32.815 so this stuff is cool, 00:22:32.815 --> 00:22:34.870 the disposables make me super happy. 00:22:34.870 --> 00:22:37.390 So these are still mapping some of 00:22:37.390 --> 00:22:40.120 these ideas which are really neat, so like here, 00:22:40.120 --> 00:22:42.700 remember before when you wanted to only subscribe to 00:22:42.700 --> 00:22:45.445 that one event and you only wanted to see it once? 00:22:45.445 --> 00:22:48.640 With Reactive, you can do 00:22:48.640 --> 00:22:52.045 that entire concept here with this one expression. 00:22:52.045 --> 00:22:54.160 So all this does it says, 00:22:54.160 --> 00:22:58.839 "I only want one value from this Property Changed, 00:22:58.839 --> 00:23:02.680 and then at that point I want you to get rid of it." 00:23:02.680 --> 00:23:05.335 So I mean that's awesome right there, 00:23:05.335 --> 00:23:07.555 Take one and then switch, 00:23:07.555 --> 00:23:10.180 which is a little tricky to understand but those are 00:23:10.180 --> 00:23:13.270 just enough reasons to use it forever, 00:23:13.270 --> 00:23:15.340 it's nice, I like it. 00:23:15.340 --> 00:23:22.210 So that's the breakdown of how the operations work. 00:23:22.210 --> 00:23:31.670 So I have a couple of demos of realizing this in code a bit more, 00:23:33.360 --> 00:23:39.970 but I wanted to give some concept prep to you as well, 00:23:39.970 --> 00:23:45.700 to some of the types of Reactive structures that we're using, 00:23:45.700 --> 00:23:47.980 just so it makes a little more sense. 00:23:47.980 --> 00:23:50.500 So one of the ways you describe stuff 00:23:50.500 --> 00:23:53.185 with Reactive is by using Marble Diagrams, 00:23:53.185 --> 00:23:55.075 so there are these ideas of seeing 00:23:55.075 --> 00:24:01.405 your input and what the output is. 00:24:01.405 --> 00:24:03.760 So the top two here, 00:24:03.760 --> 00:24:10.285 this is the vernacular for most Reactive information, 00:24:10.285 --> 00:24:14.800 so anytime you see Reactive Operators described, 00:24:14.800 --> 00:24:16.330 they're always described in this format. 00:24:16.330 --> 00:24:19.810 So the idea here is that the top two things are data streams, 00:24:19.810 --> 00:24:23.480 and then the bottom one is what your subscriber sees. 00:24:24.420 --> 00:24:27.519 Merge would be two subscribers, 00:24:27.519 --> 00:24:29.980 so like if you were subscribing to say a TextChanged event 00:24:29.980 --> 00:24:36.175 on a username box and a password box for example, 00:24:36.175 --> 00:24:38.620 anytime either of those change this is 00:24:38.620 --> 00:24:40.690 what your output would look like. 00:24:40.690 --> 00:24:43.360 So these are some of the operators I used in the demo, 00:24:43.360 --> 00:24:44.620 so I just wanted 00:24:44.620 --> 00:24:50.350 to make sure they were understood before I moved on. 00:24:50.350 --> 00:24:53.350 So Filter, this is basically like a where, 00:24:53.350 --> 00:24:57.460 so on link to IEnumerable, 00:24:57.460 --> 00:25:00.280 it's just like a where. 00:25:00.280 --> 00:25:02.260 So effectively any event that comes 00:25:02.260 --> 00:25:05.810 through, simple enough to understand. 00:25:05.850 --> 00:25:09.100 Debounce, so this is the other really cool feature, 00:25:09.100 --> 00:25:11.395 so this is throttling your inputs. 00:25:11.395 --> 00:25:13.570 So in this example what they're 00:25:13.570 --> 00:25:16.210 demonstrating here is that they only want 00:25:16.210 --> 00:25:17.710 the most recent value to come 00:25:17.710 --> 00:25:21.025 out after a certain set amount of time. 00:25:21.025 --> 00:25:25.840 So you can see there's a lag between one and five because two, 00:25:25.840 --> 00:25:27.745 three, and four are 00:25:27.745 --> 00:25:30.280 happening so close together that five is now coming out. 00:25:30.280 --> 00:25:33.910 So this is the quintessential example for Reactive stuff, 00:25:33.910 --> 00:25:36.850 so cases where users are 00:25:36.850 --> 00:25:39.400 doing like search with 00:25:39.400 --> 00:25:42.305 Google when they're typing in their Autocomplete, 00:25:42.305 --> 00:25:45.220 but you don't want to like kick off a web request every time, 00:25:45.220 --> 00:25:48.640 so that's effectively what this is demonstrating, 00:25:48.640 --> 00:25:50.305 which we have an example of. 00:25:50.305 --> 00:25:56.640 Then TakeUntil is the last operator that I use, 00:25:56.640 --> 00:25:58.110 so TakeUntil is really neat, 00:25:58.110 --> 00:26:01.170 because that's for example look like a web request. 00:26:01.170 --> 00:26:04.605 So let's say a web request is kicking off, 00:26:04.605 --> 00:26:07.210 and then the user starts typing again, 00:26:07.210 --> 00:26:09.880 or they say cancel, 00:26:09.880 --> 00:26:11.560 like they don't want it to happen anymore, 00:26:11.560 --> 00:26:16.360 so all of those are another event points that you can enact, 00:26:16.360 --> 00:26:19.465 and at that point it cuts off your stream anymore. 00:26:19.465 --> 00:26:22.375 So that's like a really simple way to say cut off, 00:26:22.375 --> 00:26:25.940 if you don't want a web request or something like that to finish. 00:26:25.940 --> 00:26:32.400 So that's the breakdown of the observable stuff, 00:26:32.400 --> 00:26:35.470 so let me switch over, 00:26:36.080 --> 00:26:39.380 hold on one sec. 00:26:39.380 --> 00:26:52.660 Cool, let's see. 00:26:53.540 --> 00:26:55.875 Is that too small? 00:26:55.875 --> 00:26:57.610 >> Yeah. 00:26:58.710 --> 00:27:01.330 >> It is things you do when you realize 00:27:01.330 --> 00:27:04.000 that you've never done these on the demos before, 00:27:04.000 --> 00:27:07.525 I've actually never increased its font size on Obs Mac before. 00:27:07.525 --> 00:27:16.300 Let's see. I'm trying to do my Windows stuff here, 00:27:16.300 --> 00:27:20.540 there we go, I'm guessing that's it. 00:27:22.580 --> 00:27:26.610 All right I was trying on my gestures on the pad. 00:27:26.610 --> 00:27:27.630 I did the swipe. 00:27:27.630 --> 00:27:28.650 I did two fingers, 00:27:28.650 --> 00:27:32.670 I did this. I don't know. 00:27:32.670 --> 00:27:35.280 I didn't happen upon it I guess. 00:27:35.280 --> 00:27:45.015 So there we go. Okay yes. 00:27:45.015 --> 00:27:46.740 So as you start windows where you just hit 00:27:46.740 --> 00:27:48.615 control and split it up. 00:27:48.615 --> 00:27:51.910 All right so that everyone can see that. All right? 00:27:52.070 --> 00:27:55.410 So let me run the demo real 00:27:55.410 --> 00:27:59.895 quick just so we have context of what we're doing here. 00:27:59.895 --> 00:28:02.640 So this is kind of a basic application. 00:28:02.640 --> 00:28:08.355 It's just a login logout idea. 00:28:08.355 --> 00:28:14.265 Yeah, so below I have a set of events that are occurring, 00:28:14.265 --> 00:28:21.690 so this is effectively the data stream of the observables. 00:28:21.690 --> 00:28:23.970 So all the events that are happening with the observables. 00:28:23.970 --> 00:28:25.365 So here we have log in. 00:28:25.365 --> 00:28:27.240 So this is user and password 00:28:27.240 --> 00:28:28.665 that I should have put a placeholders log. 00:28:28.665 --> 00:28:34.095 But so the idea here you can see if I hit a letter. 00:28:34.095 --> 00:28:36.509 There. So hit a letter 00:28:36.509 --> 00:28:39.090 and at that point it's validating the input. 00:28:39.090 --> 00:28:41.175 Now you can see that there's kind of this delay. 00:28:41.175 --> 00:28:43.935 Right? So if I hit "O" there's a delay. 00:28:43.935 --> 00:28:46.170 So the idea behind that is that you're 00:28:46.170 --> 00:28:49.455 not- that's that debouncing that you're talking about. 00:28:49.455 --> 00:28:54.945 So if I type in the "Username" and the "Password". 00:28:54.945 --> 00:28:59.310 There. You can see that once that validation happens. 00:28:59.310 --> 00:29:01.710 So that's just we'll kind of break down these structures once I 00:29:01.710 --> 00:29:04.275 get in there but that's the idea behind it. 00:29:04.275 --> 00:29:08.910 So. Yes. So pretty exciting. 00:29:08.910 --> 00:29:11.955 Now we have a simulated for login. 00:29:11.955 --> 00:29:14.250 So the idea here I click "Login". 00:29:14.250 --> 00:29:18.840 It starts a web request and then at that point you can log out. 00:29:18.840 --> 00:29:21.870 So and there's kind of an 00:29:21.870 --> 00:29:26.415 additional let's see how many times it takes before this triggers. 00:29:26.415 --> 00:29:30.090 So I have a randomizer in there to randomly 00:29:30.090 --> 00:29:35.415 generate errors. There it is. 00:29:35.415 --> 00:29:38.400 Cool. So you can see here what 00:29:38.400 --> 00:29:41.775 happens is that I clicked the "Login". 00:29:41.775 --> 00:29:44.535 It generated an exception. 00:29:44.535 --> 00:29:47.895 So like the Web Request exception. 00:29:47.895 --> 00:29:51.630 Then it said okay let's just try the Web Request again. 00:29:51.630 --> 00:29:59.640 Then at that point it then logged me in, right? 00:29:59.640 --> 00:30:02.655 Then the other aspect of this which is me. 00:30:02.655 --> 00:30:05.070 Like let's say the user wants to cancel it. 00:30:05.070 --> 00:30:09.100 So if they click "Login" they can click "Cancel". 00:30:09.350 --> 00:30:13.470 There you can see now it's no longer processing the data. 00:30:13.470 --> 00:30:16.035 Right? So that because 00:30:16.035 --> 00:30:18.885 there's an operation kind of canceling that. 00:30:18.885 --> 00:30:23.805 So this is to demo. 00:30:23.805 --> 00:30:25.815 Yeah, so this is the idea behind. 00:30:25.815 --> 00:30:27.900 This is the code. 00:30:27.900 --> 00:30:32.160 Yeah, so the idea 00:30:32.160 --> 00:30:34.965 behind this to kind of break down the structures. 00:30:34.965 --> 00:30:37.935 Since we've all seen a lot of these things is that 00:30:37.935 --> 00:30:41.340 this is the composability aspect of observables. 00:30:41.340 --> 00:30:43.890 The composability aspect is that you have 00:30:43.890 --> 00:30:46.920 this representation of your events as 00:30:46.920 --> 00:30:50.730 these single data streams that you can then start to 00:30:50.730 --> 00:30:55.845 intermix to articulate the behavior of your application. 00:30:55.845 --> 00:31:01.050 So if we have the app what are all the event streams on here. 00:31:01.050 --> 00:31:03.360 The event streams are we have the entry on 00:31:03.360 --> 00:31:07.065 the top we have the entry on the second fields. 00:31:07.065 --> 00:31:10.320 As the user types we have the Login button click. 00:31:10.320 --> 00:31:12.975 We have the Cancel button click and we have like the Web Request. 00:31:12.975 --> 00:31:17.205 So we have effectively five different events. 00:31:17.205 --> 00:31:20.550 Streams that we need to describe. 00:31:20.550 --> 00:31:28.545 So we can break these up into their reactive parts. 00:31:28.545 --> 00:31:32.145 So these are all pretty unexciting. 00:31:32.145 --> 00:31:37.050 This is that same stuff you saw before which is basically 00:31:37.050 --> 00:31:39.180 just saying Hey I want to create this 00:31:39.180 --> 00:31:42.630 observable that's listening to the clicked event. 00:31:42.630 --> 00:31:46.095 So this is the core aspect of this that's exciting. 00:31:46.095 --> 00:31:51.825 So we create an observable for each of these different elements. 00:31:51.825 --> 00:31:54.030 We have our login. 00:31:54.030 --> 00:31:55.470 So that's when they click. 00:31:55.470 --> 00:31:56.805 We have our logout. 00:31:56.805 --> 00:31:58.440 That's when they log out. 00:31:58.440 --> 00:32:01.785 We have our cancel. That's when they click "Cancel". 00:32:01.785 --> 00:32:06.750 We have the Text Change here which is when they're 00:32:06.750 --> 00:32:09.000 typing in the username and we have 00:32:09.000 --> 00:32:12.090 the Password here when they're typing in the password. 00:32:12.090 --> 00:32:15.300 Then, we make a fake Web Request call. 00:32:15.300 --> 00:32:17.670 So this is just demonstrating. 00:32:17.670 --> 00:32:20.565 It's essentially just waiting two seconds. 00:32:20.565 --> 00:32:22.440 Then once it finishes it generates 00:32:22.440 --> 00:32:26.265 an error if some random number equals two. 00:32:26.265 --> 00:32:35.010 Yeah. So that's our application. 00:32:35.010 --> 00:32:38.250 That's in observable representation of 00:32:38.250 --> 00:32:41.985 all the events that can occur in the application, right? 00:32:41.985 --> 00:32:43.860 So now this is where 00:32:43.860 --> 00:32:47.680 the composability aspect comes into play which is really cool. 00:32:48.500 --> 00:32:51.150 Now, all of these different observables 00:32:51.150 --> 00:32:53.220 take a life of their own. 00:32:53.220 --> 00:33:00.060 So the entirety of the logic that you see 00:33:00.060 --> 00:33:06.990 there is embodied with a fairly simple amount of code, right? 00:33:06.990 --> 00:33:12.780 So here this is our validation code. 00:33:12.780 --> 00:33:14.940 So now what we do is we're building up 00:33:14.940 --> 00:33:18.810 additional observables on these other observables. 00:33:18.810 --> 00:33:21.990 Right? So that's what's the composability aspect of it. 00:33:21.990 --> 00:33:23.640 So the first one is we 00:33:23.640 --> 00:33:26.520 say okay we want an authenticated observable. 00:33:26.520 --> 00:33:29.580 The authenticated observable is the user clicking 00:33:29.580 --> 00:33:33.060 "Login" and clicking off "Web Request". 00:33:33.060 --> 00:33:39.090 So now we've composed these two ideas of observable events. 00:33:39.090 --> 00:33:42.870 We've now merged this data stream with a logout. 00:33:42.870 --> 00:33:47.250 So if a user clicks "Logout" then that's saying "Hey, 00:33:47.250 --> 00:33:48.735 I want you to log out." 00:33:48.735 --> 00:33:54.480 So we have the entire authentication state of 00:33:54.480 --> 00:34:00.525 the application represented by a new observable authenticated. 00:34:00.525 --> 00:34:02.295 Authenticated observable. 00:34:02.295 --> 00:34:05.295 So that's the only observable we care about at this point. 00:34:05.295 --> 00:34:07.530 So that's how now we can use that 00:34:07.530 --> 00:34:09.540 observable anywhere else where we 00:34:09.540 --> 00:34:14.940 want to ask about what is the user authenticated. 00:34:14.940 --> 00:34:18.190 You know which is need. 00:34:19.910 --> 00:34:22.620 Then here we have our validation. 00:34:22.620 --> 00:34:24.720 Our validation is a composition of 00:34:24.720 --> 00:34:29.410 our Username and our Password there which is nice. 00:34:29.570 --> 00:34:33.645 So that essentially comes in. 00:34:33.645 --> 00:34:35.894 It says "Hey, 00:34:35.894 --> 00:34:38.909 these are the data points that represent the validity." 00:34:38.909 --> 00:34:43.080 It transforms those events into a 00:34:43.080 --> 00:34:47.910 true or a false value that we can now use to say, "Okay. 00:34:47.910 --> 00:34:53.860 What is the state of the events that have been coming in? " 00:34:55.190 --> 00:34:58.515 So then this let's us now 00:34:58.515 --> 00:35:01.455 put together- Now we can put all of this stuff together. 00:35:01.455 --> 00:35:03.120 This is where kind of like the functional 00:35:03.120 --> 00:35:05.295 reactive programming aspect comes into play. 00:35:05.295 --> 00:35:08.880 We can now put all these different observables together into 00:35:08.880 --> 00:35:10.485 one nice little place 00:35:10.485 --> 00:35:15.255 here that describes everything that's going to be happening. 00:35:15.255 --> 00:35:17.760 So this is the part of it that's really neat. 00:35:17.760 --> 00:35:22.995 Because with this application you can get 00:35:22.995 --> 00:35:27.120 a perspective scope on all of 00:35:27.120 --> 00:35:31.710 the logic just by being right here in this code point. 00:35:31.710 --> 00:35:36.060 There's no having to jump around or anything. 00:35:36.060 --> 00:35:40.170 It's an immutable location based on 00:35:40.170 --> 00:35:46.485 immutable data to modify how these data points work. 00:35:46.485 --> 00:35:50.190 So it's nice because it's a nice easy way. 00:35:50.190 --> 00:35:53.490 So like the data that comes in this result value here 00:35:53.490 --> 00:35:57.450 is an immutable structure. 00:35:57.450 --> 00:36:00.435 Then based on this data you know authenticated observable. 00:36:00.435 --> 00:36:02.760 So what this is doing here is saying what's 00:36:02.760 --> 00:36:06.315 your authentication state is whether you're authenticated or not. 00:36:06.315 --> 00:36:10.845 Valid is saying whether the credentials they entered as are valid. 00:36:10.845 --> 00:36:12.360 Then based on that, 00:36:12.360 --> 00:36:17.320 you set up the visibility of your application. 00:36:20.170 --> 00:36:22.890 Yeah, so you can set up like the visibility of 00:36:22.890 --> 00:36:26.200 your application. So it's neat. 00:36:28.340 --> 00:36:31.905 So let's see. 00:36:31.905 --> 00:36:34.350 I have one more demo real quick, 00:36:34.350 --> 00:36:36.820 just a small one. 00:36:39.350 --> 00:36:43.725 Oops, a little too big there. There we go. 00:36:43.725 --> 00:36:45.345 Does everyone see that, all right? 00:36:45.345 --> 00:36:50.400 Yeah. All right. I have these up in like GitHub repos. 00:36:50.400 --> 00:36:53.520 This is using a little bit of the reactive UI stuff, 00:36:53.520 --> 00:36:55.695 but let me just show. 00:36:55.695 --> 00:37:00.730 This has a few different samples that you can take a look at. 00:37:02.360 --> 00:37:10.240 Hopefully, it runs. Is it already running? There it goes. 00:37:10.940 --> 00:37:14.980 So a lot of these are simple things that you see. 00:37:15.050 --> 00:37:17.775 Let's look at the position demo since we're 00:37:17.775 --> 00:37:19.905 running low on time here. 00:37:19.905 --> 00:37:21.900 So the idea of the position demo 00:37:21.900 --> 00:37:24.810 is that it's you're tracking your mouse pointer. 00:37:24.810 --> 00:37:30.780 This has another popular example for reactive concepts. 00:37:30.780 --> 00:37:32.055 So you push down. 00:37:32.055 --> 00:37:33.660 It's detecting that you press. 00:37:33.660 --> 00:37:34.740 If you move your mouse around, 00:37:34.740 --> 00:37:36.000 now it's detecting that you moved, 00:37:36.000 --> 00:37:37.380 and then you let go, and it gives 00:37:37.380 --> 00:37:40.335 you an aggregation of all your data. 00:37:40.335 --> 00:37:49.380 It's broken up a little bit 00:37:49.380 --> 00:37:51.720 because I need to have the descriptions, 00:37:51.720 --> 00:37:56.080 but it's really neat because all you have to really do, 00:37:56.120 --> 00:37:58.905 you have your pointer pressed event. 00:37:58.905 --> 00:38:01.200 So you have the pointer press which says, 00:38:01.200 --> 00:38:03.840 "Hey, I've pressed the mouse down." 00:38:03.840 --> 00:38:06.840 Now, once this has happened, you say, "Okay, 00:38:06.840 --> 00:38:10.395 I want to subscribe to the pointer being moved around." 00:38:10.395 --> 00:38:14.170 So this is now the pointer being moved around. 00:38:14.240 --> 00:38:16.800 As it's moving now, 00:38:16.800 --> 00:38:20.085 you're pulling all this data together here, 00:38:20.085 --> 00:38:23.145 and then the two list operator, here, 00:38:23.145 --> 00:38:24.960 is now able to aggregate all that data 00:38:24.960 --> 00:38:27.405 together into a single data set. 00:38:27.405 --> 00:38:29.760 Then here, the take until that was 00:38:29.760 --> 00:38:32.220 the one operation that we were showing here. 00:38:32.220 --> 00:38:34.170 It says, "Hey, okay, I only want you to 00:38:34.170 --> 00:38:36.270 take this data and tell the pointers released." 00:38:36.270 --> 00:38:38.309 So you get this really cool interaction 00:38:38.309 --> 00:38:40.020 of all these events to say, 00:38:40.020 --> 00:38:41.940 because all you really wanted to say is I want to move 00:38:41.940 --> 00:38:44.130 the mouse around and when they let go of the mouse, 00:38:44.130 --> 00:38:45.810 I want all the data that was there. 00:38:45.810 --> 00:38:47.160 So you can get all of this 00:38:47.160 --> 00:38:50.505 represented in this nice little subscription here. 00:38:50.505 --> 00:38:55.120 So this is one of those main examples. 00:38:57.130 --> 00:39:03.360 Yes, so that's a quick primer into the reactive concepts. 00:39:04.690 --> 00:39:08.940 There's a lot of good frameworks out there. 00:39:11.210 --> 00:39:16.740 Oops, not helpful. There we go. 00:39:16.740 --> 00:39:23.280 Yeah. So that's the idea behind most of the observables. 00:39:23.280 --> 00:39:25.530 Michael's going to talk a bit more about using 00:39:25.530 --> 00:39:28.545 these frameworks with MVVM. 00:39:28.545 --> 00:39:32.880 There's a lot of really powerful tools like dynamic data. 00:39:32.880 --> 00:39:35.100 Select Dynamic Data, it's 00:39:35.100 --> 00:39:37.590 a really cool platform 00:39:37.590 --> 00:39:41.985 for superpower in your lists with observables. 00:39:41.985 --> 00:39:43.890 So the idea is that you can 00:39:43.890 --> 00:39:46.995 essentially make everything and observable. 00:39:46.995 --> 00:39:49.660 You can to sign it, I didn't know that. 00:39:51.470 --> 00:39:53.610 So I guess real quick, 00:39:53.610 --> 00:39:55.960 does anyone have questions? 00:39:57.410 --> 00:40:00.720 Yes, Sam. Well, yeah. 00:40:00.720 --> 00:40:04.095 We'll let's just go there. We'll do questions some 35 minutes. 00:40:04.095 --> 00:40:05.520 >> So talk about 00:40:05.520 --> 00:40:10.380 the disclosing of the [inaudible] and all that stuff. 00:40:10.380 --> 00:40:14.220 Talk about why observables are better [inaudible]. 00:40:14.220 --> 00:40:20.460 >> Yeah, so I 00:40:20.460 --> 00:40:24.045 guess I would say because the management- So the question was, 00:40:24.045 --> 00:40:25.680 with the memory leaking, 00:40:25.680 --> 00:40:28.290 why is the fact that it returns 00:40:28.290 --> 00:40:31.245 a disposable better first say memory management? 00:40:31.245 --> 00:40:33.090 The idea there is just, yeah, 00:40:33.090 --> 00:40:37.230 it's it's the fact that it's the lifetime of 00:40:37.230 --> 00:40:43.665 the observable is an aspect of the subscription. 00:40:43.665 --> 00:40:46.920 So when you're subscribing to it, you get back, 00:40:46.920 --> 00:40:49.395 because anytime you get a disposable from something, 00:40:49.395 --> 00:40:51.270 you know that you have to dispose of it. 00:40:51.270 --> 00:40:54.630 Like that's the paradigm that we use. 00:40:54.630 --> 00:40:57.060 So that's the idea about it. 00:40:57.060 --> 00:41:01.365 It's that with the venting especially for new programmers, 00:41:01.365 --> 00:41:03.660 they're always going to make that as mistake 00:41:03.660 --> 00:41:07.700 where are like something's 00:41:07.700 --> 00:41:08.810 going to outlive something else 00:41:08.810 --> 00:41:10.250 because you have to understand that. 00:41:10.250 --> 00:41:15.360 But a disposable is a very basic concept. 00:41:15.360 --> 00:41:19.155 So having that as part of the subscription 00:41:19.155 --> 00:41:22.860 makes your memory management scenarios easier. 00:41:22.860 --> 00:41:25.440 Yeah. 00:41:25.440 --> 00:41:26.940 Any other questions? 00:41:26.940 --> 00:41:28.727 Yeah. 00:41:28.727 --> 00:41:35.250 >> [inaudible]. 00:41:35.250 --> 00:41:39.060 >> Yeah. So the question was, 00:41:39.060 --> 00:41:41.985 can you use Reactive Programming 00:41:41.985 --> 00:41:45.060 with things like tasks or asynchronous programming? 00:41:45.060 --> 00:41:50.865 Yeah. So a task is effectively a one-point notification. 00:41:50.865 --> 00:41:53.355 So when you have a task, 00:41:53.355 --> 00:41:57.210 there's three data points for a task which is exactly like 00:41:57.210 --> 00:42:02.175 our iterator when we were indicating. 00:42:02.175 --> 00:42:05.040 So when you write a task- Okay, 00:42:05.040 --> 00:42:06.615 I don't know where it's coming up. All right. 00:42:06.615 --> 00:42:08.190 So when you have a task, 00:42:08.190 --> 00:42:14.145 you create the task so that's you having it in the beginning, 00:42:14.145 --> 00:42:19.724 then you start the task so now it's running, 00:42:19.724 --> 00:42:23.355 and then the task produces a value, 00:42:23.355 --> 00:42:26.445 that's your dot results which none of us are typing, 00:42:26.445 --> 00:42:29.970 and then it completes at the completion of that. 00:42:29.970 --> 00:42:31.440 So at that point, 00:42:31.440 --> 00:42:35.190 you have one data point observable. 00:42:35.190 --> 00:42:40.680 So disposable creates things 00:42:40.680 --> 00:42:42.900 that work exactly against the task so 00:42:42.900 --> 00:42:45.180 that you can create an observable against the task. 00:42:45.180 --> 00:42:49.125 So then what will happen is when you subscribe to that observable, 00:42:49.125 --> 00:42:54.494 is it'll effectively start the task and then once that happens, 00:42:54.494 --> 00:42:56.190 that kicks back a results. 00:42:56.190 --> 00:42:59.655 So that produces one value and then it completes. 00:42:59.655 --> 00:43:01.410 Then that's another thing that's really super 00:43:01.410 --> 00:43:03.600 helpful because if that task fails, 00:43:03.600 --> 00:43:05.040 you get your stuff with 00:43:05.040 --> 00:43:07.485 observables where you can catch the exception. 00:43:07.485 --> 00:43:13.500 So for example, scenarios like async void, for example. 00:43:13.500 --> 00:43:16.575 Async void is a non-issue with observables. 00:43:16.575 --> 00:43:18.495 You never have to worry about 00:43:18.495 --> 00:43:21.970 async void If you're doing observables. 00:43:22.040 --> 00:43:26.520 So for example, you know how you maybe want to start an async task 00:43:26.520 --> 00:43:28.050 from a constructor or things like 00:43:28.050 --> 00:43:30.060 that or these issues from those with observables, 00:43:30.060 --> 00:43:31.200 that's not even a scenario, 00:43:31.200 --> 00:43:34.320 because you just wrap the task in an 00:43:34.320 --> 00:43:36.180 observable and then you have 00:43:36.180 --> 00:43:39.225 the exception behavior as part of the observable with the task. 00:43:39.225 --> 00:43:40.710 So yeah, they work. 00:43:40.710 --> 00:43:42.060 They're great for tasks. 00:43:42.060 --> 00:43:43.770 So there I forget who does a talk. 00:43:43.770 --> 00:43:46.260 Jeffrey or something like that does a talk on that; 00:43:46.260 --> 00:43:48.015 talking about how tasks are 00:43:48.015 --> 00:43:50.010 super bad and you should just use observables. 00:43:50.010 --> 00:43:51.360 But yeah, once you start using 00:43:51.360 --> 00:43:53.685 observables especially in your UI code, 00:43:53.685 --> 00:43:55.260 you'll effectively just put 00:43:55.260 --> 00:43:57.420 a facade in front of all of your tasks because 00:43:57.420 --> 00:44:02.080 it becomes so much simpler to manage through observables. 00:44:02.450 --> 00:44:04.905 Any other questions? 00:44:04.905 --> 00:44:07.840 I'm getting the shhh. 00:44:09.380 --> 00:44:12.870 Can I take one more question? No? Okay, no. 00:44:12.870 --> 00:44:15.075 I'll answer your question right after. 00:44:15.075 --> 00:44:17.340 Cool. So yeah, I'm Shane. 00:44:17.340 --> 00:44:20.500 That's my observables.