[MUSIC]
Let me now give you a quick overview of Angular and
its relationship with reactive program,
how does Angular make use of reactive programming.
In particular, the RxJS library and how it is leveraged by
Angular to provide a reactive way of writing Angular applications.
Now what we present in this lecture is a very quick overview of
the general concept of reactive programming, observables,
the observed pattern and how it is applied in Angular.
Reactive programming by itself is a very vast
topic that cannot be covered in ten minutes.
Reactive programming,
if I need to cover it in full detail will become an entire course in its own right.
And unfortunately,
we don't have the time to embed an entire course into this particular course.
So given the fact that we are interested mainly in how Angular leverages
reactive programming to enable us to double up Angular applications,
so we will concentrate on that aspect.
But along the way,
I'll give you a quick introduction to the various concepts in this general area.
If you get interested in reactive programming,
I would strongly advise you to pursue some of the links that I have provided and
additional resources for this particular lesson.
You have access to a lot of material out there, but
we'll give you a strong grounding in reactive programming.
But in this course, from this point onwards,
we will look at how Angular leverages the reactive programming paradigm for
designing Angular applications.
We are not just going to restrict only to this lesson, but
all the subsequent lessons will also see Used of the observable and
the observe pattern and how we write reactive applications in angular.
The whole discussion about reactive programming revolves around
this particular software engineering pattern called as observable pattern.
You recall the gang of four that I mentioned to you in one of the earlier
lectures where we discussed about model view controller framework and
the model view model framework.
The same gang of four book contains some of the pattern that
has been quite successfully used in the reactive programming pattern.
The observer pattern revolves around observables.
So you have observables, whose behavior can be observed by observers.
So that's why this is called the observer pattern.
You declare certain objects as observable or subjects and
these observables will be observed by observers.
Now, the observers themselves will register to
watch the changes in the observable and
the observable will notify the observers whenever changes occur.
So in this observer pattern, the way these observers will subscribe
to the observable or register themselves with the observable.
So, that's how the observable knows which observers are interested in
any changes in its state.
So thereby, whenever an observable observe say,
change in its state, it will immediately notify all the observers
about the change of state and the observers subsequently can take
action based upon this notification of the change in the observable.
The observer pattern has been very effectively used in many different
circumstances.
And indeed, the reactive programming paradigm is based around it.
So, the question that comes to your mind immediately is
why do we talk about the observables?
What is the special interest about observables?
Observer pattern is one way of writing Software applications.
So, this is based around Streams.
So, you have data that flows your application.
This data can be viewed as a stream of values that flows through your
application.
So, the stream is the primary channel around which observables and
observable pattern is designed.
So, which streams you can subscribe to these streams.
And whenever a value comes around on the stream, you pick up that value and
then you can react to that value.
So to be able to react to that value, you need to subscribe to that stream or
you need to subscribe to the observable.
The observable will frequently keep emitting values.
And when you see those values, the observer can react to those.
Now this also means that when you are no longer interested,
you can unsubscribe yourself from an observable.
You can say, I'm not interested in watching you anymore and then disappear.
So the observable pattern allows you to periodically observe changes,
if you want and then stop observing when you are no longer interested.
So that kind of a paradigm enables you to design your software
applications in a very interesting way, in a very intuitive way.
But to be able to use this approach,
you need to get your head around this approach.
Just like we saw with the callback pattern or we saw with the use of promises.
Observables is yet another way of designing applications.
So, an observable by itself will be very lazy and it'll just hang around there.
So, you can create an observable and then just leave it there.
The observable becomes active or
it becomes hot when somebody starts to subscribe to the observer.
So at that point, observer kicks into action and starts editing values.
So if at least one observer is entrusted in the observable,
then the observable will start emitting values.
If nobody is entrusted, observable will go back into its shell and remain there.
So, you can think of it that way.
So if that mental picture helps you to understand
how the observer patent works, then so be it.
So, that will help you to look at the way we design our applications
in the exercises that follow and then the subsequent lessons
where we examine HTTP supported Angular in more detail.
One other aspect of observables is the fact that canceling a previous request and
then retrying is very straightforward with observables.
The promise that you saw earlier, once you start waiting for a promise,
you cannot cancel, you're waiting.
The promise will eventually resolve or fail and
then you have to react no matter what even if you're no longer interested.
But with an observable, if you can sell your subscription,
then that what happens with the observable is not any concern to you at all.
And so you don't need to do anything, if you cancel your subscription.
So, canceling and retrying in case the earlier trial doesn't
succeed is very straightforward with observables.
We will see some of these behaviors in more detail in the exercises that follow.
This brings us to that concept of reactive programming.
Reactive programming is based around observer pattern and
also an iterated pattern.
But anyway,
the observer pattern is the dominant feature of a reactive programming.
So in reactive programming, we are interested in data flows.
How data flows through your application.
Any data flow can be treated as a stream.
So this data flow can propagate changes throughout your application.
And while the changes are being propagated through the application,
at intermediary stages you can even take one particular stream,
modify it and create another stream going out from there.
So that is what an observable pattern enables us to drew.
So that entire programming paradigm is built around streams or data flows.
So this is another way of looking at solving your problem.
And that's why I am emphasize the fact that you need to get your head around to
understand how the reactive pattern or how reactive programming is done in practice.
Now, you often hear people talking about something called functional
reactive programming.
If you are familiar with the functional programming paradigm.
But plus reactive programming
is what people often reference to as functional reactive programming.
So the inter-marriage of these two approaches.
Now, you will see the use of some of these with Angular
as you go through this particular course.
Finally, what about RxJS?
What role does it play in this whole ecosystem?
RxJS is a JavaScript implementation of the observable pattern and
also support for reactive programming.
So if you were to do reactive programming in JavaScript,
then you leverage the RxJS library for doing so.
RxJS just one such implementation.
There are a few others but the reason why we are interested in RxJS in particular
in this course is because Angular leverages RxJS for
its support for reactive programming.
So the RxJS is a library.
It is a separate library that is out there.
You can use RxJS for other purposes also, not necessarily related to Angular.
There have been applications that have been developed using RxJS per se
not related to Angular.
But in this course, we are interested in how RxJS comes together with
the Angular to support reactive programming in Angular.
So there RxJS is a library that enables you to do asynchronous programming.
We have talked about asynchronous programming that promises earlier.
We'll see asynchronous programming with callbacks in the node course.
And observables is yet another way of looking at
asynchronous programming, together with event driven programmer.
So if you are familiar with the event driven programming paradigm,
RxJS fits right well within that environment.
The whole thing is built around Observable sequences.
And RxJS library provides you with one core type called as Observable.
And around this core type, you have some satellite
types that are built called as observers, schedulers, and subjects.
All these enable you to do reactive programming.
Furthermore, RxJS also supports a whole bunch of operators.
Supports operators, separators, sorry.
That was a [LAUGH] slip of my tongue.
RxJS supports operators,
operators that are inspired by the JavaScript array operators.
If you're familiar with JavaScript array operators like map then
the RxJS operators will look very familiar to you.
You can treat an observable and
the values that an observable image just like an array, so that's why many of
the array operators find their way into RxJS and reactive programming also.
So the users map, filter, reduce and
other array operators will also find a place in RxJS and reactive programming.
And this is what allows you to handle asynchronous events as collections.
So, when you are wanting to wait for
an asynchronous event, it will be similar to subscribing to an observable.
So when that observable emits the value, you are ready to catch the value and
then act accordingly.
You do know when that emission is going to take place.
So that is the asynchronous part coming into play with the use of RxJS.
And as I mentioned already, the reason why we're interested in RxJS is because
Angular leverages the RxJS library for
doing its support for reactive programming.
Angular itself has a number of built in observables,
as we will see in a short while.
When you get into the reactive programming world, you will often hear people talking
about observables then you will hear people talking about operators and
then you will also hear people talking about marble diagrams.
Now, marble diagrams are a way of representing
the reactive programming using observables.
So if you happen to have an observable,
then if you view this observable as a function of time,
so if this axis represents a function of time, the observable
will be periodically emitting values like this, one after another.
So if you organize these values along a sequence,
as a function of time, so you would see values being emitted like this.
There is also a possibility that you can encounter an error.
In which case, you need to handle the error appropriately.
If you handle the error appropriately,
you may continue or you may stop at that point.
Similarly, when an observable completes all its iterations,
then It'll be marked as the completion of the observable.
So you need to be able to even handle the completion event in an observable.
Given this time annotated behavior of the observable, you can then take
the values that the observable image and apply operators on those observables.
Now these values can be viewed as an array.
If that helps you to better understand, you can view it as an array of values.
Now, these values can then be operated upon by using various operators.
So that is where your map, your filter, your reduce and several operators that
any typical reactive program libraries like RxJS supports.
Enable you to transform
one set of values that you get from an observable into another set of values.
Thereby, you end up creating a new observable.
And this new observable will consist of
transformed values from the original observable.
So that's the reason why I show these transformed values as rectangles here.
Just to give you a visual impression of what it is that we are trying to do with
an operator.
So you're taking a value and then transforming it into a different value.
And that sequence of those different values that
You obtain by transforming the values emitted by an observable.
Will itself become another string of values, and consequently,
will become another observable.
So you can derive one observable from another observable.
But this second observable is dependent upon the first one so it depends.
Its behavior is typed, the first one through the use of this operator.
We will see examples of these as we go through some of the exercises
in this lesson and subsequent lessons.
What about Angular and RxJS, how do they come together?
Angular, as we mentioned earlier, supports a number of observables on its own.
And this support of observables in Angular enables you to do some
reactive programming within your Angular application.
So, for example, forms in Angular,
we saw reactive forms already in one of the earlier lessons.
At that point, I never mentioned the word observable explicitly there.
But now that we know observable, we'll go back to the reactive form, and
then do some transformation to the reactive form.
Forms themselves become observables in Angular.
And any changes in the values of any of the form elements,
can be outputted, and observed by subscribing to
the observable that the Angular framework provides for us.
Similarly, HTTP, which we will encounter in the next module of this course,
will also be based around observables.
So when your service goes and fetches data from a server, the HTTP library,
or the HTTP module in Angular, supports observables.
So whenever you perform any of the methods, get, put, post, or
delete, using HTTP, they will yield you an observable
which you can then subscribe within your service.
And then subsequently transform it, and then give it to your components, and
the components can subscribe to the observables.
The service is provided by transforming the HTTP streams.
And so that is where the reactive programming and
flow of data through your Angular application becomes very straightforward.
Similarly, there is an AsyncPipe, which you will encounter later in this course.
And also change detection built around observables in Angular.
You will see some examples of this in the rest of this course.
Now, getting back to the question that we saw in the previous slide.
How do you take an observable and transform it into another observable?
Here is an example that you will encounter in the exercise that follows this lecture.
So here, we have the route parameter
within our menu component, which uses the route parameter to
supply the value of the selected dish to the dish detail component.
So the route parameter becomes an observable.
Angular's router module has an activity ActivatedRoute service which
supports a bunch of observables and one among them being the params observable.
The params observable is tied to the route parameters.
And so any changes to the parameters,
in the URL that you encounter will be emitted as an observable.
Now, so when you get the observable, so as you can see,
you can get access to this observable by saying this route params in your code.
So the params itself is an observable here.
Now, to this params observable,
you can apply an operator like an operator here called switchmap.
We'll see the use of this in the excercise.
The switchmap operator takes the params observable.
And then transforms the params observable into another observable which is a dish.
It takes the params value, and then extracts the ID value from the params,
which gives you access to the route parameter, the id, or
the parameter that you have specified, and then uses that to go and fetch the dish.
So every time the parameter changes, it will result in a fetching of a new dish.
And so every time the parameter changes,
which is equivalent to emitting a new value by their params observable.
That gets transformed into fetching of the new dish for
which that is the corresponding ID.
So the dish will then become another observable.
Now, when this dish observable becomes available, you can subscribe to this
dish observable here, and obtain the dish value.
And when you obtain the dish value, then you can take the dish value, and then it
create your dish variable within your dish detail component to that dish value.
So thereby, any change to the route parameter propagates through this
switchmap operator into an observable,
which when observed through the subscribed,
will enable you to transform that and assign that to other dish.
And when this happens, your view can get updated with
the new dish that has been obtained from the service.
So now, you see how the data flows through the route parameter,
through the switchmap operator, and
into resulting in the change of the view of your dish detail component.
That's the reason why observable based programming or
reactive programming in Angular becomes very useful for
implementing certain features within your Angular application.
This being one such example.
We will see the use of this particular example in
the exercise that follows this lecture.
I thought I'd make it easy for
you to remember all of this by just singing this Ode to Observables.
[MUSIC]
You should sing this to the tune of,
You Can Call Me Al by Paul Simon of the Simon and Garfunkel fame.
If you're turning around and saying, who's Paul Simon?
Sorry, different generation.
[MUSIC]