#68 What is an Observable | Understanding Observables & RxJS | A Complete Angular Course

Summary

This section of the Angular course delves into the concept of observables, essential for handling asynchronous data in JavaScript. It contrasts observables with promises, highlighting their ability to manage data streams, unlike promises which offer a single resolution. The script explains that observables, provided by the RxJS library, use the Observer pattern to emit events that subscribers can react to. The lecture promises a practical demonstration of creating and utilizing observables in Angular applications, emphasizing their non-blocking nature and suitability for tasks like streaming large data sets.

Takeaways

• 📚 Observables are used in Angular to handle asynchronous data, similar to how promises are used in JavaScript.
• 🔁 JavaScript is a single-threaded language, meaning it executes code line by line, and long tasks can block subsequent code execution.
• 🌐 Asynchronous operations, like HTTP requests, can take time and are non-blocking, allowing the main thread to continue executing other code.
• 🚀 Promises can handle asynchronous data but are limited to returning a single value or error, unlike observables.
• 📡 Observables can handle a stream of data, emitting multiple values over time, which is useful for applications like video streaming.
• 🔄 The difference between promises and observables lies in their ability to handle data streaming, with observables being more suited for this purpose.
• 🛑 Promises will always return data or an error, regardless of whether it is used, while observables will only emit data if there is a subscriber.
• 📚 Observables are not a native feature of JavaScript or Angular but are provided by the RxJS library, which uses the Observer pattern.
• 🔄 The Observer pattern involves an observable that emits events and an observer that listens and reacts to these events.
• 🛠 RxJS is a library for working with asynchronous data streams, providing methods to manipulate and work with observables.
• 🔍 The script promises to cover the creation and usage of observables in Angular applications in the next lecture.

Q & A

What is an observable in the context of Angular?

An observable is a mechanism used to handle asynchronous data in Angular. It is a way to represent a stream of data that can be observed and processed over time.

Why do we need observables in JavaScript, considering it already has promises?

While promises are useful for handling asynchronous data, observables offer more flexibility, especially when dealing with streams of data where multiple values are emitted over time, unlike promises which resolve with a single value or error.

How does JavaScript's single-threaded nature affect the execution of asynchronous operations?

JavaScript's single-threaded nature means that long-running tasks can block the execution of subsequent code. Asynchronous operations, like HTTP requests, prevent this blocking by running in the background, allowing the main thread to continue executing other code.

What is the difference between synchronous and asynchronous code in terms of their effect on the main thread?

Synchronous code is blocking; it must complete before the next line of code can execute. Asynchronous code, on the other hand, is non-blocking, allowing other operations to proceed on the main thread while waiting for the asynchronous operation to complete.

Can you explain the concept of streaming data as mentioned in the script?

Streaming data refers to the process of sending large amounts of data in small chunks or packets over time, rather than all at once. This is useful for applications like video streaming, where users can start consuming the content before the entire file has been downloaded.

How does a promise handle a stream of data?

A promise is not designed to handle a stream of data. It resolves or rejects with a single value or error when the asynchronous operation completes, making it unsuitable for scenarios where multiple data chunks are expected.

What is the main advantage of using observables over promises when dealing with streams of data?

Observables can emit multiple values over time, allowing them to handle streams of data effectively. They can emit new data as it arrives, making them ideal for applications that require real-time data updates or processing.

Why does an observable only provide data if there is someone to use it?

Observables are designed to be lazy, meaning they will only emit data when there is an observer (subscriber) listening to it. This helps in optimizing performance and resource usage by avoiding unnecessary data processing.

What is the relationship between observables and the RxJS library?

Observables are not a native feature of JavaScript or Angular; they are provided by the RxJS library, which stands for 'Reactive Extensions for JavaScript'. RxJS offers a suite of tools and methods for working with observables and asynchronous data streams.

Can you briefly describe the Observer pattern as it relates to observables?

The Observer pattern involves an observable (or subject) that emits events and one or more observers (subscribers) that listen for these events. When an event is emitted, the observers can react to it by executing specific logic or functions, such as handling data with the 'next' callback, or responding to errors or completion with their respective callbacks.

What are the types of events that an observable can emit in RxJS?

In RxJS, an observable can emit three types of events: 'next' for emitting data, 'error' for signaling an error condition, and 'completion' to indicate that the observable has finished emitting data.

Outlines

00:00

📚 Introduction to Observables in Angular

This paragraph introduces the concept of observables in Angular and their role in handling asynchronous data. It compares observables with promises, which are JavaScript's built-in way of dealing with asynchronous operations. The explanation clarifies that while JavaScript is single-threaded and synchronous code can block execution, asynchronous operations like HTTP requests can be managed without blocking the main thread. The paragraph sets the stage for a deeper dive into observables, their differences from promises, and their use in streaming data scenarios.

05:02

🔄 Understanding Data Streaming and Observables vs Promises

The second paragraph delves into the concept of data streaming, where large data sets are sent in small chunks to improve efficiency and user experience. It contrasts this with the traditional method of sending all data at once. The main difference between promises and observables is highlighted here: while promises provide a single value or error, observables can handle multiple values or streams of data over time. Observables are particularly useful for applications like video streaming, where data is sent in packets. The paragraph also explains that observables are part of the RxJS library and not a native JavaScript feature, and introduces the observer pattern, which is foundational to how observables work.

10:03

🛠 RxJS Library and Observables in Practice

The final paragraph discusses the RxJS library, which provides a suite of methods for working with observables and asynchronous data streams. It emphasizes that observables are not a native part of JavaScript or Angular but are instead provided by RxJS. The paragraph outlines the observer pattern, where an observable emits events and an observer listens and responds to these events. It also touches on the types of events that an observable can emit: next, error, and completion. The summary mentions that the practical application of these concepts will be covered in upcoming lectures, promising a deeper exploration of how to create and work with observables in Angular applications.

Keywords

💡Observable

Observables are a core concept in the video, representing a way to handle asynchronous data streams in programming. Defined as a mechanism to deal with data that becomes available over time, observables are integral to the theme of asynchronous operations in JavaScript and Angular. In the script, observables are compared with promises and are highlighted as a means to manage streams of data, such as in a video streaming application, where data can be sent in chunks rather than all at once.

💡Asynchronous Data

Asynchronous data refers to data that is not immediately available but will be at some point in the future. It is central to the video's theme as it explains how JavaScript, being a single-threaded language, deals with operations that take time to complete without blocking the main thread. The script uses the example of an HTTP request to illustrate how asynchronous data is handled in Angular using either promises or observables.

💡Promise

A promise in JavaScript is a built-in feature used to handle asynchronous operations. It represents a value that may be available now, later, or never. The video script contrasts promises with observables, noting that while a promise can handle asynchronous data, it is not designed to handle streams of data and will resolve once the first piece of data is received, unlike observables which can emit multiple values over time.

💡Single-threaded Programming Language

The term 'single-threaded programming language' is used in the script to describe JavaScript's execution model, where code is executed line by line in the order it is written. This concept is fundamental to understanding asynchronous operations, as it explains why operations like HTTP requests are handled without blocking the main execution thread, a key point in the video's discussion on asynchronous data handling.

💡HTTP Request

HTTP Request is a method used in the script to exemplify how asynchronous operations work in a single-threaded environment like JavaScript. It is a request made to a server to fetch or send data, and it is used to illustrate the concept of non-blocking code, where the main thread continues to execute subsequent code while waiting for the server's response.

💡Streaming of Data

Streaming of data is a concept where data is sent in small chunks over time rather than all at once. The script uses this concept to differentiate between promises and observables, explaining that while a promise is not suitable for streaming because it resolves with the first piece of data, observables are ideal for such scenarios, allowing for the handling of multiple chunks of data over time.

💡RxJS

RxJS, which stands for Reactive Extensions for JavaScript, is a library that provides observables and other functionalities for handling asynchronous data streams. The script mentions RxJS as the source of observables in Angular, emphasizing that it is not a native feature of JavaScript but rather a powerful tool provided by this external library for managing complex data flows.

💡Observer Pattern

The Observer pattern is a software design pattern that the script introduces as the basis for observables in RxJS. It involves an object, known as the subject or observable, maintaining a list of dependents, called observers or subscribers, and automatically notifying them of any state changes. The script explains this pattern in the context of handling events emitted by observables in Angular applications.

💡Subscriber

A subscriber in the context of the video is an entity that listens to and reacts to events emitted by an observable. It is part of the Observer pattern and is used to handle the data or events as they are emitted. The script explains that subscribers can execute callbacks in response to next, error, or completion events emitted by an observable.

💡Data Stream

A data stream in the video refers to a sequence of data points that are emitted over time. It is a fundamental concept when discussing observables, as observables are used to handle and transform these streams of data. The script uses the term to describe how observables can be used to manage continuous flows of data, such as in streaming applications.

Highlights

Observables are used to handle asynchronous data in Angular.

JavaScript's single-threaded nature and the impact on code execution.

Asynchronous operations prevent blocking of the main thread in JavaScript.

Promises vs Observables in handling asynchronous data in Angular.

Explanation of synchronous code's blocking nature in JavaScript.

The concept of streaming data in applications like video streaming services.

Promises provide a single value or error upon completion of an asynchronous operation.

Observables can handle streams of data, emitting multiple values over time.

Observables are conditional, emitting data only when there is a subscriber.

Promises are a native JavaScript feature, unlike Observables.

RxJS library provides Observables, which are not part of native JavaScript or Angular.

Introduction to the Observer pattern as the basis for Observables.

Observables emit 'next', 'error', and 'completion' events in RxJS.

Subscribers listen to Observable events and handle them with callback functions.

RxJS provides methods to work with and manipulate data streams from Observables.

Upcoming lectures will cover practical creation and usage of Observables with RxJS in Angular.

The importance of understanding Observables for managing asynchronous operations in Angular applications.

Transcripts

[Music]

hello and welcome to another section of

this complete angular course in this

section we will try to understand what

is an observable and where and when do

we use it and let's start this section

by understanding what is an observable

and what do we use it

for in very simple term we can say that

we use observables to handle

asynchronous data

now we can also use promises to handle

asynchronous data promise is a built-in

feature of JavaScript which we can use

to handle asynchronous data so we can

handle asynchronous data in angular

either by using an observable or a

promise so before we proceed further

let's quickly try to understand what is

an asynchronous operation and

asynchronous

data we already know that JavaScript is

a single threaded programming language

that simply means that in JavaScript the

code is executed Ed line by line in the

order in which they are defined and once

the execution of one code is complete

then only the next line of code in the

program will be executed so if a code or

task takes long time in its execution

then the next line of code will have to

wait for its execution it will be

executed only after the previous code

execution is complete for example let's

say we are making an HTTP request to the

server to get some data now the data

will come as a response from the server

this http request and response cycle it

might take some time to complete so if

we making an HTTP request by writing

some synchronous code the next line of

code after HTTP request will be executed

only after we have received the response

from the

server so we can say that synchronous

code is blocking in nature and this is

where asynchronous programming comes

into

picture as we learned JavaScript is a

single threaded programming language and

an asynchronous code does not get exec

executed in the single thread the

synchronous code will be executed in the

single thread which JavaScript provides

but asynchronous code it will not get

executed in that single thread instead

it gets executed in the background and

that's why when we run an asynchronous

code it does not block the main thread

so an asynchronous code is non-blocking

that means when we make an HTTP request

asynchronously it will run in the

background and the next code after HTTP

request will be executed immediately in

the main thread and in this way the HTTP

request will not block the execution of

next line of code so using a synchronous

programming we can perform time

consuming Network requests without

blocking the main thread now an

asynchronous code will return us some

data after some time so we need to wait

for that data and once the data is

available we can utilize it in our code

and to handle that asynchronous data we

use either a promise or an observable so

let's Now understand the difference

between a promise and an observable and

to understand the difference we first

need to understand what is streaming of

data so here let's say we are creating

an angular application and from that

angular application we want to make an

HTTP request to the server now this

server it will get some data either from

the database or from the web API and

this data which we are requesting from

the server it might be a huge data and

we want to send the data back to the

client through HTTP

response now this data can be sent by

the server to the client in two ways the

first way is we get all the data from

the database or web API and send all the

data at once or what we can also do is

we can divide this data into small

chunks and we can send each chunk at a

time to the client for example let's say

we are creating a video streaming app

like Netflix or YouTube now when the

user makes a request from our app to the

server requesting a video file so let's

say from here from our client we have

make a request to the server requesting

a video file and from the server we want

to send that video file to the client

now here let's say the video file size

is of 1GB now 1GB data is very huge and

it might take some time to send all the

data at once to the client so in this

case we are sending 1 GB of file to the

client and this file is very huge so

here the user will have to wait for the

complete file to get downloaded and once

the file is completely downloaded then

only the user can start watching the

video so in this scenario we are sending

all the data at once we are sending one

big file at once to the

client but instead of sending the

complete data at once the server can

send the data in small packets so here

1GB data it can be divided into small

packets and can be sent to the client

one after the other in this way the user

does not have to wait for the complete

file to be downloaded instead he can

start watching the video as soon as the

first packet arrives so here we are

streaming the data in this approach the

data is sent to the client in small

chunks instead of sending the data all

at once in a big

chunk and this is called as streaming of

data here we are streaming a huge file a

big file into small chunks to the

client now that we know what streaming

of data is let's try to understand the

difference between a promise and an

observable a promise promises us some

data over a period of time the data

which promise returns us it can be an

actual data or it can also be an error

so let's say we have made an HTTP

request to the server now a promise will

return us the response data if

everything was okay or it will return us

an error object if something went wrong

for example if there was some Network

issue then the promise will return us an

error object but if there was no error

and we have received the response data

successfully in that case the promise

will return us that response data now

the main difference between a promise

and an observable is that a promise

cannot handle stream of data if we use a

promise for handling stream of data then

the promise will resolve as soon as the

first chunk of data arrives after that

when the next chunk of data arrives it

will not handle that data

so a promise returns us a single value

or a single piece of data but with

observables we can handle stream of data

very easily and we will understand it

with an example in the next

lecture so an observable can return us

multiple values it can return us

multiple

data another reference is that a promise

will certainly return some data even if

there is no code using that data so for

example let's say we have made an HTTP

request to the server to request some

dat data now we going to receive that

data but we are not going to use that

data anywhere in our code so promise

will return us that data even if there

is no one to use that data but in case

of an observable the observable will

only provide the data if there is

someone to use that data if there is no

code using that data in that case the

observable will not send that

data this is another very important

point to remember about observables and

we will learn about it prac Ally in our

coming lectures finally A promise is

native to JavaScript it is provided by

JavaScript language but observable it is

not native feature of angular or

JavaScript it is provided by another

JavaScript library called as

rxjs so we can say that an observable is

a function that converts the ordinary

data stream into an observable one and

you can think of an observable as a

rapper around the ordinary data

Steam now this observable it is provided

by rxjs library and rxjs Library uses

Observer pattern so let's also quickly

understand what is an observer

pattern in an observer pattern first we

have an eventim meter we can also call

it as observable this observable it is

going to emit some event and then we

also have an observer and this Observer

it is going to listen for that event so

whenever an observable image Senter

event The Observer will wait for that

event to happen and once that event

happens The Observer can handle that

event using event

handlers so in an observer pattern we

have an observable you can also call it

as eventer which is going to emit sub

event then we have an observer you can

also call it as event listener or

subscriber which is going to listen for

those events and whenever that event

happens The Observer can handle that

event it can execute some law logic with

the help of event

handler now in rxjs an observable emits

these following events so it can emit a

next event an error event or a

completion event and there will be an

observer which will subscribe to these

events it will subscribe to an

observable and whenever that observable

emits the next event or error event or

completion event the subscriber is going

to listen for that event and whenever

that event happens if the subscriber

wants it can handle that event by

executing some

code and it can handle that event by

passing this next function error

function or completion function as a

call back function to the Subscribe

method now if this does not make any

sense right now don't worry we are going

to understand it practically in our next

lecture but keep in mind that when we

use an observable it is basically going

to use the Observer pattern where an

observable will emit an event whenever

something happens and the Observer or we

can also call it as subscriber it will

listen for that event and when that

event happens the subscriber can handle

that event by executing some

functions now as I mentioned earlier

observable is not native to JavaScript

or angular it is provided by another

JavaScript library called as rxjs so the

rxjs which stands for reactive extension

library for JavaScript it is a

JavaScript library that allows us to

work with asyn inous data streams the

rxjs library it provides us with a lot

of methods which we can use to work with

observables and manipulate the data

which the observable is going to

Emit and we are going to talk about some

of these methods of rxjs library in our

coming

lectures so this is all from this

lecture in the next lecture let's learn

how we can create an observable using

rxjs library and how we can work with an

observable in our angular

application