1
00:00:00,980 --> 00:00:05,630
As I've mentioned many, many times, our application looks great, but there's still a lot for us to

2
00:00:05,630 --> 00:00:05,930
do.

3
00:00:06,240 --> 00:00:11,120
So inside the section, we're going to add in an interesting little feature to the code execution of

4
00:00:11,120 --> 00:00:12,730
all of our different code cells.

5
00:00:13,130 --> 00:00:16,379
So let's first begin by just explaining what this additional feature is going to be.

6
00:00:16,910 --> 00:00:19,860
I want to highlight one possible use case of this tool.

7
00:00:19,910 --> 00:00:24,470
Remember, this tool is all about allowing a user to write out some code and document it very easily.

8
00:00:24,930 --> 00:00:28,280
So I'm going to put in a little bit of code into these two code cells.

9
00:00:28,490 --> 00:00:32,990
And I just want to imagine how a user might, at a very practical level, make use of this.

10
00:00:33,580 --> 00:00:38,510
So I'm going to imagine that maybe we've got a user who wants to document the process of fetching some

11
00:00:38,510 --> 00:00:42,290
data and then rendering that data onto the screen using react.

12
00:00:42,740 --> 00:00:47,840
So I put inside of here a little bit of JavaScript code that defines a function called fetch posts.

13
00:00:48,170 --> 00:00:50,420
The goal, this function is to just go and fetch some posts.

14
00:00:50,420 --> 00:00:51,350
It doesn't actually work.

15
00:00:51,500 --> 00:00:52,820
It's just a very quick example.

16
00:00:53,600 --> 00:00:58,880
So a user might put this little bit of code in and then maybe add in a text cell right above it to say

17
00:00:59,210 --> 00:01:02,480
here is some code to fetch some posts.

18
00:01:04,310 --> 00:01:09,170
Once they've got that bit of documentation put together, they then might want to add in an example

19
00:01:09,320 --> 00:01:14,270
of how to use that function to fetch them posts and then render them onto the screen.

20
00:01:15,260 --> 00:01:21,290
So to do so, they might add in some code to the second code cell that looks like this.

21
00:01:23,700 --> 00:01:29,610
So I've got some imports for react, I have to redefine the function because, of course, remember,

22
00:01:29,790 --> 00:01:33,960
all these different code cells are essentially bundled 100 percent separately right now.

23
00:01:34,290 --> 00:01:38,700
So if we want this second code cell to have access to fetch posts, we have to redefine it down here.

24
00:01:39,480 --> 00:01:44,880
Then the user could show a quick demonstration of defining a component that will call for posts, update

25
00:01:44,880 --> 00:01:47,550
some piece of state, and then render those onto the screen somehow.

26
00:01:48,710 --> 00:01:52,520
So this definitely works, and I think this is kind of a practical example of how a user would make

27
00:01:52,520 --> 00:01:57,370
use of our tool, but there's just one thing about this that is a little bit awkward right now.

28
00:01:57,770 --> 00:02:02,960
The thing that is awkward is that if we ever want to access code or make use of functions, variables

29
00:02:02,960 --> 00:02:05,900
or anything like that defined in a prior cell.

30
00:02:06,850 --> 00:02:10,970
No words are fetched function, we want to use it down here, let's define up here.

31
00:02:11,020 --> 00:02:16,150
We have to redefine it or essentially rewrite all the code inside of our later cell.

32
00:02:16,810 --> 00:02:18,240
So let me put that another way.

33
00:02:18,670 --> 00:02:21,280
Our second code cell wants to call fenceposts.

34
00:02:21,850 --> 00:02:27,410
The second code cell does not have access to the function that is defined inside the first code cell.

35
00:02:27,850 --> 00:02:31,900
So we have to completely rewrite all that stuff inside of the second code cell.

36
00:02:32,530 --> 00:02:33,850
That is kind of awkward.

37
00:02:33,880 --> 00:02:40,000
It gets really awkward really quickly because if we ever decide to slightly rewrite our post function

38
00:02:40,000 --> 00:02:45,220
in some way, well, we would have to go back to both implementations, the one right here and the one

39
00:02:45,220 --> 00:02:47,360
right here, and make changes in two locations.

40
00:02:48,130 --> 00:02:49,900
So here's the future I want to add in.

41
00:02:50,380 --> 00:02:57,760
I want to allow all code cells to reference any variable, any function, any object, anything that

42
00:02:57,760 --> 00:03:00,160
is declared in a prior code cell.

43
00:03:00,820 --> 00:03:04,780
So if we look at this in kind of diagram format, here's a very simple example of what we want to be

44
00:03:04,780 --> 00:03:05,290
able to do.

45
00:03:05,950 --> 00:03:07,750
I've got to code cells in a row right here.

46
00:03:08,150 --> 00:03:10,620
The first one declares a variable called color.

47
00:03:11,260 --> 00:03:15,980
I want to be able to access that variable inside of any later code cell.

48
00:03:16,450 --> 00:03:21,760
So this next code selldown should be able to do a console log of color and see a console log of red

49
00:03:21,760 --> 00:03:23,260
appear at our at our console.

50
00:03:24,610 --> 00:03:28,120
Now, just be clear, our current setup does not do this at all.

51
00:03:28,420 --> 00:03:32,820
Our current bundling setup considers each code cell to be 100 percent independent.

52
00:03:33,070 --> 00:03:35,680
And when we bundle this code, it is just this code.

53
00:03:36,130 --> 00:03:39,000
When we bundle this code, it is just this code.

54
00:03:39,010 --> 00:03:42,820
There is no connection whatsoever between our code cells right now.

55
00:03:43,790 --> 00:03:49,640
So we are going to be able to eventually not have all this fetch post and import for axios right here

56
00:03:50,420 --> 00:03:52,280
and whenever we try to call fenceposts.

57
00:03:53,240 --> 00:03:56,510
It's going to call the fetch function that had been defined previously.

58
00:03:57,320 --> 00:03:57,790
That's it.

59
00:03:57,800 --> 00:03:59,810
That is a challenge that's we're going to try to put together.

60
00:04:00,620 --> 00:04:02,810
This will be a fun little thing to take a look at.

61
00:04:03,140 --> 00:04:07,080
There's going to be many little challenges that come up along the way, as you can imagine.

62
00:04:07,100 --> 00:04:09,710
So definitely a good little addition to our project.

63
00:04:10,160 --> 00:04:13,540
Let's take a pause right here and figure out how to approach this in just a moment.