Let's take a look at a diagram that's going to layout our architecture that we're going to use for implementing
this additional feature number one and additional feature number two.
OK, so here's the diagram.
It's a little bit crazy, but we're going to walk through it step by step.
So this is a diagram of what is going to eventually go on on our users machines when they tried to run
our application.
So, again, specifically when a user is running JDBC, our application on their local machine.
Out of this entire diagram, the thing I really want to focus on the most right now is this reactor
portion on the top right hand side.
So at present, as we are developing our Facebook application, we are making use of react up when we
use react app, we run it from our terminal that starts up a development server that processes all of
our different dependencies, bundles everything up, and then serves it into the browser for us.
Racked up is only for development purposes.
So when we think about eventually making our application available to other users, we do not want our
users running react at all.
We don't want them touching it as a reason for this is that racked up takes a very long time to start
up.
There's a lot of different processing steps going on behind the scenes there, and we don't need any
of that stuff because we do not intend on making any changes to our raw components when a user is running
our application on their machine.
So when we start to think about deploying our app and allowing users to make use of it, we are not
making use of react up anymore.
It is totally gone.
Instead, we're going to use, create, react app to first build our client files.
So that's going to take our indexed HTML file inside of our project.
It's going to take all the different typescript files we have written out so far.
It's going to bundle all that stuff transpired, all of it, and give us the output of indexed HTML
and index and that's it.
So again, just one more time, when we think about running our application on a user's machine, we
are not at all thinking about great react up.
It is just totally gone.
It doesn't exist.
And the only thing we really have is going to be the indexed HTML file and the index tags file, and
that is the entire Riak project right there.
So just a very important point to keep in mind.
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.
So, again, at some point in time, a user is going to run a command like JDBC serve, when a user
runs that command, we are going to run a little program that is going to be our Seelie.
So this is our command line interface that is going to be responsible for starting up our Facebook application
on a user's machine.
Our Seelie is going to have one single job for right now, its job is going to be to start up a local
node server.
This is going to be essentially just a very small Xpress server.
This express server has three different jobs.
The first job is to allow a user to go to localhost four thousand fifty and get our built react project
files.
That is job number one of our local node API.
Just serve up the react application that is going to show this interface on the screen.
Job number two of our local node API is to write any changes that a user makes to any cells will file
on the user's machine.
So we're going to imagine for a second that a user is going to try to save all the changes they make
to a cell into some kind of notebook, just file.
It doesn't have to be called notebook pages.
That's just an example name.
So whenever a user creates a cell, moves a cell, deletes a cell, edits a cell, anything like that,
any change whatsoever, we're going to automatically send those changes from our REACT application over
to this local node API.
And this API is going to be responsible for writing that update or that change to a given cell into
this notebook's file.
That is job number two of our local node API, job number three is to load up that file and provide
a listing of all the cells inside that file over to the REACT application.
That is what is going to allow a user to open up an existing Noblet file and see all of those existing
cells that they created in the past appear in the browser.
So that's it, that is what's going to go on on our inside infrastructure for our app.
Just one more time, very quickly, users going to run JDBC surf.
We're going to launch our Seelie, the Seelie will be responsible for starting up this local node API,
this APIs job is to serve up the built client files.
This local nodes APIs job is to write any changes to any cells that a user makes inside the browser
to this notebook's file.
Job number three is to load up that file, find all the cells that are saved, Intuit and.
Deliver the definition of all those cells to the react application running inside the browser.
Now, a lot of stuff might still be confusing, but as usual, we're going to write out all the code
for every part you see here.
So eventually, even if stuff is not very clear right now, don't sweat it.
All this stuff will be crystal clear over time as we have to write out the code for every single step.
All right, so now that we've got a broad overview on what we need to do, as usual, let's take a pause
right here and start working on our implementation in just a moment.