1
00:00:00,920 --> 00:00:05,600
Out of these three different challenges, we're going to work on the second one first, so we're going

2
00:00:05,600 --> 00:00:10,970
to make sure that we can somehow safely execute JavaScript code provided by a user inside the browser.

3
00:00:11,370 --> 00:00:16,370
This JavaScript code might have really fancy syntax inside of it, like, say, async awaits, word

4
00:00:16,370 --> 00:00:19,060
might have JSM or anything else like that.

5
00:00:19,940 --> 00:00:25,010
Now, the general strategy we're going to use here is to somehow run a transpire inside of application.

6
00:00:25,400 --> 00:00:27,860
Let me tell you a little bit more about what a trans Pilar is.

7
00:00:28,430 --> 00:00:32,710
A trans Pilar is a tool that will take some amount of code like what you see right here.

8
00:00:33,050 --> 00:00:39,170
It will then strip out any features or any use of syntax inside of it that might not be widely supported

9
00:00:39,170 --> 00:00:40,610
in all modern browsers.

10
00:00:41,100 --> 00:00:47,270
So, for example, the babble transpire will strip out all that jazz and convert it into equivalent

11
00:00:47,270 --> 00:00:48,140
JavaScript code.

12
00:00:48,580 --> 00:00:53,420
It might also strip out the aero function and convert it into a normal function keyword function.

13
00:00:54,640 --> 00:00:59,440
And it might also strip out the Constitution and change it into a old style bar as well.

14
00:01:00,100 --> 00:01:04,629
So in this case, the output from from this transpire would be something like what you see down here.

15
00:01:06,160 --> 00:01:10,300
Now, there are several different transpires in the JavaScript world, but without a doubt the most

16
00:01:10,300 --> 00:01:12,310
popular one is a tool called babble.

17
00:01:12,940 --> 00:01:17,890
So I think that if we could somehow figure out how to get access to babble inside of our project, we

18
00:01:17,890 --> 00:01:22,180
would be well on our way to somehow solving issue or problem number two.

19
00:01:23,130 --> 00:01:24,780
So that's what we're going to start to investigate.

20
00:01:25,080 --> 00:01:29,280
We're going to somehow figure out how to add in or make use of Babul inside of our project.

21
00:01:29,790 --> 00:01:33,450
Now, we could definitely take a look at the Ababil documentation and figure out how to do that.

22
00:01:33,720 --> 00:01:34,850
But I've got a better idea.

23
00:01:35,220 --> 00:01:40,710
Let's instead take a look at some other existing applications online that are similar to ours or the

24
00:01:40,710 --> 00:01:45,840
one we are trying to build and see how these other applications handle this transpiring process.

25
00:01:46,230 --> 00:01:50,670
We can then use these other applications to give us some inspiration to figure out how to implement

26
00:01:50,670 --> 00:01:52,380
Babille inside of our app.

27
00:01:53,340 --> 00:01:58,410
So the first other application that we're going to take a look at to get some inspiration is Copan.

28
00:01:59,760 --> 00:02:02,870
I'm going to open up my browser and navigate to that application right away.

29
00:02:04,660 --> 00:02:06,210
We'll go to code pennachio.

30
00:02:07,560 --> 00:02:11,130
Once at the home page, I'll finally start coating button on the top left hand side.

31
00:02:12,240 --> 00:02:18,090
We'll see a page like this, so this is an online interactive coding environment, it's somewhat similar

32
00:02:18,090 --> 00:02:23,310
to what we are trying to make, except our application is going to have multiple code editors on code

33
00:02:23,340 --> 00:02:23,530
pen.

34
00:02:23,550 --> 00:02:28,740
You can write out some amount of HTML and JavaScript and then see it all executed down here.

35
00:02:29,810 --> 00:02:33,590
I'm going to go to the JavaScript tab, I'm going to click on the little gear right there.

36
00:02:34,770 --> 00:02:40,050
I'll see a JavaScript preprocessor, I'm going to go to that dropdown and change it to Babille because

37
00:02:40,050 --> 00:02:42,870
we really want to see how Babille is used on Ben.

38
00:02:44,040 --> 00:02:48,750
Well, then close that and then finally inside of this window right here, I'm going to write out a

39
00:02:48,750 --> 00:02:51,720
little bit of JavaScript code with some inside of it.

40
00:02:52,380 --> 00:02:55,350
I'm going to put in const app as an arrow function.

41
00:02:56,930 --> 00:02:59,340
Put a div in there and just say something like, hi there.

42
00:03:00,020 --> 00:03:03,020
Now when you type that out, you might see an error message like this right here.

43
00:03:03,210 --> 00:03:05,930
If you do, it's just code and being a little bit funny.

44
00:03:06,450 --> 00:03:08,540
What a semicolon at the very end or something similar.

45
00:03:08,720 --> 00:03:10,340
And that error message should go away.

46
00:03:11,590 --> 00:03:15,820
All right, so we don't have any error messages or anything like that anymore, so I think it's pretty

47
00:03:15,820 --> 00:03:21,910
clear that Copan is doing something to process this code before it gets executed down inside this preview

48
00:03:21,910 --> 00:03:22,290
window.

49
00:03:23,570 --> 00:03:28,760
So to figure out what Komen is doing, I'm going to open up my network request log inside my browser.

50
00:03:30,090 --> 00:03:32,490
And then going to clear out all the existing requests.

51
00:03:33,470 --> 00:03:38,690
I'll go back to the JavaScript tab, and I'm going to make a very small change to this code, so I'm

52
00:03:38,690 --> 00:03:43,730
just going to add in a couple of exclamations like so and when you do so, you might have to once again

53
00:03:43,730 --> 00:03:48,100
kind of like add and remove that semicolon just to get that air to go away.

54
00:03:48,860 --> 00:03:51,080
You do want one more exclamation.

55
00:03:51,140 --> 00:03:51,580
There we go.

56
00:03:52,920 --> 00:03:57,570
OK, so once I've got some code inside of here without any kind of error message, you might notice

57
00:03:57,570 --> 00:04:01,710
a request has been made to some endpoint called process or something very similar.

58
00:04:02,160 --> 00:04:06,660
If you do not see that request right there, try adding another exclamation and you should see that

59
00:04:06,660 --> 00:04:07,800
process request appear.

60
00:04:08,750 --> 00:04:11,870
So let's take a look at that process request and see what's going on with it.

61
00:04:12,350 --> 00:04:13,430
I'm going to click on the request.

62
00:04:13,970 --> 00:04:17,480
I'm going to go to the headers tab and then scroll down to the very bottom.

63
00:04:19,250 --> 00:04:19,970
So down here.

64
00:04:20,980 --> 00:04:27,550
Is what is being sent off to some remote API managed by Copan, it looks like they are sending off request

65
00:04:27,550 --> 00:04:32,110
that contains the code that we just wrote in JavaScript panel, and they're saying that they want to

66
00:04:32,110 --> 00:04:36,670
apply some processing using babble or do some transpiring process.

67
00:04:37,670 --> 00:04:43,850
If I then click on the preview tab up here, I'm going to click into this response so we get back from

68
00:04:43,850 --> 00:04:50,240
the server and you'll see that the output or the response that we get back from that Copan API is the

69
00:04:50,240 --> 00:04:51,400
transpired result.

70
00:04:51,890 --> 00:04:53,980
So there is my Riak component right there.

71
00:04:53,990 --> 00:04:56,960
All the JSF has been stripped out in this case.

72
00:04:56,960 --> 00:05:00,610
They have not stripped out the era function or the keyword, but that's totally fine.

73
00:05:00,650 --> 00:05:03,650
You can configure babble to do different levels of transpiring.

74
00:05:03,920 --> 00:05:09,380
At the end of the day, what's really important is that they definitely stripped out some of this and

75
00:05:09,380 --> 00:05:13,070
this entire transpiring process occurred on some remote API.

76
00:05:13,920 --> 00:05:18,510
So this is a little bit confusing, let me show you a diagram to kind of sum up what Copan is doing

77
00:05:18,510 --> 00:05:20,450
here to handle this transpiring process.

78
00:05:21,090 --> 00:05:24,890
So this is option number one for you and I for implementing Babille inside of our app.

79
00:05:25,530 --> 00:05:28,620
We might have our react application that we're going to eventually put together.

80
00:05:29,010 --> 00:05:34,680
We might decide to take the user's code, whatever they wrote, and send it off to some back end API

81
00:05:34,680 --> 00:05:37,740
server where we will be running Babille or something similar.

82
00:05:39,130 --> 00:05:44,080
Well, then do that transpiring on the users code and then send back an immediate response with that

83
00:05:44,080 --> 00:05:45,000
transpired code.

84
00:05:45,430 --> 00:05:50,320
And so now in theory, our REACT application can execute that code without any fear for having some

85
00:05:50,320 --> 00:05:52,810
strange syntax inside of it or anything like that.

86
00:05:53,440 --> 00:05:57,880
So this is essentially what code pen is doing, and we could definitely use this kind of approach inside

87
00:05:57,880 --> 00:05:59,130
of our application as well.

88
00:06:00,440 --> 00:06:02,730
All right, now there's one other option for running battle.

89
00:06:02,750 --> 00:06:06,560
I want to show you, but this video is going just a little bit long, so let's take a very brief pause

90
00:06:06,680 --> 00:06:07,900
and continue in just a moment.