We clarify concepts about observables, why they are important in Angular, what is reactive programming and what is RxJS.
In this article we are going to start a new stage in our knowledge of Angular, dedicating time for a first approach to “observables”, which are one of the main novelties of the framework as of Angular 2. Observables also represent one of the best ways to optimize an application, increasing its performance.
Observables are widely used in Angular, given their usefulness and versatility, although we must admit that it is not an easy task to learn initially. We will try to bring them closer to you in a simple way, so that you can digest them little by little and smooth your learning curve. For now, in this article, our objective is to offer a general introduction, so that you begin to know them, as well as the concept of reactive programming.
The “why” of observables
We have said that observables are one of the main tools for programming applications with higher performance. Obviously that is the reason why they are used in Angular. But where does that performance improvement lie?
One of the reasons why Angular (and especially its predecessor AngularJS) became such a widely used framework is its ability to provide automatic updating of information sources. That is to say, in Angular we are able to use a data store and, when that store is modified, automatically receive its changes, without having to program this transit of information by hand.
Even though a component is in charge of updating that data store, we have seen that, using services, we can get other components to automatically receive the updates. If you don’t remember, see the .
However, while Angular saves us from writing a lot of code, it comes at a cost in terms of performance. Maybe a small app won’t be as affected by the work Angular does underneath, to automatically feed us the changes, but it will be noticeable in medium sized apps. Already the largest applications will noticeably suffer from a greater lack of performance.
Note: To be more specific, Angular underneath does a series of operations iteratively, in which it queries the data source for changes, to know when they are updated, and then takes appropriate action to refresh the data in the places where it is updated. they are being used. This was not the best possible strategy and for this reason, others, who knew how to implement a more accurate behavior pattern, capable of offering better performance, began to gain their space against Angular’s hegemony.
The solution applied in Angular 2 (and maintained by the following versions, 4, 5…) was to use a pattern called “Observable”, which basically saves us from having to make repetitive queries to access the information source, increasing performance of the applications.
reactive programming
We pause here to introduce another concept related to observables, such as “reactive programming”. Although there are entire books to talk about reactive programming, we are going to explain what it is about in great detail.
traditional programming
First let’s establish a base on a knowledge of traditional programming that seems obvious to us, but which is the base on reactive programming, which has to do with the flow of execution of the instructions.
In traditional programming, the instructions are executed one after the other. Therefore, if we carry out a calculation with two variables and obtain a result, even if the variables used to make the calculation change in the future, the calculation has already been carried out and therefore the result will not change.
let a = 1; let b = 3; let result = a + b; // result is 4 // Later in the instructions… a = 7; // We assign another value to the variable a // Even if the value of “a” is changed, the result continues to be 4,
The previous code illustrates the working mode of traditional programming and the main difference with respect to reactive programming. Although it may seem like magic, in reactive programming the result variable would have updated its value when the variables with which the calculation was made were altered.
Reactive programming and data flows
To facilitate the change of behavior between traditional programming and reactive programming, data flows are used intensively in the latter. Reactive programming is programming with asynchronous data streams.
In reactive programming, streams can be created from anything, such as the values that a variable takes over time. Anything can be a stream of data, such as button clicks, changes to a data structure, a query to fetch JSON from the server, an RSS feed, a list of tweets from people you follow, etc.
In reactive programming, these data flows are taken into account, creating systems that are capable of consuming them in different ways, paying attention to what really matters to them about these streams and discarding what does not. For this, various tools are available that allow you to filter the streams, combine them, create some streams from others, etc.
As a final objective, reactive programming deals with launching various types of events on the flows:
- The appearance of something interesting within that flow
- The appearance of an error in the stream
- The end of the stream
As programmers, through code, we can specify what should happen when any of these events occur.
If you want to read more about reactive programming, you can find a much more detailed introduction in the article .
Observables and reactive programming
The observable pattern is nothing more than a way of implementing reactive programming, which basically puts various actors into operation to produce the desired effects, which is to react to the flow of different events produced. Better said, produce these events and consume them in various ways.
The main components of this pattern are:
- Observable: It is what we want to observe, which will be implemented through a collection of events or future values. An observable can be created from user events derived from the use of a form, an HTTP call, a data store, etc. Through the observable we can subscribe to events that allow us to do things when what is being observed changes.
- Observer: It is the actor who is dedicated to observing. It is basically implemented by a collection of callback functions that allow us to listen for events or values emitted by an observable. The callbacks will allow you to specify code to be executed in the event of a data in the flow, an error or the end of the flow.
- Subject: is the event emitter, which is capable of creating the flow of events when the observable undergoes changes. Those events will be the ones that are consumed in the observers.
These are the bases of the pattern. We know that we have put several concepts that will only become clearer when we see them in code. It will be shortly. Although seen from far above, they are concepts that are worth starting to become familiar with.
There are several libraries to implement reactive programming that make use of the observable pattern. One of them is RxJS, which is the one used in Angular.
What is RxJS
Reactive Extensions (Rx) is a library made by Microsoft to implement reactive programming, creating applications that are capable of using the observable pattern to manage asynchronous operations. For its part, RxJS is the Javascript implementation of ReactiveExtensions, one more of the existing adaptations in many other programming languages.
RxJS offers us a very interesting Javascript code base for reactive programming, not only to produce and consume streams, but also to manipulate them. Since it is Javascript, you can use it in any project in this language, both on the client side and on the server side.
The RxJS library itself is the subject of a course or manual, but we have to introduce it here because Angular uses it to implement its observables. That is, instead of reinventing the wheel, Angular relies on RxJS to implement reactive programming, capable of significantly improving the performance of the applications that we make with this framework.
As you will have understood, we can use RxJS in various contexts and one of them is Angular applications. In the next articles we will start to see Angular code for the creation of observables and in some way we will be learning the RxJS library itself.
conclusion
With what we have covered in this article you have an essential knowledge base, necessary to take the step of dealing with observables in Angular.
We haven’t seen any code, but don’t worry, because in the next article we’re going to do a practice on using observables in Angular with which you’ll be able to practice with this working model for communication of changes. The important thing for now is to clarify concepts and establish the necessary knowledge bases so that, when it comes to seeing the code, it is easier for you to understand how observables and reactive programming work.
Facebook Comments
Disqus