1
00:00:00,730 --> 00:00:01,990
In this video.

2
00:00:02,020 --> 00:00:05,939
Let's see how synchronous programming works.

3
00:00:05,950 --> 00:00:13,510
So before we get back to visualize the code, let's have some diagrams to explore more about how synchronous

4
00:00:13,510 --> 00:00:15,160
programming works.

5
00:00:15,250 --> 00:00:20,710
So let's say that we want to go for dinner at a certain restaurant.

6
00:00:20,710 --> 00:00:29,890
So for this particular restaurant, we have only one cook who serves all his or her customers.

7
00:00:30,100 --> 00:00:39,340
So in programming or in JavaScript, we will regard the cook as a threat because a threat manages or

8
00:00:39,340 --> 00:00:40,720
the code execution.

9
00:00:40,960 --> 00:00:48,190
So in context of the restaurant, it is the cook who is going to manage all his or her customers.

10
00:00:48,400 --> 00:00:55,060
So let's say that first customer jumps in to order food after a couple of minutes.

11
00:00:55,100 --> 00:00:59,410
Another one also jump in and jump in and start.

12
00:01:00,190 --> 00:01:02,200
First come, first serve techniques.

13
00:01:02,230 --> 00:01:05,290
That's what I refer to as synchronous programming.

14
00:01:05,940 --> 00:01:14,340
So let's take it that in programming these customers are functions to be called by in context of the

15
00:01:14,340 --> 00:01:22,110
restaurant, they are customers to be served and each of these customers have their time to be saved.

16
00:01:22,110 --> 00:01:29,880
So let's say that, well, these customers, they all have their receipts at your hand before you be

17
00:01:29,880 --> 00:01:36,060
saved unless you handle your receipt to the cook before the cook will serve you.

18
00:01:36,660 --> 00:01:41,850
And let's say that each customer is they have different food to be ordered.

19
00:01:42,360 --> 00:01:50,160
Let's say the first customer wants to order a hamburger and a second customer also want to order pizza

20
00:01:50,160 --> 00:01:53,910
and a third customer also want to order tea.

21
00:01:54,360 --> 00:02:00,750
So looking at this one, which of these food will be hard or take time to cook?

22
00:02:00,750 --> 00:02:09,340
So let's say that the first one who wants to order hamburger, it takes 50 minutes to cook and likewise

23
00:02:10,020 --> 00:02:15,840
it takes 10 minutes to cook and for tea it takes 3 minutes to cook.

24
00:02:15,990 --> 00:02:25,920
So looking at this, you can see that unless the first customer is being saved before the second customer

25
00:02:25,920 --> 00:02:27,120
will be also saved.

26
00:02:27,360 --> 00:02:34,470
By looking at this, the last customer who want to order tea, it takes only 3 minutes to be saved.

27
00:02:35,470 --> 00:02:43,540
But this customer will wait until the first customer and a second customer is being saved before he

28
00:02:43,540 --> 00:02:45,020
or she can be served.

29
00:02:45,040 --> 00:02:48,370
And this is not good or ideal.

30
00:02:48,730 --> 00:02:50,980
So let's see the process involved here.

31
00:02:51,010 --> 00:02:58,240
Well, the first customer handled his receipt to the cook, and I can see that the cook is busy cooking

32
00:02:58,240 --> 00:03:02,020
and going to take, let's say, 15 minutes before it finished cooking.

33
00:03:02,410 --> 00:03:04,300
So why is it cooking?

34
00:03:04,330 --> 00:03:08,530
The other customers are still waiting in the queue.

35
00:03:09,190 --> 00:03:15,700
Right then after 50 minutes, then the customer is being served and he or she is gone.

36
00:03:16,270 --> 00:03:24,250
Then the second customer, who takes 10 minutes to cook, also handed his receipt to the cook to start

37
00:03:24,250 --> 00:03:31,510
preparing his food for him, whilst the 3 minutes guy or customer over here is still waiting in the

38
00:03:31,510 --> 00:03:35,980
queue because for synchronous it is first come, first serve.

39
00:03:36,190 --> 00:03:37,090
So let's see.

40
00:03:37,100 --> 00:03:40,320
So after 10 minutes, now it's gone.

41
00:03:40,330 --> 00:03:42,610
Now it's time for 3 minutes.

42
00:03:43,420 --> 00:03:48,820
Well, so the 3 minutes customer also gives receipt 3 minutes very fast.

43
00:03:48,820 --> 00:03:49,310
It's finished.

44
00:03:49,330 --> 00:03:51,940
Now everybody is happy eating.

45
00:03:52,150 --> 00:03:55,900
So you could see the effect of synchronous programming, right?

46
00:03:55,900 --> 00:04:00,030
The next video, let's have a look at asynchronous programming.

47
00:04:00,040 --> 00:04:06,160
But let's get back to visual, see the code and read code to demonstrate what asynchronous programming

48
00:04:06,160 --> 00:04:07,770
code is all about.

49
00:04:07,780 --> 00:04:08,890
So back to visual.

50
00:04:09,010 --> 00:04:17,380
The code as usual, I have a folder called async asynchronous programming for short and inside I have

51
00:04:17,380 --> 00:04:26,110
two files, my index and my JavaScript file and inside my HTML just connected my JavaScript with each

52
00:04:26,110 --> 00:04:27,460
one as that.

53
00:04:27,730 --> 00:04:31,660
So let's get to the JavaScript file and here we go.

54
00:04:31,690 --> 00:04:32,260
Great.

55
00:04:32,260 --> 00:04:39,580
So now we are going to write a code that blocks other code from running and remember console.log is

56
00:04:39,580 --> 00:04:40,210
a function.

57
00:04:40,210 --> 00:04:42,850
So I'm going to use that one to just demonstrate.

58
00:04:42,880 --> 00:04:46,210
So let's say my first function in console.log.

59
00:04:46,210 --> 00:04:47,920
Let's say by.

60
00:04:48,760 --> 00:04:52,180
Hamburger as we discuss in the diagram.

61
00:04:52,330 --> 00:04:58,360
And then I can copy this one, copy this one and paste it three times.

62
00:04:58,930 --> 00:05:01,520
The first one was buying pizza.

63
00:05:04,570 --> 00:05:06,750
And a third one was by tee.

64
00:05:06,980 --> 00:05:07,970
Is that okay?

65
00:05:07,990 --> 00:05:12,760
So if I save this one, it uses what is called first come first technique.

66
00:05:12,760 --> 00:05:13,900
So have a look.

67
00:05:14,230 --> 00:05:18,820
You can see that I now have the order first come first save technique.

68
00:05:19,120 --> 00:05:24,760
So we see that the hamburger was first followed by the pizza and then followed by the T.

69
00:05:24,760 --> 00:05:25,930
That is the flow.

70
00:05:26,080 --> 00:05:31,840
Now let's write some code to delay the execution of one of these functions.

71
00:05:31,840 --> 00:05:41,200
So let's say that before my t get executed I want to select this and I let is a window object or method

72
00:05:41,200 --> 00:05:42,550
that is accessible.

73
00:05:42,550 --> 00:05:50,710
So for the alert it displaces a dialog inside the browser until it is a click, whether okay or cancel

74
00:05:50,740 --> 00:05:54,250
before it can proceed to the other function to be called.

75
00:05:54,250 --> 00:05:56,050
So for this one, let's say.

76
00:05:56,060 --> 00:05:57,040
Work on.

77
00:05:58,990 --> 00:06:00,070
Wait for me.

78
00:06:02,940 --> 00:06:03,270
Like that.

79
00:06:03,270 --> 00:06:13,110
When I say it now, we say that we have a dialogue like that until I click on, okay, my code down

80
00:06:13,110 --> 00:06:14,970
here is not going to run.

81
00:06:14,970 --> 00:06:17,070
We see that the first one runs.

82
00:06:17,490 --> 00:06:24,180
The first one runs as that and the second one runs at that and the third one also runs as that.

83
00:06:24,360 --> 00:06:27,990
But the third one or the fourth one is don't run.

84
00:06:27,990 --> 00:06:30,810
It could say that it is loading over here.

85
00:06:30,840 --> 00:06:35,580
It's taking time for it to finish executing until I click.

86
00:06:35,580 --> 00:06:41,190
Okay, then my spinning will be off, meaning that function has finished executing.

87
00:06:41,430 --> 00:06:44,220
Then it can move to the fourth code.

88
00:06:44,220 --> 00:06:48,420
So now let's click on the okay and see.

89
00:06:48,420 --> 00:06:53,870
Now we see that now we have what our byte being displayed.

90
00:06:53,880 --> 00:06:56,550
That's what you call blocking code.

91
00:06:56,730 --> 00:06:59,970
Now you know what is synchronous code in this video.

92
00:07:00,000 --> 00:07:03,960
Let's start with asynchronous programming or code for short.