1
00:00:01,380 --> 00:00:06,660
At present, we've got this really nasty text area right here to allow a user to type in some amount

2
00:00:06,660 --> 00:00:12,030
of code to eventually be executed, our next major kind of push or feature inside of our project is

3
00:00:12,030 --> 00:00:15,360
going to be to replace this text area with a real code editor.

4
00:00:15,760 --> 00:00:19,770
So I want to get something inside there that has some line numbers and lynching and maybe even something

5
00:00:19,770 --> 00:00:23,160
like code formatting as well before we kick off.

6
00:00:23,160 --> 00:00:28,140
Adding in the code editor itself, I want to very quickly make a small change to our project and just

7
00:00:28,140 --> 00:00:29,930
give you a very quick demonstration.

8
00:00:30,390 --> 00:00:33,720
The demonstration I'm going to give you is going to seem completely irrelevant.

9
00:00:33,720 --> 00:00:38,370
But trust me, as soon as we start putting together our code editor, you're going to realize that we

10
00:00:38,370 --> 00:00:42,620
are putting together this code editor in a very particular way for a very good reason.

11
00:00:42,630 --> 00:00:44,050
So just trust me for a little bit.

12
00:00:44,700 --> 00:00:48,960
So here's the small change I want to make, rather than having a submit button right here that a user

13
00:00:48,960 --> 00:00:54,240
is going to click on to bundle their code, I instead want to attempt to bundle the user's code and

14
00:00:54,240 --> 00:00:57,180
execute it with every single key press.

15
00:00:57,930 --> 00:01:03,720
So as soon as the user presses on the keyboard, bundle, bundle, bundle and take those bundles, execute

16
00:01:03,720 --> 00:01:05,489
them immediately inside that iframe.

17
00:01:06,030 --> 00:01:08,270
As you can guess, this is a really bad idea.

18
00:01:08,280 --> 00:01:09,570
We definitely don't want to do this.

19
00:01:09,870 --> 00:01:12,960
Bundling code is pretty computationally intensive.

20
00:01:13,260 --> 00:01:18,060
So we're going to be spending a lot of performance cycles just bundling the user's code, even though

21
00:01:18,060 --> 00:01:20,910
they might add in another key press in like half a second.

22
00:01:21,480 --> 00:01:25,560
Nonetheless, let's do this because like I said, it's going to help you understand why we are writing

23
00:01:25,560 --> 00:01:27,570
out our code editor in a very particular way.

24
00:01:28,350 --> 00:01:28,760
All right.

25
00:01:29,010 --> 00:01:29,880
So to get started.

26
00:01:31,220 --> 00:01:35,310
I'm going to go back over to my index file, I'm going to find that return statement down at the bottom.

27
00:01:35,960 --> 00:01:39,130
The changes we're about to make, we're going to undo at the end of this video.

28
00:01:39,140 --> 00:01:41,120
So if you want to make these changes, totally fine.

29
00:01:41,360 --> 00:01:44,660
Otherwise, just stick around and watch what happens if we try to do this.

30
00:01:44,660 --> 00:01:46,040
Eger bundling, so to speak.

31
00:01:46,430 --> 00:01:49,910
I'm going to first begin by finding our button right there in a comment that out.

32
00:01:50,720 --> 00:01:53,090
I'm then going to find our on change function.

33
00:01:54,030 --> 00:01:59,040
I'm going to wrap that with another set of curly braces so we get a function body inside there and then

34
00:01:59,040 --> 00:02:01,680
either before or after doesn't really make a difference.

35
00:02:01,830 --> 00:02:06,060
That set input I'm going to manually call unclick.

36
00:02:06,360 --> 00:02:10,860
Remember, that is the function that currently is doing our bundling and I'm going to provide to it

37
00:02:10,860 --> 00:02:13,260
e not target value as well.

38
00:02:13,730 --> 00:02:18,690
We're essentially just taking the whatever user just typed inside that text area and providing it directly

39
00:02:18,690 --> 00:02:19,470
to unclick.

40
00:02:20,580 --> 00:02:25,320
We get an air from that right away, that's just because UNCLICK is not expecting an argument, so I'm

41
00:02:25,320 --> 00:02:26,730
going to go up to unclick.

42
00:02:28,230 --> 00:02:29,290
Here it is right here.

43
00:02:30,030 --> 00:02:36,630
I'm going to add in that argument, I'll call it input annotator as type string and then remember,

44
00:02:36,630 --> 00:02:41,280
we are already using a variable with the same name inside a fetch plug in right here.

45
00:02:43,640 --> 00:02:49,220
So this code, as it stands by Save It and run it again, we're going to do a bundling and execution

46
00:02:49,220 --> 00:02:50,510
with every single key press.

47
00:02:50,760 --> 00:02:54,230
So let's try this out and save everything for the back of the browser.

48
00:02:57,450 --> 00:03:02,820
Now, Chrom, internally in this developer panel right here, has some tools that we can use to monitor

49
00:03:02,820 --> 00:03:07,140
the performance of our application and this case, I don't quite care so much about the performance.

50
00:03:07,320 --> 00:03:12,570
I'm on a very modern laptop right now, and so I can really type into this input just about as quickly

51
00:03:12,570 --> 00:03:13,530
as I possibly can.

52
00:03:13,650 --> 00:03:16,390
And I'm not going to see a really big performance penalty.

53
00:03:16,830 --> 00:03:22,460
However, what is really evident is the amount of processing power that's going to be used as I start

54
00:03:22,530 --> 00:03:25,950
typing inside their data rather than using the built in profiler tools.

55
00:03:26,100 --> 00:03:32,370
I'm going to instead go up to be top level menu up here inside of Chrome, go to more tools and go to

56
00:03:32,430 --> 00:03:33,540
task manager.

57
00:03:34,380 --> 00:03:36,250
That's going to open up the task manager right here.

58
00:03:36,750 --> 00:03:39,540
I can see the tab running my application right there.

59
00:03:40,170 --> 00:03:44,060
I'm going to watch the amount of CPU power that is used as I start typing.

60
00:03:44,070 --> 00:03:46,620
And as you can guess, yeah, it's going to be pretty intense.

61
00:03:47,730 --> 00:03:55,530
OK, so I'm going to start typing inside and as I do, watch how much CPU is being used for doing this

62
00:03:55,530 --> 00:03:56,880
very, very fast bundling.

63
00:03:56,890 --> 00:03:58,710
So import react.

64
00:04:00,280 --> 00:04:02,830
From react, maybe I'll import react, Dom.

65
00:04:03,910 --> 00:04:10,840
From React Dom and a console log, maybe react, you can notice that as I'm typing out my code here,

66
00:04:11,020 --> 00:04:15,100
my CPU usage is absolutely extraordinarily high.

67
00:04:15,730 --> 00:04:17,230
Maybe then how do I react, Dom?

68
00:04:17,440 --> 00:04:18,040
Render.

69
00:04:19,850 --> 00:04:21,620
And I'll put it there, maybe an H1.

70
00:04:23,250 --> 00:04:24,150
They hide their.

71
00:04:26,840 --> 00:04:32,570
I think you kind of get the idea at this point, so with every single key press, we are spending a

72
00:04:32,570 --> 00:04:34,100
tremendous amount of battery power.

73
00:04:34,320 --> 00:04:35,730
We bundle that code and execute it.

74
00:04:36,020 --> 00:04:40,160
The result is kind of neat because we can see everything update live on the screen.

75
00:04:40,400 --> 00:04:45,420
For example, if I start updating the text inside that one, I can see the additional key presses appear

76
00:04:45,470 --> 00:04:45,880
right away.

77
00:04:46,130 --> 00:04:47,930
Definitely need to get that instant feedback.

78
00:04:48,260 --> 00:04:53,090
However, if a user is running our application on some mobile device like, say, a laptop, and they're

79
00:04:53,090 --> 00:04:58,520
relying upon battery power, as soon as a user starts typing inside of here, we're going to start chomping

80
00:04:58,520 --> 00:05:04,970
through their battery really, really, really fast just because we are bundling our code way too frequently.

81
00:05:05,820 --> 00:05:10,080
So, again, all this stuff is probably pretty obvious, but I want to make sure is super clear why

82
00:05:10,080 --> 00:05:14,910
we probably want to throttle how often we are attempting to bundle our users code.

83
00:05:15,270 --> 00:05:19,710
I don't want to always have to make our users click on some, like, bundle button, which is what we

84
00:05:19,710 --> 00:05:20,690
had just a moment ago.

85
00:05:21,000 --> 00:05:25,350
I want to allow them to just type everything and then eventually see the result appear automatically.

86
00:05:25,620 --> 00:05:27,450
But I don't want to bundle instantly.

87
00:05:27,450 --> 00:05:32,460
Instead, I want to allow users, maybe type type, type type, and then maybe only after they stop

88
00:05:32,460 --> 00:05:37,290
typing for like say half a second, only do the bundle at that point in time.

89
00:05:37,290 --> 00:05:39,210
That's what our real goal needs to be.

90
00:05:40,660 --> 00:05:44,920
So, as I mentioned, this is all going to become very relevant as we start putting our code editor

91
00:05:44,920 --> 00:05:50,070
together, so just keep all this stuff in mind and just remember it as we start putting the editor together.

92
00:05:50,770 --> 00:05:53,100
Well, with that mind, let's take a pause here.

93
00:05:53,890 --> 00:05:57,310
And as you guess, start working on that editor in the next video.