1
00:00:00,240 --> 00:00:06,000
In this lecture, we are going to talk about one of the most difficult topics in angular, the main

2
00:00:06,000 --> 00:00:12,270
focus of this section, and we'll cover the SJS library stepping away from the master project.

3
00:00:12,450 --> 00:00:19,770
We are going to focus our attention solely on our SJS after gaining a good grasp of our exchanges.

4
00:00:19,950 --> 00:00:21,840
We will come back to our project.

5
00:00:22,410 --> 00:00:27,240
We need to take a detour from our main project because of the upcoming topics.

6
00:00:27,540 --> 00:00:30,510
It's going to require knowledge of our SJS.

7
00:00:30,810 --> 00:00:34,800
There isn't another way around it to begin this discussion.

8
00:00:34,830 --> 00:00:37,290
I want to bring up the word responsibility.

9
00:00:37,590 --> 00:00:39,960
It's a word I've brought up dozens of times.

10
00:00:40,200 --> 00:00:46,470
We constantly need to ask ourselves a series of questions before writing a single line of code.

11
00:00:47,130 --> 00:00:50,220
What type of action is our code need to perform?

12
00:00:50,700 --> 00:00:52,140
What does our code need?

13
00:00:52,590 --> 00:00:53,580
What is our code?

14
00:00:53,580 --> 00:01:00,720
Provide Angular provides a set of features for helping us organize our project by responsibility.

15
00:01:01,110 --> 00:01:05,790
Components can be broken down into classes, templates and style sheets.

16
00:01:06,060 --> 00:01:10,800
It does a good job of keeping the pieces of a component separate from one another.

17
00:01:11,160 --> 00:01:18,780
In addition, we have services, directives and pipes for extending the behavior of a component based

18
00:01:18,780 --> 00:01:20,760
on our answers to these questions.

19
00:01:20,940 --> 00:01:24,210
It'll be easier to decide where to write our code.

20
00:01:24,990 --> 00:01:27,750
Let's talk about asynchronous operations.

21
00:01:27,990 --> 00:01:30,780
JavaScript is an asynchronous language.

22
00:01:31,050 --> 00:01:36,150
Events and API requests are examples of asynchronous operations.

23
00:01:36,660 --> 00:01:41,880
Whenever these operations emit data, we need to send this data to a component.

24
00:01:42,210 --> 00:01:44,760
Data is fed directly to the component.

25
00:01:45,090 --> 00:01:51,450
Angular won't complain, but there is one question we need to ask ourselves before sending data to a

26
00:01:51,450 --> 00:01:58,320
component should components be responsible for handling raw data from asynchronous operations?

27
00:01:58,680 --> 00:02:00,840
I want you to think about this question.

28
00:02:01,170 --> 00:02:03,240
I'll give you a moment to think about it.

29
00:02:05,670 --> 00:02:07,080
The answer is no.

30
00:02:07,380 --> 00:02:10,949
Components shouldn't have to worry about handling raw data.

31
00:02:11,250 --> 00:02:17,190
That doesn't mean components will never have to handle data, but we should avoid this scenario whenever

32
00:02:17,190 --> 00:02:17,910
possible.

33
00:02:18,210 --> 00:02:22,080
Before feeding data to a component, we should process data.

34
00:02:22,740 --> 00:02:29,160
This problem compounds if we need to feed data to multiple components, each component would have to

35
00:02:29,160 --> 00:02:31,440
process raw data independently.

36
00:02:31,770 --> 00:02:32,640
That's not good.

37
00:02:33,030 --> 00:02:39,450
We need a solution for acting as a middleman between the response from an asynchronous operation and

38
00:02:39,450 --> 00:02:40,230
a component.

39
00:02:40,830 --> 00:02:43,460
This is where our SJS comes into play.

40
00:02:43,870 --> 00:02:49,110
Our SJS is a library for filtering, sorting and coordinating data.

41
00:02:49,470 --> 00:02:52,950
It completely focuses on the data for an application.

42
00:02:53,610 --> 00:02:59,610
Instead of implementing a solution for dealing with this sort of task, the angular team recommends

43
00:02:59,610 --> 00:03:00,750
our edges.

44
00:03:01,110 --> 00:03:03,840
It's prevalent within the angular community.

45
00:03:04,170 --> 00:03:07,050
With that being said, it's completely optional.

46
00:03:07,350 --> 00:03:11,580
If our SJS is not to your liking, you can altogether avoid it.

47
00:03:11,820 --> 00:03:15,360
However, I strongly encourage you to give it a try.

48
00:03:16,110 --> 00:03:20,970
This section is going to be dedicated to learning our eggs independently.

49
00:03:21,330 --> 00:03:23,610
There are a lot of concepts to go over.

50
00:03:23,940 --> 00:03:30,000
The best way to learn our eggs is to learn it without a framework or additional libraries.

51
00:03:30,360 --> 00:03:34,260
After we've covered the basics, we will come back to our project.

52
00:03:35,370 --> 00:03:41,370
In the resource section of this lecture, I provide a zip file with a couple of starter files.

53
00:03:41,640 --> 00:03:47,040
Download the zip file, unpack the files and point your editor to the files.

54
00:03:47,340 --> 00:03:49,290
Let's examine the files together.

55
00:03:49,560 --> 00:03:51,900
First, open the package file.

56
00:03:54,480 --> 00:04:02,040
We are going to be installing two dependencies called Parcel, and our SJS parcel is an application

57
00:04:02,040 --> 00:04:02,640
bundler.

58
00:04:02,820 --> 00:04:08,070
One of the most interesting features of parcel is its zero configuration approach.

59
00:04:08,310 --> 00:04:13,920
It works straight out of the box, so we won't need to configure a parcel to get started.

60
00:04:14,550 --> 00:04:21,660
Other features include a development server, file watching and support for the latest JavaScript syntax.

61
00:04:21,959 --> 00:04:24,810
I want to jump straight into our SJS.

62
00:04:25,110 --> 00:04:27,270
Therefore, Passel is perfect.

63
00:04:27,540 --> 00:04:29,640
We can skip configuring a bundler.

64
00:04:29,970 --> 00:04:32,700
Unlike Web Pack, Parcel just works.

65
00:04:33,030 --> 00:04:35,970
I promise we won't be using parcel for very long.

66
00:04:36,240 --> 00:04:43,620
It'll only be used in this section after we've learned our SJS parcel will not be relevant anymore.

67
00:04:44,340 --> 00:04:46,920
The other library is our SJS.

68
00:04:47,190 --> 00:04:52,440
For obvious reasons, we need to install this library if we want to start using it.

69
00:04:52,890 --> 00:04:56,040
Moving along, we have a directory called source.

70
00:04:56,310 --> 00:04:57,900
It holds three files.

71
00:04:58,200 --> 00:05:00,600
None of the files have anything worth mentioning.

72
00:05:00,930 --> 00:05:02,430
Feel free to explore them.

73
00:05:02,640 --> 00:05:03,690
They're very simple.

74
00:05:03,930 --> 00:05:07,800
We will be working inside the script file for most of this section.

75
00:05:08,370 --> 00:05:12,540
Let's install the dependencies for this project and the command line.

76
00:05:12,600 --> 00:05:15,120
Run the npm install command.

77
00:05:21,080 --> 00:05:25,550
Next, we can start parcel by running the 21:00 Start Command.

78
00:05:28,070 --> 00:05:32,180
After running, this command parcel will perform a couple of tasks.

79
00:05:32,390 --> 00:05:34,760
First, it'll bundle our files.

80
00:05:35,060 --> 00:05:37,910
Next, a development server will be launched.

81
00:05:38,270 --> 00:05:41,720
We can view our app in the browser by clicking this link.

82
00:05:44,210 --> 00:05:50,870
We've got an app running in the browser on top of a server par, so we'll watch our files for changes

83
00:05:51,110 --> 00:05:52,370
if a change occurs.

84
00:05:52,520 --> 00:05:55,670
The app will be reloaded with the latest changes.

85
00:05:55,940 --> 00:05:57,590
Everything we need is ready.

86
00:05:57,860 --> 00:06:01,970
In the next lecture, we're going to begin learning our SJS.