Learn about RxJS to write efficient asynchronous code. Explore subjects, operators, and observables. Gain insights into creating projects like a reactive local database and handling DOM events.

mocha.tar.gz

rxjsCodeWidget

rxjsSPA

mocha

RxJS (Reactive Extensions for JavaScript) is a very powerful library for web development which allows you to easily write asynchronous or call-back code.

In this course, you will explore the latest version of RxJS in detail, focusing on how to apply the reactive paradigm to solve your day-to-day tasks. You will learn all the major components of this library including: subjects, operators, and how to test observables.

In the last section of this course, you will get hands-on with this library to create your own project. Throughout this project, you’ll learn about building a centralized loading indicator, how to handle DOM events, how to build a reactive local database, and more.

By the end of this course, you will have a great new skill to add to your resume, and a cool new project for your portfolio.

Building Reactive Applications with RxJS

In this lesson, we will explore two more complex filtering operators and their differences, namely Debounce and Throttle. These concepts are similar in the way they control **when** and **how many times** a given function will be executed over time, but the control over function execution is different.

<br></br>
## debounceTime

Imagine you are creating a real-time search feature for your website, where the search results would appear and be updated as the user types on the keyboard! Triggering an HTTP request for every `keydown` event would do the trick, right? 

Well, if a fast and furious hacker uses your search feature, tens of characters would be written within one second, leading to tens of *useless* HTTP requests. Yes, they are useless, because the hacker would be only interested in the results "sometime after they stopped typing". 

In every possible scenario where that real-time search would be used, the concept of debouncing would save you a lot of trouble. 

The real-time search use case is given in the following illustration. As the user quickly types in the search field, an HTTP request is only made after one second has passed without anything being typed to the search field. This is actually what the user expects! 

<br></br>
# debounceTime

Imagine you are creating a real-time search feature for your website, where the search results would appear and be updated as the user types on the keyboard! Triggering an HTTP request for every `keydown` event would do the trick, right? 

Well, if a fast and furious hacker uses your search feature, tens of characters would be written within one second, leading to tens of *useless* HTTP requests. Yes, they are useless, because the hacker would be only interested in the results "sometime after they stopped typing". 

In every possible scenario where that real-time search would be used, the concept of debouncing would save you a lot of trouble. 

The real-time search use case is given in the following illustration. As the user quickly types in the search field, an HTTP request is only made after one second has passed without anything being typed to the search field. This is actually what the user expects! 

Learn how debounceTime and throttleTime can help you tackle hard problems with ease.

The Need for Reactive Programming

RxJS Subjects

RxJS Operators

Testing Observables

Real-World Projects in RxJS

Conclusion

Filtering Operators - Part 2

debounceTime