André Staltz (@andrestaltz): You will learn RxJS at ng-europe 2016

hello everybody when I landed in Paris I went straight to the hotel and I tried to do this on the check-in and the hotel is normally and they just couldn't find my name so I was like okay maybe check this other name and they were like nope you can't get in and so I waited for a while and then after while someone checked from a list and stuff and then it turns out they had misspelled my name they wrote Saltz andrew so hi my name is salty Andrew and as you've heard I I built a framework called psycho Jess which is completely different framework so I'm quite honored to be invited here for react comp I mean ember angular angular cough yes sorry sorry okay ah I also am a core contributed to rxjs so I wrote some documentation some bug fixes and tests and so it means that some of the code that's running now in angular 2 is my fault I mean my contribution and in this talk we're going to see rxjs the basics raise your hand if you feel like raising your hand for no good reason that's a lot of people quite impressive so this is not a talk where you know like why should you use rxjs this is just a talk where we build rxjs from scratch and you're going to see that you know this is not scary at all after actually it's pretty straightforward and we're going to see in a couple of lines of code so it's all about getting any kind of callback in JavaScript and representing that as a collection and then you can sort of operate on that collection kind of as you can with lodash collections let's say with arrays or objects so you have map and filter and that's it that's our X Jess so it's all about callbacks let's talk a little bit about callbacks this is just a basic example I suppose that size is okay yes no no okay so we just have an element on the Dom and you can register a callback over an event listener so that this function runs whenever we click okay that's one type of callback another type of callback in JavaScript we have a raise right so here we have an array of numbers like that and then you can do for each so you register a callback to run for each item in the array okay then it just runs you know console.log 10 20 30 40 50 60 we can actually see that running basic stuff it says before 10 20 30 put in the 60 and after so that means that this callback ran synchronously okay so callbacks are not just asynchronous programming okay let's let's settle that that they can be synchronous or they can be asynchronous well other kind of callbacks do we have in JavaScript there are promises so here's the fetch with some URL and there we get a response promise and now we can register to callbacks not just one we have also for failures when something bad happens then we have a callback for that as well so this is new because you don't have an error for clicks right you can't just like fail to click oh like it broke my finger ah like that doesn't happen so but with promises and HTTP you can have an error so that's why we have a callback for errors and going a bit further in nodejs like you have no js' streams and there you register three callbacks for data I got new chunk of data for errors if something bad happens and for done why do we need the done in this case is that when you're receiving data you don't actually know how many chunks are you going to get so at some point you need to have some indication of like I'm done okay so we have all these cases and so what if we try to make the most generic API for all kinds of callbacks in JavaScript now we're going to have to have these three callbacks okay so it would look something like this where you have the next callback the error callback and the complete callback in the case of let's say basic clicks we're just going to use this one right I'm going to do like you're going to get that click this data is a click event and you're not going to use the other so we can actually implement that just quickly we have this function called give me some data and in this case you know I have clicks that's my data and then I have three callbacks there CPA leet CB and I'm not just going to I'm just going to use the next CB I'm not going to use the error and the complete so on the document we're going to add an event listener or clicks next CB um okay that's silly right but what if I would have here instead of a click listener I would have a fetch write for some URL then I would use the next CB and also the arrow CB and then I would have to handle that those errors somehow here I'm just going to do a console log but if you would have like let's say no js' streams then they would call the complete callback I would also have to handle those here somehow okay so this API as you can see like it handles all kinds of callbacks and it also handles let's say arrays so I can do afford each on this array and call the next CB right I'm going to actually run that 0 6 and it says 10 20 30 okay what did I just do there ah I just called this function and that ran this and it delivered all those those values in the next CB now why is this called give me some data so that sometimes well when you call a function you just want to get data out of it like that let's say this is like the typical case but if it comes asynchronously then you need callbacks so we are just saying that give me some data and please deliver the results or the data to these callbacks okay and then kind of things work I'm going to do one more trick okay and that is I'm going to instead of passing three callbacks I'm going to just pass one object to this function I'm going to create that object I'm going to call it an observer and this is just going to bundle all of those three callbacks in one object nothing special complete that's so also going to move this down here so then I say give me some data and deliver the results on this observer okay and then once I get that observer object I just call next okay and this still works I promise you still working oh and by the way since we're delivering ten twenty thirty and we know that the array is not going to meet anything else I can just do observer dot complete okay so it says hey I get ten twenty thirty and I am done okay okay so why did I do that so I can just bundle the three callbacks in one object I'm going to do also yet another trick where I'm going to rename this give me some data to subscribe it's just a name okay subscribe means what what again again drink some water it's just a name and it means give me data that's it so I'm going to do one more trick many tricks today but anyway I'm gonna put that function in an object okay just putting it in an object and you see the object has one property and that's the SUBSCRIBE and it's a function so then down here I can say observable and don't subscribe okay why did I do that well we have this observer object and it's observing something right so that's something is observable better yeah so nothing special and by the way like since I'm wrapping this array inside this object with a function I'm just going to call this an array observable okay so then I could also have for instance click observable and this would do something now so it would like register an event listener and it would call observer none next okay so I can have all kinds of observables so I could also make a helper function here just to make things a bit easier to create going to make this helper function called create observable which takes the SUBSCRIBE function and it returns an object okay this returns an object and that object as we know it has subscribed I mean this is a very silly function super normal and then I can save a little bit of lines of code here by just passing that see I saved like one or two lines of code like this Oh yep so I just saved like a few lines of code okay so what did I gain with all of this you know this array observable was getting that we we do give me data from this array observable deliver it on the observer and you get stuff like that but okay we have this array there and we know that arrays have nice stuff such as map okay so you can do 10 20 30 is array a and then you can do array B is a map get each of those X and divide them by 10 so a is 10 20 30 and B is another array where each item is divided by 10 okay it's important to know so with observables we kind of lost that because now you know well go away now we we can't really do that right if we try to do that what happens to do it says map is not a function on array observable well that's okay because the array observable was an object that only had subscribed so it would be nice if we didn't add here map right so we could do that so let's just build that as well map as we know is a function that takes a transform function as argument in our case that was the X divided by 10 right and we know that this should return some output observable kind of like arrays do you know they return an output observable or array that is completely different to the input array and we also know that we have well we have that one and we have an input observable and what is this one is this keyword because the map function is attached to this object okay so when you say this keyword for that function it knows that the owner object is that object there so that this keyword is the input observable and in the case of this code that we're running down here that this keyword is the array observer so that's our input absorb okay so how do we create an output observable it's right here right create observable so gladly we have that helper function there and that takes a subscribe function as an input and here we're going to deliver data to the output observer okay okay so remember that subscribed means give me data but we just call it subscribe so when I say output is observable give me data well where does that data come from it comes from the input observable so I also need to do give me data from the input observable and then I need those three callbacks right okay so when I get data from the input I first want to transform that data so I do transform function oh sorry Rand's firm yeah okay transfer function on that input data I get this Y so if X was 10 then Y is 1 because it's divided by 10 and then I just passed that to the output observer here you go and if something bad happens on the input I'm just going to say well an error happened on the input I'm just going to pass that error to the output and if it the if it's done then I can also make the output be done okay and that's it so this map function is attached to this object which is unobservable and then now this will return a new observable right and we can subscribe to that let's see if this works oh it does so one two three and done okay it's nice ok so now our observables are like able to do a bit more than what we could before but we also would like to have filters so we say you know the number two is bad I don't like the number two so we want only numbers that are not - and rays have that so we could build that as well all right we're going to make the filter function and here's a condition function and then whenever we get data from the input we want to check does it pass our condition okay does it return true when I pass it X and if it does then I'm going to just pass it to the output observer because it passed the condition but if it doesn't pass that condition then I'm just not going to do anything okay just didn't pass and in case of error happens the filter is just going to error as well okay we need to attach that filter function to this here like that and that should work as well okay no more number two is we get 1 3 and done now here's an interesting question okay what happens if I comment out this part so there's no more subscribe let's see what happens well oh I didn't save yeah saved save the file laughing nothing happens nothing happens and what's quite interesting is that what if we put here like some console.log you know hi and let's see if that one runs right well no it doesn't run so what's going on okay what is the array observable it's an object right when we call map what does it do it returns output observable what's that an object right and when we call filter what does it do return an object so all that we did was get an object create another object created another object nothing happens so far with those there are just objects and each one of those contains methods but they don't do anything so it's only when we say subscribe which means yo give me data right remember that it's this is actually super important for the knowledge of hot and cold observables so I'm not like super joking but anyway once you subscribe to this part here ok let's take a look how was subscribe on the filter so filter as you see returns this thing and this is the SUBSCRIBE function that we're calling down there this is literally the same function so then this will run and this will this code inside here will run so that means that this part will run this input observable out subscribing what is that it was the map so if you check this is that function and this runs ok so what is this input observable that subscribe this was the rate and if you check what that was it was this code inside here this subscribe and then it finally says okay here here are your value so it goes observer dot next here is your value and that function is literally this same function it transforms that X spits it out to the output observable with observer which in this case is this function for the filter checks if the condition passes and passes that to the output observer and that one is exactly this one here which is the final one that's how it works it goes upwards like subscribe subscribe subscribe transform data transform data filter data pass it back ok this always like this up and down happen no that's cool but we just recreated array map and filter right what's the point of that well what we didn't have before was this we can do click observable right we always already had that over there and then we can map it we know that it has click events so we can do event dot client X that returns an X number and then we can say I only like X numbers that are less than 200 okay so if I get this code and I put it in the browser over here and then if I click over here you see those numbers are emitted that's so that's cool so the map and field and all these sort of helper functions that we had from race now they suddenly work with clicks because both arrays and you know clicks and promises and streams all of them work with callbacks so an absorb was just a way of getting a callback looking thing and making that be a collection and then you can use map and filter in the setter and a bunch of nice stuff and as you know there's not just map filter but there's 120 other operators which is very nice well to some extent that's the some definitions of nice so we also have some cool stuff like delay you don't have a radial a but we can build delay right now it's pretty simple it's like this oh and the way that we you would use it is that we just say dot delay by two seconds okay 200 2000 milliseconds so how do we do that well we know that when we get data from the input we don't want to send it immediately we want to wait for two seconds right so we know that we get this amount of time there and we're just going to wait for that amount of time which was how much period and then we're going to run this which is what give the data to the output after that much time has passed okay so now let me try running this in the browser that click-click click-click and it comes delayed that's cool if I click here nothing happens because it's too large number I need to click over here okay kind of works so that is cool and if you check you know that's rxjs so there you go you import rxjs and it actually also has dot create which is very similar to create observable as we just saw before and here the this this function in particular is a way of wrapping an array in an absorb one then you have filter and happen well like delay all these crazy stuff right and that's basically the idea okay it is very important to know what it does under the hood like going up the subscribtion passing down the values it's very important to know that subscribe is just give me data and if you don't call subscribe nothing's going to happen those are like core ideas that explain a bunch of bugs that people find sometimes and I see actually daily you know on Stack Overflow I see daily like our XJS questions coming in so if you just understand these basics you're not going to trip over stuff that often actually of course you know you're supposed to learn rxjs in this talk that's kind of impossible but this is like super important part and if you want to learn more you know we didn't cover the subscription we didn't cover subjects and schedulers and most of the big operators but there's a lot of learning material like on the documentation site itself I wrote a lot of the manuals so I know what's there and you can also check egghead so if you go to egghead IO we have a ton of courses there about rxjs and it sort of explains things in detail so there's a ton of learning resources and if you want to know how to continue from this well I recommend the documentation site and egghead so yeah I hope you learned something from this and thank you very much for listening you

Channel: ng-europe

Views: 28,571

Rating: 4.9750314 out of 5

Keywords: YouTube Editor

Id: uQ1zhJHclvs

Length: 22min 44sec (1364 seconds)

Published: Tue Nov 01 2016

Reddit Comments

[u/Ispamm]

For me it was banging my head and pushing through the learning curve, and watching this kind of talks on Youtube + reading Learning Rxjava That book made it so much clearer tho.

[u/bernaferrari]

I spent weeks learning rxJava, now I see people everywhere saying to learn/use Kotlin coroutines, which are faster/lighter/better than rx on 90% of cases.

[u/ZakTaccardi]

Pretty awesome that a talk on a javascript library is useful for Android developers. This is the polyglot power of ReactiveX!

[u/roshanthejoker]

The talk is itself in Javascript, but the ideals apply to Java too.

[u/w3bshark]

This was a great video. Thanks for sharing. It's so much easier to understand when someone can talk through the concepts while writing them in code.

[u/pc52]

Wow, nice video. Thanks for sharing!

[u/roshanthejoker]

For anyone who dont know André Staltz is the creator of Cycle.js and invented Model View Intent architecture.