Mastering RxJs pt-1 (Introduction to RxJs)

If you are an angular developer, chances are you've found yourself scratching your head more than once while trying to understand the concepts of RxJs. In this tutorial series, we will be breaking down RxJs in detail and try to unravel their complexities. So, fasten your seat belt to deep dive into the world of RxJs. Through this series, we aim to equip you with the knowledge and skills to implement RxJs in any angular project.

What is RxJs?

RxJs is a Reactive extension for Javascript. Reactive extensions were originally developed by Microsoft as Rx.Net. Following Microsoft, many programming languages have adopted their own reactive extensions. To name a few; RxJava, RxPy, Rx.rb, RxJs, and So on.

According to Wikipedia; "RxJs is a library for composing asynchronous and event-based programs by using observable sequences."

But what does it mean?

To keep it in simple words RxJs is a library that manages data as it flows through time or a library that handles asynchronous data or events.

Basic anatomy of RxJs

• Collect - Collect data from multiple sources (eg: HTTP call).

• Transform, filter, and process - RxJs provides a set of operators that helps us to pipe data through a set of operations. (tap, map, filter, and so on).

• Combine - Combine different data streams to produce one unified result (eg: merging results from two different HTTP calls)

• Cache - Caching the data so that we do not have to make an HTTP call again.

After analyzing the ins and outs of RxJs, we can say that RxJs is a library for composing Observable streams and optionally processing each item in the stream using an extensive set of operators.

But why RxJs when we have different mechanisms to handle asynchronous data?

Why RxJs instead of...

Callbacks: A callback is a function that can be called back after an async operation is completed. However, it is difficult to manage as we have more nested async operations.

Promises: A promise is an object that may produce a value sometime in the future. However, the reason to skip it is it can handle only a single emission and we cannot cancel Promises.

Async/await: async/await is a special syntax that allows us to write asynchronous code. Similar to promises, it can only handle single emissions and is not cancellable.

Now let's come to the point What are the advantages of using RxJs over these techniques?

• One technique to rule them all - We can handle any type of data through RxJs. for example, we work with multiple data sources like; events from keyboard, mouse, routes, data from arrays, files, and third-party APIs. And RxJs is suitable to work with any type of data.

• Compositional - Our UIs require data from different sources. And we can easily compose data with RxJs using different sets of operators.

• Watchful - RxJs can produce multiple values over time and use a push-based model to notify our code where a specific action occurred making it easier to watch and react to user actions.

• Lazy - RxJs is lazy, Evaluation does not start until we subscribe.

• Handle errors - RxJs have built-in error handling.

• Cancellable - Requests are cancellable. For eg, if a user selects product A and quickly picks product B on an e-commerce site. We can cancel the request for product A and show the results of product B instead of fetching product A first followed by product B.

How are RxJs used in Angular?

Angular uses RxJs internally in different areas;

• Routing

• Reactive forms

• HTTPClient

In conclusion, RxJs, or Reactive Extensions for JavaScript, serves as a powerful tool for managing asynchronous and event-based programs. The basic anatomy of RxJs involves collecting data from multiple sources, transforming and processing it using a set of operators, combining different data streams, and caching data to avoid redundant HTTP calls. Rxjs's adoption enhances the reactivity, composability, and overall performance of Angular applications.