1
00:00:00,210 --> 00:00:07,290
In this video you're going to create your very first asynchronous non blocking no J.S. application and

2
00:00:07,290 --> 00:00:13,380
by non blocking I just mean that your application is going to continue to be able to do other things

3
00:00:13,520 --> 00:00:17,130
while it's waiting for some long running Io process to complete.

4
00:00:17,370 --> 00:00:22,350
And that's one of the things that makes no J.S. so great fast and efficient.

5
00:00:22,350 --> 00:00:27,340
So in this video we're going to explore asynchronous programming with a basic example.

6
00:00:27,360 --> 00:00:32,910
Then we'll take what we learn here about asynchronous programming and use it to build out our weather

7
00:00:32,910 --> 00:00:36,270
application to actually get that app built.

8
00:00:36,270 --> 00:00:42,060
We're gonna need to interact with real time weather API is and that is going to require us to make a

9
00:00:42,060 --> 00:00:44,810
synchronous H TTP requests.

10
00:00:44,820 --> 00:00:48,730
All right let's go ahead and get started with a basic example to start.

11
00:00:48,780 --> 00:00:52,260
Let's go ahead and close all open editors and then down below.

12
00:00:52,260 --> 00:00:58,200
I'm also going to collapse that Notes app directory and we're going to create a new folder for our new

13
00:00:58,200 --> 00:01:02,550
project right here inside of the node course folder.

14
00:01:02,550 --> 00:01:08,330
I'm going to create a new one and I'll call this whether hyphen app and this is the directory we're

15
00:01:08,330 --> 00:01:13,740
going to end up working out of throughout the next several sections to kick things off.

16
00:01:13,740 --> 00:01:19,650
We're going to create a single file inside of here and obviously we will expand on that as we build

17
00:01:19,710 --> 00:01:26,520
out the application but for the moment a single script called app dot J S is gonna give us all we need

18
00:01:26,520 --> 00:01:30,600
to explore the basics of asynchronous programming for the moment.

19
00:01:30,600 --> 00:01:34,280
We don't even need to initialize NPM as in this video.

20
00:01:34,290 --> 00:01:37,500
We're not going to need any NPM modules.

21
00:01:37,500 --> 00:01:41,490
Let's get started with a few well-placed console dialog calls.

22
00:01:41,520 --> 00:01:45,240
I'm going to add one at the top of our script before all of the code.

23
00:01:45,240 --> 00:01:50,310
We're going to write and this will just say starting and then we're gonna add a second one.

24
00:01:50,340 --> 00:01:56,470
After all of the code we're going to write and console dot lug this one can say something like Stop

25
00:01:56,490 --> 00:02:00,590
it everything else we're going to write is gonna go right in between now.

26
00:02:00,600 --> 00:02:05,950
Currently we have a completely synchronous program in a synchronous programming model.

27
00:02:05,970 --> 00:02:12,560
One line runs after the next regardless of how long each line takes to execute.

28
00:02:12,570 --> 00:02:17,550
Now in this case we have a very simple program where starting is going to run first and stopping would

29
00:02:17,550 --> 00:02:20,400
run after no shock there.

30
00:02:20,400 --> 00:02:26,130
Now let's go ahead and actually explore how we could add a bit of asynchronous programming into this

31
00:02:26,130 --> 00:02:32,550
script and to do that we're going to use one of the most basic asynchronous functions that node provides

32
00:02:32,760 --> 00:02:40,830
and that is set time out set time out allows us to run some code after a specific amount of time has

33
00:02:40,830 --> 00:02:43,590
passed and set time out is indeed a function.

34
00:02:43,620 --> 00:02:49,540
So let's call it as such and it takes in to arguments in both are required.

35
00:02:49,560 --> 00:02:51,100
The first is a function.

36
00:02:51,300 --> 00:02:56,760
So let's go ahead and for the moment just set up an arrow function right here like this.

37
00:02:56,760 --> 00:02:58,770
And the second is a number.

38
00:02:58,800 --> 00:03:04,460
It's the number of milliseconds you want to wait before the callback gets executed.

39
00:03:04,470 --> 00:03:10,200
So in our case let's go ahead and use two thousand milliseconds which would equal to two seconds.

40
00:03:10,200 --> 00:03:16,350
So what we're really saying is hey here's a function can you run this function after two seconds have

41
00:03:16,350 --> 00:03:17,070
passed.

42
00:03:17,070 --> 00:03:19,670
Now let's add something inside of this function.

43
00:03:19,680 --> 00:03:25,310
The one we passed to set time out so we can actually see that it gets called when it's supposed to.

44
00:03:25,350 --> 00:03:31,020
And for the moment as you might have expected we're just going to use console dot log to print a message

45
00:03:31,170 --> 00:03:33,390
right here two second timer.

46
00:03:33,540 --> 00:03:39,120
And by having all of these logs in place we're going to be able to see how our program executes by running

47
00:03:39,120 --> 00:03:40,770
the script down below.

48
00:03:40,770 --> 00:03:45,360
Now in a synchronous programming model one thing happens after the next.

49
00:03:45,360 --> 00:03:47,660
So we would have the starting message print.

50
00:03:47,730 --> 00:03:52,670
Then we would wait two seconds and we would see our two second timer message print.

51
00:03:52,710 --> 00:03:58,980
And finally we would see the stopping message print with asynchronous no J.S. that is not the order

52
00:03:59,010 --> 00:04:01,650
we're gonna get down below in the terminal.

53
00:04:01,650 --> 00:04:05,270
I'm gonna use C D to change directories into the weather app.

54
00:04:05,280 --> 00:04:07,230
Go ahead and do the same.

55
00:04:07,260 --> 00:04:13,870
And once we're here we're just going to run app and J.S. through node so node space app dot J.

56
00:04:13,890 --> 00:04:19,270
S Now we'll run it a couple of times because things are gonna happen pretty quick here so I'm gonna

57
00:04:19,290 --> 00:04:25,500
run it and what happens we see starting prints then stopping prints then the program just kind of hangs

58
00:04:25,500 --> 00:04:29,200
for two seconds followed by the two second timer printing.

59
00:04:29,340 --> 00:04:32,150
Let's go ahead and do that one more time right here.

60
00:04:32,160 --> 00:04:37,170
You'll notice we're not getting brought back to the command prompt until those two seconds pass.

61
00:04:37,170 --> 00:04:42,090
So now our node application does indeed take over two seconds to run.

62
00:04:42,090 --> 00:04:45,810
Then we're brought back to the command prompt where we could do something else.

63
00:04:45,810 --> 00:04:50,080
So that node process is going to require just over two seconds.

64
00:04:50,190 --> 00:04:55,530
And now you'll notice the order that we're getting those messages in we have starting printing first

65
00:04:55,530 --> 00:04:57,370
which still makes a lot of sense.

66
00:04:57,460 --> 00:05:02,850
Then we have stopping and finally we have the two second timer printing.

67
00:05:02,850 --> 00:05:08,550
So in these synchronous model we needed to wait those two seconds before the program would continue

68
00:05:08,800 --> 00:05:15,000
in an asynchronous non blocking model node can continue to do other things like run everything down

69
00:05:15,000 --> 00:05:15,660
below.

70
00:05:15,840 --> 00:05:18,630
While it's waiting for those two seconds to pass.

71
00:05:18,630 --> 00:05:24,210
Now in this case we're using something simple like set time out to illustrate the basics of asynchronous

72
00:05:24,210 --> 00:05:24,900
programming.

73
00:05:25,110 --> 00:05:30,450
But imagine this was a database request if we were fetching data for one user.

74
00:05:30,450 --> 00:05:34,080
It would be nice to be able to do other things in our program.

75
00:05:34,170 --> 00:05:39,210
While we're waiting the couple hundred milliseconds it takes to get that information back.

76
00:05:39,210 --> 00:05:42,100
Otherwise node would be terrible at its job.

77
00:05:42,180 --> 00:05:47,780
Instead with the non blocking model we're able to do a lot of things at the same time.

78
00:05:47,820 --> 00:05:53,490
I can wait for 60 database requests to come back while still issuing more.

79
00:05:53,490 --> 00:05:59,160
Now let's take things one step further by adding a second set time out call into the mix and generating

80
00:05:59,160 --> 00:06:02,750
some strange and potentially unexpected results.

81
00:06:02,750 --> 00:06:08,790
All right here I am going to add a second set time out call passing in these same two arguments.

82
00:06:08,790 --> 00:06:15,360
The first is our function to run after a specific amount of time has passed and the second argument

83
00:06:15,360 --> 00:06:18,360
is the amount of time to wait in milliseconds.

84
00:06:18,360 --> 00:06:24,000
And in this case we're going to wait 0 milliseconds saying we want to run the function right away.

85
00:06:24,000 --> 00:06:29,460
Now inside of here once again we're just going to print a message so we can see the order in which things

86
00:06:29,460 --> 00:06:30,200
happen.

87
00:06:30,240 --> 00:06:36,500
So console log and I will print zero second timer to the console.

88
00:06:36,570 --> 00:06:38,160
I'm going to save about J.

89
00:06:38,160 --> 00:06:38,680
S..

90
00:06:38,760 --> 00:06:45,440
And down below I will use clear to clear the terminal output before rerunning the app dot J s script.

91
00:06:45,510 --> 00:06:50,400
From here I can cycle through my previous commands to rerun the program and let's go ahead and look

92
00:06:50,400 --> 00:06:52,350
at the order in which things happen.

93
00:06:52,440 --> 00:06:59,640
Right here we see starting then stopping then zero second timer followed by two second timer.

94
00:06:59,640 --> 00:07:06,660
Now I definitely expected the two second timer to print after two seconds but why is zero second timer

95
00:07:06,810 --> 00:07:08,670
coming after stopping.

96
00:07:08,670 --> 00:07:15,030
If I'm not waiting any time at all it would seem that I would get this message before I would get the

97
00:07:15,030 --> 00:07:16,500
message down below.

98
00:07:16,500 --> 00:07:18,600
But clearly that's not the case.

99
00:07:18,750 --> 00:07:24,570
Now to explore why we're going to take a look at the internals of node j ask that are responsible for

100
00:07:24,570 --> 00:07:30,180
actually getting asynchronous programming to work and we're going to do that in the next video with

101
00:07:30,180 --> 00:07:31,470
a little visualization.

102
00:07:31,470 --> 00:07:38,400
I put together that goes over a few examples like this one showing you exactly how they run behind the

103
00:07:38,400 --> 00:07:39,330
scenes.

104
00:07:39,330 --> 00:07:45,480
That's gonna give us a better mental model for working with asynchronous programming and then any video.

105
00:07:45,480 --> 00:07:52,710
After that we'll start the process of making HDTV requests so we can fetch real time weather data.

106
00:07:53,100 --> 00:07:58,020
I'm excited to talk about why things are working the way they're working in the next one so let's go

107
00:07:58,020 --> 00:07:59,930
ahead and jump right in.