We just took a look at a rather long demo of the application we're going to build.
This is definitely a rather large application.
There's a lot to it.
And so our first question really needs to be, where are we going to start?
What is the first part we're going to build?
Well, in my opinion, I think it makes a lot of sense to kind of tackle the hardest part of this application
first and just make sure that it is technically feasible to actually build.
So in this video, I'm going to tell you exactly what the hardest part of this application is and help
you understand why it is going to be so challenging.
Without a doubt, the hardest part of this entire application is going to be somehow executing the code
that a user provides inside of a preview window.
So let me just give you a quick reminder.
Here's a little mockup of the application I just showed you.
So this is what we are going to build.
A user is going to be able to show us number of text cells inside of here.
So a tech cell is like this up here.
It's going to have some amount of text or documentation inside of it.
And remember, a user able to click in there and turn it into a markdown ed so user can change the content.
We're also going to have code cells.
This is a code cell right here inside of a code cell.
We're going to show that code editor where user is going to write in some amount of code.
We're then going to take that code, somehow execute it over inside this preview window and show the
result inside the preview window.
So as you could guess, we're probably gonna end up building this entire application using react, so
I think that it's kind of safe to assume that we might create a couple of different react components
in order to show this little code cell thing right here.
So we might decide to create something called like maybe a code cell component.
And that's going to represent just about everything you see right there.
We might have a code ed component to create the actual code editor and then maybe some kind of preview
component that will show and execute the code on the right hand side.
So I want to start to think about how these three different components might be wired up together and
how they might communicate.
Well, we might have something very simple and basic like this, we might have a code cell component
that shows the code editor and the preview window as well.
Now, at some point in time, a user is going to write in some amount of code to that code editor component.
So we're going to have to somehow take that code and communicate it over to the preview window, where
the preview component to do so might just have some kind of piece of state inside of the code cell component
or something like that.
Maybe any time a user changes the code inside that code ed component, we send the updated code up to
the code cell component and then we send the updated code down to the preview component, or we then
need to somehow execute it.
So the entire process of receiving this code inside of the preview component and then somehow executing
it is where a lot of challenges are going to come into play.
Let me help you understand why running this code and somehow showing the result inside of here is going
to be so challenging.
All right, so in the demo in the last video, I showed you that we are going to eventually be able
to write in something like a react component into those code editor windows, and we should be able
to write in that riot component using just.
We're also going to allow users to write in some JavaScript that has import statements as well, so
they should be able to write an import statement for any kind of arbitrary module off of NPM.
And they should also be able to write out import statements for case files as well.
So these two snippets of code right here are examples of what we're going to have to somehow run or
execute inside of our preview component.
The preview component is going to receive snippets of code like this as a string now three big challenges
here start to come up.
The first big challenge is that if we want to run or execute some code like this inside of our browser,
we'll notice that there are some just inside there.
Remember, your browser has no idea what J is.
If we tried to execute this code directly inside of your browser, we would very quickly get an error
message.
So before executing some code like this, we need to first do some preprocessing on it and remove anything
like Jesus or any other kind of advanced syntax.
The second big challenge is that we're going to have to somehow deal with these import statements,
your browser doesn't really know what to do.
If you say import axios from Axios, it doesn't know where that module is coming from.
Your browser might not even have support for Native s modules or have any idea what this import keyword
really means.
And even if your browser does, it might not have any idea how to import access file, for that matter.
So without a doubt, we need to do some kind of processing on this code as well and somehow figure out
how to go and fetch the axios module or how to fetch the Bullmastiff SS file or whatever else we are
trying to run.
And then finally, last big challenge is that we are being given this code as a string, so it's a plain
string and we need to somehow execute it.
We need to figure out some kind of strategy to well execute that code.
So in total, those are the three big challenges that we're going to start to examine in the coming
videos, the first big challenge, we're going to be given that code as a string.
We have to execute it safely in some way.
Now, when I use the term safely right here, I mean to say that the code that the user provides us
or whatever code they type in might have some kind of air inside of it.
There might be a syntax error or something like that.
So when we try to run this user's code, we need to make sure that we do it in some way that doesn't
just crash the overall application like our entire app if some air is thrown by the user's code.
In addition, we might want to think a little bit about some security issues that might come up as we
start to run user provided code as well.
Second big challenge, we might have stuff like inside that code that your browser just doesn't know
how to deal with, so we might have to do some preprocessing.
And then finally, we have to somehow figure out all the different import statements that have been
written into the user's code as well to try to import something like a JavaScript file or excess and
somehow go and download those modules or whatever else before ever executing the user's code as well.
So these are the three big challenges.
We're going to start to do kind of a deep dive into each of these and understand a lot more about each
of these challenges and how to solve each one in the coming videos.
There's a lot for us to do, so let's get to it.