1
00:00:00,150 --> 00:00:07,080
In this lecture, we are going to talk about the most fundamental concept in our SJS called an observable

2
00:00:07,410 --> 00:00:12,150
understanding observables is crucial to moving forward with our SJS.

3
00:00:12,390 --> 00:00:14,370
So what are observables?

4
00:00:14,820 --> 00:00:18,660
You can think of an observable as a wrapper around a data source.

5
00:00:19,020 --> 00:00:21,810
Data can come from an asynchronous operation.

6
00:00:22,170 --> 00:00:30,510
Mouse events, keyboard events, file uploads and CTP requests are examples of data sources other than

7
00:00:30,510 --> 00:00:31,770
being asynchronous.

8
00:00:32,009 --> 00:00:38,730
It's not definitive as to when data is emitted from these sources, when data is emitted from these

9
00:00:38,730 --> 00:00:39,450
sources.

10
00:00:39,600 --> 00:00:42,270
We can capture the data before handing it off.

11
00:00:42,270 --> 00:00:50,100
Wherever it's needed and observable gives us the opportunity to filter sorts and coordinate data.

12
00:00:50,490 --> 00:00:53,250
It addresses the problem we discussed earlier.

13
00:00:53,520 --> 00:00:57,240
By wrapping a data source, we can further refine the data.

14
00:00:57,600 --> 00:01:03,990
We call them observables because we can observe the data emitted from a source who would have thought

15
00:01:03,990 --> 00:01:04,410
right.

16
00:01:05,010 --> 00:01:09,990
We can observe observables with objects we call them observers.

17
00:01:10,350 --> 00:01:16,410
Observers are responsible for receiving data after an observable has emitted the data.

18
00:01:17,040 --> 00:01:22,110
An observer establishing a connection with an observable is called a subscription.

19
00:01:22,680 --> 00:01:29,460
One of the most interesting features about our SJS is being able to have multiple observers subscribe

20
00:01:29,460 --> 00:01:33,090
to an observable by allowing multiple subscriptions.

21
00:01:33,300 --> 00:01:37,380
Different locations in our app can be fed the same stream of data.

22
00:01:38,040 --> 00:01:44,850
If we format data from within an observable, every observer will be given the same formatted data.

23
00:01:45,330 --> 00:01:49,500
Observers never have to worry about how the data has been formatted.

24
00:01:49,950 --> 00:01:53,760
This relationship allows us to separate responsibilities.

25
00:01:54,120 --> 00:01:59,550
Observables don't care what the observers do with the data after it has been pushed.

26
00:02:00,820 --> 00:02:02,770
Let's give observables a try.

27
00:02:03,130 --> 00:02:09,550
We will be working on these script file with the server turned on unless I state otherwise, the server

28
00:02:09,550 --> 00:02:12,670
should always be running at the top of the file.

29
00:02:12,700 --> 00:02:18,100
We will import a class called observable from the R js package.

30
00:02:18,700 --> 00:02:23,080
The observable class will help us with creating a new observable.

31
00:02:23,470 --> 00:02:27,190
Below we will create a variable called observable.

32
00:02:27,790 --> 00:02:35,650
Its value will be a new instance of the observable class without adding anything else we created in

33
00:02:35,650 --> 00:02:36,430
observable.

34
00:02:36,730 --> 00:02:44,800
In its simplest form, an observable is a new instance of the observable class after creating the observable.

35
00:02:44,950 --> 00:02:47,180
We need to store a reference to it.

36
00:02:47,530 --> 00:02:50,500
The instance will have a function called Subscribe.

37
00:02:50,890 --> 00:02:51,760
Let's call it.

38
00:02:54,270 --> 00:03:01,200
The subscribed function will allow us to pass an observer, as I mentioned before, observers are objects.

39
00:03:01,380 --> 00:03:03,030
Let's pass in an object.

40
00:03:05,590 --> 00:03:09,790
Inside this object, we must define a function called next.

41
00:03:12,330 --> 00:03:17,520
The next function is responsible for handling data pushed from the observable.

42
00:03:17,910 --> 00:03:21,180
This function will have one argument called value.

43
00:03:21,570 --> 00:03:27,450
The value argument refers to the data emitted by the observable inside the function.

44
00:03:27,450 --> 00:03:29,730
We will log the value argument.

45
00:03:32,300 --> 00:03:36,140
There's one last step we need to perform at the moment.

46
00:03:36,350 --> 00:03:38,810
Our observable doesn't emit data.

47
00:03:39,230 --> 00:03:43,100
Observers will not receive data regardless of a subscription.

48
00:03:43,400 --> 00:03:50,270
We should update our observable to push data to our observers in the new instance of the observable

49
00:03:50,270 --> 00:03:50,810
class.

50
00:03:50,930 --> 00:03:52,550
We can pass in a function.

51
00:03:55,130 --> 00:03:58,340
This sanction is where we can emit data to observers.

52
00:03:58,550 --> 00:04:03,680
The question is how the function will have an argument called subscriber.

53
00:04:06,210 --> 00:04:10,560
The subscriber argument is an object for interacting with observers.

54
00:04:10,770 --> 00:04:16,380
We can emit data, throw errors or tell observers we're finished emitting data.

55
00:04:16,800 --> 00:04:21,230
For this example, we will emit some data inside the function.

56
00:04:21,240 --> 00:04:24,900
We will run the subscriber dot next function.

57
00:04:27,530 --> 00:04:31,200
We can pass in a value to emit into the next function.

58
00:04:31,550 --> 00:04:33,800
We will pass on a simple message.

59
00:04:36,240 --> 00:04:42,810
After making those changes, let's check out the console in the developer tools, we will find the message

60
00:04:42,810 --> 00:04:44,340
logged in the console.

61
00:04:44,700 --> 00:04:51,630
We've created our first observable and observer observables are responsible for managing data.

62
00:04:52,380 --> 00:04:54,450
There's one last thing I want to mention.

63
00:04:54,660 --> 00:04:56,430
You may have noticed it already.

64
00:04:56,850 --> 00:05:01,500
The relationship between observables and observers is push based.

65
00:05:01,830 --> 00:05:06,690
Observers don't have control over when data is emitted by an observable.

66
00:05:07,110 --> 00:05:09,570
It's up to an observable to push data.

67
00:05:09,840 --> 00:05:16,410
If we don't call the next function, the observer function will never run in the next lecture.

68
00:05:16,470 --> 00:05:20,790
We are going to dive deeply into how we can create observers.