7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Reactive Programming With RxJS

In this lesson I’ll show you how to use the RxJS library to create an Observable to watch and respond to changing data. Afterwards I’ll show you some operators that we can use to extract and parse the observable’s data.

Code Snippet:

Here is an example of an Observable used to debounce button clicks. This will ignore any double or multiple clicks that happen within one second of the first click.

let button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Clicked ${count} times`));

1.Reactive Programming With RxJS
2 lessons, 09:37


Reactive Programming With RxJS

1.2 Reactive Programming With RxJS

[MUSIC] Hello everyone, I am Reggie Dawson. Welcome to the Reactive Programming with RxJS Coffee Break Course for Tuts+. If you've been around Web development, then you may have no doubt heard of reactive programming. At a minimum, if you dabbled in Angular2, you may have heard of observables. Indeed, the first time I heard of the RxJS library was in relation to being needed for HTTP requests in Angular2. This is because the return data from the request is an observable, if you look at some code from the Angular2 site, we can see observables in use. If you look at the good heroes method, you will see that the type that is returned from this method is an array of observables. Observables are the backbone of our RxJS. Then the get method is passing the response to the map method, which is transforming the data to a usable form. Map is one of the operators that is provided by RxJS, then the catch method is used to handle any errors. This is similar to a promise-based request, but these aren't promises, although we can transform a promise into an observable. Then, if we look further down the page, we can see where we subscribe to the observable to grab the data provides. In this instance, we are mapping the return data to a local member of the class, then we are also handling any errors that are returned. Honestly, I know you may be wondering why we need observables at all. I know you may have noticed that we are using the map method to deal with the return data. Normally, we would have to use some sort of loop to walk through an array. In this case, we use the map method, which just needs a function that process the data passed to it. The map method will walk the observable for us and turn the data, the catch method only comes into play if there is an error. Then we access this good heroes method from our module, the data from the map method is passed to the subscriber operator. The hero's variable represents this passed in data, and as a result we assign that to a local member of the class. Now this may be a bit confusing since we have code that is specific to Angular2. So, let's take a look at another example in code ping. First, we need to import from a CDN. Now if you look at this code first you can see that we are capturing the content of our button with the standard JavaScript query selector, after that we are using an observable to capture the click event. We're using the form of it operated to create an observable. First we got our button variable then we add the event that we want to capture. Once we have that we changed our result to the d.bounce operator. Now d.bounce is one of the filter operators of rxjs and will only emit another item from the observable if a defined amount of time has passed In this case, we cannot admit a click event unless one second has passed. Now after that, we have the scan operator. This works by passing in the aggregate amount from a function. In this case, we are using an anonymous arrow function and count that is passed in as an argument represents the aggregate data. In this case we will send our clicks to the scan operator. This in turn takes in the past and count and adds it to the number one but instead of resetting to a new value, scan keeps the aggregate value of what is passed in and the number one we just added. Now this may be a bit confusing but you'll understand a bit better in a moment. Now the zero represents the seed for the scan operator or the starting value of the aggregate number. Let's say I wanted to start the clicks at one or two I could put that here as the C. Then finally we have our subscriber operator. Unlike the first example we saw here we just grab the data returned from the observable and we don't concern ourselves with handling any errors, which is optional. After that we pass in our data which is the result of our scan operator. We then log that result to the console. In order to do this, notice that the string is wrapped in backticks and not quotes. And then we add our button to our HTML page. After that save your files and then click on the button. Now notice that the click is not registered until the second has passed. Now this prevents us from repeatedly clicking the button since we cannot admit another event until a second has passed. Now when the click event is admitted, it is piped to the scan operator. Now, scan will start from whatever value was passed through it from the debounce, unless we have a seed. Now, if we remove the seed and save, Initially there is no value and then one and so on. This is because it is recognizing the mouse event as a string and it is adding the number one as a string. Now if we had one is the C Now when we click the button the first response is to, this is because we are passing the click event, we're just detecting it. The initial value of the scan will be what's passed unless there is a C. since we had one is the C the initial value in count is one which is added to the number one. Of course as you can see on each click the aggregated value was saved in our scan operator. Let's take a look at another example. Now here we are using the map method first against our Click event. Normally the map method takes a function to operate against. But here we are setting the one to emit from the map. This is because we don't need to transform the click event. We just need to count how many times it is clicked. Then, we change the output of the map to the scan. This time we have two arguments to the scan operator. Let's take a look at the documentation for this operator as it can be a bit confusing. Now, the first argument represents the aggregate value of the past in data If we don't have a C, then we know this will be one the passed in value of the mathematic. Instead we have seed of zero. What do you think will be the result if we click on the button? Our seed starts at zero, so where are we getting one from? Well that is because of the second argument one. This second argument to scan represents the next value that would be passed to the scan operator. In this case one. As a result the first call to scan is zero plus one. On the next click, the aggregate of one is added to the number one which gives us two and so forth. Now I know these are simple examples, but if you can look at the documentation you can see the various operators and how they work. There are so many things you can do with RSJX that your best bet is to look at the documentation and experiment with the operators. If you look over the documentation you'll see the numerous options that we have. Let's say we wanted to use an array as an observable. Let's look at another example that demonstrates how you can use RxJS in your projects. This time we will create a div that we will update dynamically, depending on what is typed in a text input. Nothing's special here but we have added an ID which will be used to access the div, then we will add our text input in our button. After that we will add rx to our CDN again and again we are importing rx.all.js. The first thing we will do is grab our button through the getElementById method. Then we chain this to an EventListener that will detect the click event. The click will initiate the getInput method. Then we will store a reference to our Div in a variable. After that we will add our getInput function which is initiated by click on our button. Inside we grab the content of our input box. As you can see getting the values are as simple as chaining in the value property to the element. Here we finally create our observable, this time using the from operator. In this situation we are passing in the contents of our text input which is then turned into an observable. Now, of course we still have to transform the data to use it how we want. That is because now that our text is an observable the data will be returned to us one character at a time. Here, I am turning this observable into an array with the two array operator. Then after that we subscribe to the observable. Inside the function we use the Enter HTML property, to change the message to div displays We do this to the join method which is why we turn the observable into an array This method takes an array and concatenate the contents and the one item in the array whatever we supplies the argument will separate the items. If we supply an empty argument the contents will have no divider. Now, if we save the project and type in the input box Once we click the button the content of the day will change to what we have typed. Again this is been a simple example, but should give you an idea of the ways that you can use the RxJS library in your projects. There is so much you can do with RxJS I could do a full course on it. If you want to learn more about RxJS make sure to check out the documentation. Thanks for watching. This has been Reggie Dawson for Tuts+.

Back to the top