1
00:00:00,110 --> 00:00:00,490
Okay.

2
00:00:00,710 --> 00:00:06,170
And up next, let me show you a few cool new features we can use in Node these days.

3
00:00:06,200 --> 00:00:07,670
Now a disclaimer.

4
00:00:07,670 --> 00:00:14,150
We will only use one of those things during this project, since the other ones, at least at this point,

5
00:00:14,150 --> 00:00:17,350
are still in experimental phase.

6
00:00:17,360 --> 00:00:18,380
But who knows?

7
00:00:18,380 --> 00:00:25,340
Maybe by the time you're watching it, it's already stable and you'll find the use cases in your own

8
00:00:25,340 --> 00:00:26,330
applications.

9
00:00:26,420 --> 00:00:30,230
And technically, if you don't want to follow along, you don't have to.

10
00:00:30,230 --> 00:00:32,870
And I'll try to make this somewhat short.

11
00:00:33,050 --> 00:00:37,130
And essentially, there are three things I want to cover these days.

12
00:00:37,130 --> 00:00:37,520
In Node.

13
00:00:37,520 --> 00:00:40,210
We can actually use Fetch API.

14
00:00:40,220 --> 00:00:46,070
And that's one of those funny things where when I was creating a node course in the intro, I specifically

15
00:00:46,100 --> 00:00:51,800
say the difference between browser JavaScript and node JavaScript is the fact that we don't have fetch

16
00:00:51,830 --> 00:00:53,120
API, but.

17
00:00:53,910 --> 00:00:59,610
These days we can actually use right away fetch API in our node application.

18
00:00:59,700 --> 00:01:07,500
Second one is Global Await or you will also hear this name top level await, which will actually use

19
00:01:07,530 --> 00:01:08,760
in the application.

20
00:01:08,760 --> 00:01:13,440
And that's something really cool where we don't have to set up a function just to use Await.

21
00:01:13,440 --> 00:01:20,070
And there's also a watch mode which is a very useful alternative to node mode.

22
00:01:20,100 --> 00:01:26,220
But during this project I will use the Node one simply because while I was developing, once you get

23
00:01:26,220 --> 00:01:31,710
to the point where you need to run both of them together, I noticed that there are some glitches.

24
00:01:31,710 --> 00:01:35,780
If you use the watch mode, which I'm about to show you.

25
00:01:35,790 --> 00:01:37,020
So let's start with fetch.

26
00:01:37,050 --> 00:01:40,560
And in order to save everyone's time, you know what?

27
00:01:40,560 --> 00:01:42,390
I will copy and paste the URL.

28
00:01:42,420 --> 00:01:44,910
Now, of course you can use your own URL.

29
00:01:44,940 --> 00:01:52,590
You don't have to use this one, but I'm going to grab this code, go anywhere in the server.js again,

30
00:01:52,600 --> 00:01:58,420
doesn't really matter where you run this code and what's really cool that right out of the gate we can

31
00:01:58,420 --> 00:02:01,330
use fetch so it's provided to us.

32
00:02:01,330 --> 00:02:02,620
We don't need to import anything.

33
00:02:02,620 --> 00:02:04,750
We don't need to install anything right away.

34
00:02:04,750 --> 00:02:06,610
Just like in a browser.

35
00:02:06,610 --> 00:02:10,720
When we type JavaScript, we go with fetch, we provide the URL.

36
00:02:10,720 --> 00:02:13,480
In this case I'm fetching from my own API.

37
00:02:13,510 --> 00:02:15,850
Then it's a promise.

38
00:02:15,850 --> 00:02:18,640
So effectively we just need to go with Dot.

39
00:02:18,640 --> 00:02:22,840
Then we can of course turn this into Json and all that.

40
00:02:22,840 --> 00:02:25,990
So let's write here RES.

41
00:02:26,440 --> 00:02:33,070
We're going to go with arrays, dot Json, let's invoke it and then let's chain another then and let's

42
00:02:33,070 --> 00:02:34,600
just log what we have.

43
00:02:34,630 --> 00:02:39,100
So data and then we're going to go with log.

44
00:02:39,780 --> 00:02:40,470
And data.

45
00:02:40,470 --> 00:02:47,130
And if everything is correct, once we restart the server, basically Nodemon does that for us.

46
00:02:47,130 --> 00:02:48,240
Check it out.

47
00:02:48,270 --> 00:02:53,940
We have in the console an array, an array of items.

48
00:02:53,940 --> 00:02:56,610
Again, it doesn't really matter what we get back.

49
00:02:56,640 --> 00:03:03,570
It's just super useful that we don't need to do anything extra to start using fetch in our node applications.

50
00:03:03,570 --> 00:03:10,200
And if you're not too familiar with Node, this wasn't the case for a long time, so you needed to do

51
00:03:10,200 --> 00:03:16,650
some acrobatics for quite a while in order to get this basic functionality working.

52
00:03:16,650 --> 00:03:18,210
So that's the first thing, fetch one.

53
00:03:18,210 --> 00:03:22,500
And again, we're not going to use this in this application, but it's super cool.

54
00:03:22,530 --> 00:03:30,210
Then the second one is the top level await where since I have this done, since I have promises over

55
00:03:30,210 --> 00:03:30,750
here.

56
00:03:31,690 --> 00:03:35,110
A cool way to handle them is setting up async await.

57
00:03:35,110 --> 00:03:43,660
And again, for the longest time basically in order to run this code as async await, we need to create

58
00:03:43,660 --> 00:03:45,000
a separate function.

59
00:03:45,010 --> 00:03:49,450
So basically it would be like const get data.

60
00:03:49,540 --> 00:03:53,940
This is going to be equal to our async.

61
00:03:53,950 --> 00:04:01,270
We don't pass anything here and then we go with await Fetch and then await Json and blah blah blah blah

62
00:04:01,270 --> 00:04:01,600
blah.

63
00:04:01,600 --> 00:04:04,360
And then we need to invoke that get data.

64
00:04:05,390 --> 00:04:07,300
However, that's not the case anymore.

65
00:04:07,310 --> 00:04:12,830
So we can right away just start using await whenever there is a need.

66
00:04:12,830 --> 00:04:15,920
And this is something we will do when we connect to the database.

67
00:04:15,920 --> 00:04:17,480
So this is a cool feature.

68
00:04:17,480 --> 00:04:19,250
We'll actually use it in the project.

69
00:04:19,250 --> 00:04:23,900
So first let me just showcase the old way and then we'll restructure it to a new way.

70
00:04:24,020 --> 00:04:26,390
So first we're going to go with some kind of response.

71
00:04:26,390 --> 00:04:28,850
In this case, we're using Await.

72
00:04:29,780 --> 00:04:30,350
Effectively.

73
00:04:30,350 --> 00:04:32,810
We want to cut the first line over here.

74
00:04:32,840 --> 00:04:33,710
Okay, awesome.

75
00:04:33,710 --> 00:04:36,560
And then we want to grab that Json, Correct?

76
00:04:37,150 --> 00:04:38,470
So same deal.

77
00:04:38,770 --> 00:04:43,540
I'm going to call this cart data because this is what I'm getting back from this API.

78
00:04:43,570 --> 00:04:47,320
But again, the naming here is totally irrelevant.

79
00:04:47,350 --> 00:04:52,240
We go here with Json and then we'll just log the cart data.

80
00:04:53,030 --> 00:04:53,570
Khanate.

81
00:04:53,600 --> 00:04:54,440
Okay, awesome.

82
00:04:54,440 --> 00:04:55,370
And then.

83
00:04:56,090 --> 00:04:57,500
In order to.

84
00:04:58,600 --> 00:04:59,870
Run this functionality.

85
00:04:59,890 --> 00:05:02,440
Yes, we do need to invoke get data.

86
00:05:02,470 --> 00:05:04,100
Otherwise it's not going to work.

87
00:05:04,120 --> 00:05:05,710
So again, let's run it.

88
00:05:05,710 --> 00:05:10,920
And if everything is correct, we should see the array in the console.

89
00:05:10,960 --> 00:05:17,170
But these days we can nicely skip all of this and I'll right away set up, try and catch, because this

90
00:05:17,170 --> 00:05:24,040
is how you usually want to handle async await operations because obviously you do want to handle the

91
00:05:24,040 --> 00:05:25,110
errors as well.

92
00:05:25,150 --> 00:05:32,590
And since I don't have to set up a separate function, I can simply take all of this logic out, set

93
00:05:32,590 --> 00:05:37,920
it up in my try catch and just log the error.

94
00:05:37,930 --> 00:05:42,110
And again, if everything is correct, we should see the card data in the console.

95
00:05:42,130 --> 00:05:43,780
Super, super nifty.

96
00:05:43,990 --> 00:05:50,060
We don't have to set up anymore a separate function just so we can implement async await.

97
00:05:50,080 --> 00:05:52,790
And last one is the watch mode.

98
00:05:52,810 --> 00:05:58,400
So we want to go to package Json and I'll stop my server over here.

99
00:05:58,490 --> 00:06:02,570
And remember, we're using Node one to watch the server.

100
00:06:02,570 --> 00:06:07,430
JS But at this point there's actually a built in way how we can watch the file.

101
00:06:07,430 --> 00:06:11,420
So technically we don't even need to install the package.

102
00:06:11,420 --> 00:06:17,460
And that built in way is to add hyphen, hyphen, watch and then whatever is the file name.

103
00:06:17,480 --> 00:06:21,910
Now of course you can type it directly here in the console.

104
00:06:21,920 --> 00:06:27,980
It's not against the law, but since we're setting up a command here in the script, it kind of makes

105
00:06:27,980 --> 00:06:30,680
sense to do it the same way.

106
00:06:30,770 --> 00:06:32,360
And we just need to come up with a name.

107
00:06:32,360 --> 00:06:34,400
In my case, it's going to be watch.

108
00:06:34,580 --> 00:06:36,830
Then we go with Node.

109
00:06:36,950 --> 00:06:39,310
Then like I said, hyphen, hyphen, watch.

110
00:06:39,320 --> 00:06:40,950
And then which file?

111
00:06:40,970 --> 00:06:49,370
So in my case I'm going to go with server JS and then in the console we want to go with NPM run and

112
00:06:49,370 --> 00:06:50,180
watch.

113
00:06:50,390 --> 00:06:52,470
So let's save the package Json.

114
00:06:52,490 --> 00:07:00,410
Let's run this command and essentially if everything is correct, once I remove the fetch functionality.

115
00:07:01,400 --> 00:07:07,880
Node should restart the server for me, and if I take a look at my console, I can clearly see it's

116
00:07:07,880 --> 00:07:08,960
the case again.

117
00:07:08,960 --> 00:07:16,190
While I was building the project, I was using the watch, but the moment I needed to run the frontend

118
00:07:16,190 --> 00:07:23,510
and the server at the same time, there were some clear glitches and therefore I'll stick with a Node

119
00:07:23,510 --> 00:07:23,930
one.

120
00:07:23,960 --> 00:07:30,590
Again, this is just to showcase that you have such option if you want to use it in your own projects.