1
00:00:01,460 --> 00:00:05,660
Let's take a look at a diagram that's going to layout our architecture that we're going to use for implementing

2
00:00:05,660 --> 00:00:09,020
this additional feature number one and additional feature number two.

3
00:00:09,680 --> 00:00:10,880
OK, so here's the diagram.

4
00:00:10,880 --> 00:00:13,610
It's a little bit crazy, but we're going to walk through it step by step.

5
00:00:14,120 --> 00:00:19,730
So this is a diagram of what is going to eventually go on on our users machines when they tried to run

6
00:00:19,730 --> 00:00:20,480
our application.

7
00:00:20,690 --> 00:00:26,660
So, again, specifically when a user is running JDBC, our application on their local machine.

8
00:00:27,530 --> 00:00:32,450
Out of this entire diagram, the thing I really want to focus on the most right now is this reactor

9
00:00:32,450 --> 00:00:34,040
portion on the top right hand side.

10
00:00:34,930 --> 00:00:40,360
So at present, as we are developing our Facebook application, we are making use of react up when we

11
00:00:40,360 --> 00:00:45,940
use react app, we run it from our terminal that starts up a development server that processes all of

12
00:00:45,940 --> 00:00:50,050
our different dependencies, bundles everything up, and then serves it into the browser for us.

13
00:00:51,020 --> 00:00:53,820
Racked up is only for development purposes.

14
00:00:54,060 --> 00:00:59,280
So when we think about eventually making our application available to other users, we do not want our

15
00:00:59,280 --> 00:01:01,510
users running react at all.

16
00:01:01,560 --> 00:01:06,990
We don't want them touching it as a reason for this is that racked up takes a very long time to start

17
00:01:06,990 --> 00:01:07,180
up.

18
00:01:07,590 --> 00:01:12,360
There's a lot of different processing steps going on behind the scenes there, and we don't need any

19
00:01:12,360 --> 00:01:17,880
of that stuff because we do not intend on making any changes to our raw components when a user is running

20
00:01:17,880 --> 00:01:19,310
our application on their machine.

21
00:01:20,040 --> 00:01:24,600
So when we start to think about deploying our app and allowing users to make use of it, we are not

22
00:01:24,600 --> 00:01:26,550
making use of react up anymore.

23
00:01:26,560 --> 00:01:27,460
It is totally gone.

24
00:01:27,830 --> 00:01:32,760
Instead, we're going to use, create, react app to first build our client files.

25
00:01:33,270 --> 00:01:36,990
So that's going to take our indexed HTML file inside of our project.

26
00:01:37,320 --> 00:01:40,670
It's going to take all the different typescript files we have written out so far.

27
00:01:40,950 --> 00:01:46,020
It's going to bundle all that stuff transpired, all of it, and give us the output of indexed HTML

28
00:01:46,020 --> 00:01:48,420
and index and that's it.

29
00:01:49,260 --> 00:01:54,210
So again, just one more time, when we think about running our application on a user's machine, we

30
00:01:54,210 --> 00:01:56,150
are not at all thinking about great react up.

31
00:01:56,160 --> 00:01:57,480
It is just totally gone.

32
00:01:57,480 --> 00:01:58,440
It doesn't exist.

33
00:01:58,740 --> 00:02:04,320
And the only thing we really have is going to be the indexed HTML file and the index tags file, and

34
00:02:04,320 --> 00:02:06,630
that is the entire Riak project right there.

35
00:02:07,290 --> 00:02:09,660
So just a very important point to keep in mind.

36
00:02:11,390 --> 00:02:15,830
OK, so now I'm going to zoom out just a little bit and let's do a little bit more of a broader overview.

37
00:02:16,800 --> 00:02:22,110
So, again, at some point in time, a user is going to run a command like JDBC serve, when a user

38
00:02:22,110 --> 00:02:26,970
runs that command, we are going to run a little program that is going to be our Seelie.

39
00:02:27,630 --> 00:02:32,400
So this is our command line interface that is going to be responsible for starting up our Facebook application

40
00:02:32,400 --> 00:02:33,630
on a user's machine.

41
00:02:35,360 --> 00:02:41,000
Our Seelie is going to have one single job for right now, its job is going to be to start up a local

42
00:02:41,000 --> 00:02:42,420
node server.

43
00:02:42,860 --> 00:02:45,890
This is going to be essentially just a very small Xpress server.

44
00:02:46,770 --> 00:02:49,500
This express server has three different jobs.

45
00:02:50,040 --> 00:02:57,390
The first job is to allow a user to go to localhost four thousand fifty and get our built react project

46
00:02:57,390 --> 00:02:57,890
files.

47
00:02:58,470 --> 00:03:01,170
That is job number one of our local node API.

48
00:03:01,440 --> 00:03:06,210
Just serve up the react application that is going to show this interface on the screen.

49
00:03:07,670 --> 00:03:14,870
Job number two of our local node API is to write any changes that a user makes to any cells will file

50
00:03:14,870 --> 00:03:15,950
on the user's machine.

51
00:03:17,090 --> 00:03:21,140
So we're going to imagine for a second that a user is going to try to save all the changes they make

52
00:03:21,140 --> 00:03:24,030
to a cell into some kind of notebook, just file.

53
00:03:24,260 --> 00:03:26,140
It doesn't have to be called notebook pages.

54
00:03:26,180 --> 00:03:27,530
That's just an example name.

55
00:03:28,190 --> 00:03:33,410
So whenever a user creates a cell, moves a cell, deletes a cell, edits a cell, anything like that,

56
00:03:33,410 --> 00:03:39,500
any change whatsoever, we're going to automatically send those changes from our REACT application over

57
00:03:39,500 --> 00:03:41,090
to this local node API.

58
00:03:41,270 --> 00:03:46,370
And this API is going to be responsible for writing that update or that change to a given cell into

59
00:03:46,370 --> 00:03:47,960
this notebook's file.

60
00:03:48,850 --> 00:03:55,930
That is job number two of our local node API, job number three is to load up that file and provide

61
00:03:55,930 --> 00:04:00,130
a listing of all the cells inside that file over to the REACT application.

62
00:04:00,710 --> 00:04:06,130
That is what is going to allow a user to open up an existing Noblet file and see all of those existing

63
00:04:06,130 --> 00:04:08,650
cells that they created in the past appear in the browser.

64
00:04:09,610 --> 00:04:15,010
So that's it, that is what's going to go on on our inside infrastructure for our app.

65
00:04:15,370 --> 00:04:18,760
Just one more time, very quickly, users going to run JDBC surf.

66
00:04:19,779 --> 00:04:24,280
We're going to launch our Seelie, the Seelie will be responsible for starting up this local node API,

67
00:04:24,910 --> 00:04:28,480
this APIs job is to serve up the built client files.

68
00:04:29,320 --> 00:04:34,690
This local nodes APIs job is to write any changes to any cells that a user makes inside the browser

69
00:04:34,930 --> 00:04:36,640
to this notebook's file.

70
00:04:37,660 --> 00:04:43,210
Job number three is to load up that file, find all the cells that are saved, Intuit and.

71
00:04:44,250 --> 00:04:48,870
Deliver the definition of all those cells to the react application running inside the browser.

72
00:04:50,340 --> 00:04:55,200
Now, a lot of stuff might still be confusing, but as usual, we're going to write out all the code

73
00:04:55,200 --> 00:04:56,730
for every part you see here.

74
00:04:57,000 --> 00:05:00,580
So eventually, even if stuff is not very clear right now, don't sweat it.

75
00:05:00,600 --> 00:05:05,550
All this stuff will be crystal clear over time as we have to write out the code for every single step.

76
00:05:06,520 --> 00:05:10,900
All right, so now that we've got a broad overview on what we need to do, as usual, let's take a pause

77
00:05:10,900 --> 00:05:14,170
right here and start working on our implementation in just a moment.