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

Promises are executed when they are defined while Observables are executed when an Observer is subscribed to them.

Promises and Observables are executed at the definition time.

Promises and Observables can be canceled.

What is the main difference between a promise and an observable?

What is the main difference between a promise and an observable?

Create a new Observable, and run the promise inside the Observable's callback. Once the promise is finished, call the `next` function with the result from the promise.

    const obs = new Observable(new Promise())

Create a new Observable. Then, create a new promise. Once the promise resolves, call the `next` function to the Observable callback.

How can you wrap a promise into an Observable?

How can you wrap a promise into an Observable?

Return the callback `() => {LOGIC_HERE}`, which will release all allocated resources from the Observable.

Return the callback `() => {complete()}`, which will call the `complete()` method to the Observable.

How can you make sure that when you create a custom Observable, you provide means to easily unsubscribe from that Observable?

How can you make sure that when you create a custom Observable, you provide means to easily unsubscribe from that Observable?

By using `Subject` when creating Observables

By creating a new Observable: `const obs$ = new Observable()` and sharing the reference `obs$` with every publisher/subscriber.

How can you share a data stream between multiple publishers/subscribers?

How can you share a data stream between multiple publishers/subscribers?

Introduction to Reactive Programming

Introduction to Reactive Programming

Check your understanding of reactive programming basics by solving a quiz.

The Need for Reactive Programming

RxJS Subjects

RxJS Operators

Testing Observables

Real-World Projects in RxJS

Conclusion

Quiz: The Basics of Reactive Programming