Out of these three different challenges, we're going to work on the second one first, so we're going
to make sure that we can somehow safely execute JavaScript code provided by a user inside the browser.
This JavaScript code might have really fancy syntax inside of it, like, say, async awaits, word
might have JSM or anything else like that.
Now, the general strategy we're going to use here is to somehow run a transpire inside of application.
Let me tell you a little bit more about what a trans Pilar is.
A trans Pilar is a tool that will take some amount of code like what you see right here.
It will then strip out any features or any use of syntax inside of it that might not be widely supported
in all modern browsers.
So, for example, the babble transpire will strip out all that jazz and convert it into equivalent
JavaScript code.
It might also strip out the aero function and convert it into a normal function keyword function.
And it might also strip out the Constitution and change it into a old style bar as well.
So in this case, the output from from this transpire would be something like what you see down here.
Now, there are several different transpires in the JavaScript world, but without a doubt the most
popular one is a tool called babble.
So I think that if we could somehow figure out how to get access to babble inside of our project, we
would be well on our way to somehow solving issue or problem number two.
So that's what we're going to start to investigate.
We're going to somehow figure out how to add in or make use of Babul inside of our project.
Now, we could definitely take a look at the Ababil documentation and figure out how to do that.
But I've got a better idea.
Let's instead take a look at some other existing applications online that are similar to ours or the
one we are trying to build and see how these other applications handle this transpiring process.
We can then use these other applications to give us some inspiration to figure out how to implement
Babille inside of our app.
So the first other application that we're going to take a look at to get some inspiration is Copan.
I'm going to open up my browser and navigate to that application right away.
We'll go to code pennachio.
Once at the home page, I'll finally start coating button on the top left hand side.
We'll see a page like this, so this is an online interactive coding environment, it's somewhat similar
to what we are trying to make, except our application is going to have multiple code editors on code
pen.
You can write out some amount of HTML and JavaScript and then see it all executed down here.
I'm going to go to the JavaScript tab, I'm going to click on the little gear right there.
I'll see a JavaScript preprocessor, I'm going to go to that dropdown and change it to Babille because
we really want to see how Babille is used on Ben.
Well, then close that and then finally inside of this window right here, I'm going to write out a
little bit of JavaScript code with some inside of it.
I'm going to put in const app as an arrow function.
Put a div in there and just say something like, hi there.
Now when you type that out, you might see an error message like this right here.
If you do, it's just code and being a little bit funny.
What a semicolon at the very end or something similar.
And that error message should go away.
All right, so we don't have any error messages or anything like that anymore, so I think it's pretty
clear that Copan is doing something to process this code before it gets executed down inside this preview
window.
So to figure out what Komen is doing, I'm going to open up my network request log inside my browser.
And then going to clear out all the existing requests.
I'll go back to the JavaScript tab, and I'm going to make a very small change to this code, so I'm
just going to add in a couple of exclamations like so and when you do so, you might have to once again
kind of like add and remove that semicolon just to get that air to go away.
You do want one more exclamation.
There we go.
OK, so once I've got some code inside of here without any kind of error message, you might notice
a request has been made to some endpoint called process or something very similar.
If you do not see that request right there, try adding another exclamation and you should see that
process request appear.
So let's take a look at that process request and see what's going on with it.
I'm going to click on the request.
I'm going to go to the headers tab and then scroll down to the very bottom.
So down here.
Is what is being sent off to some remote API managed by Copan, it looks like they are sending off request
that contains the code that we just wrote in JavaScript panel, and they're saying that they want to
apply some processing using babble or do some transpiring process.
If I then click on the preview tab up here, I'm going to click into this response so we get back from
the server and you'll see that the output or the response that we get back from that Copan API is the
transpired result.
So there is my Riak component right there.
All the JSF has been stripped out in this case.
They have not stripped out the era function or the keyword, but that's totally fine.
You can configure babble to do different levels of transpiring.
At the end of the day, what's really important is that they definitely stripped out some of this and
this entire transpiring process occurred on some remote API.
So this is a little bit confusing, let me show you a diagram to kind of sum up what Copan is doing
here to handle this transpiring process.
So this is option number one for you and I for implementing Babille inside of our app.
We might have our react application that we're going to eventually put together.
We might decide to take the user's code, whatever they wrote, and send it off to some back end API
server where we will be running Babille or something similar.
Well, then do that transpiring on the users code and then send back an immediate response with that
transpired code.
And so now in theory, our REACT application can execute that code without any fear for having some
strange syntax inside of it or anything like that.
So this is essentially what code pen is doing, and we could definitely use this kind of approach inside
of our application as well.
All right, now there's one other option for running battle.
I want to show you, but this video is going just a little bit long, so let's take a very brief pause
and continue in just a moment.