1 00:00:01,090 --> 00:00:04,310 We just took a look at a rather long demo of the application we're going to build. 2 00:00:04,600 --> 00:00:06,810 This is definitely a rather large application. 3 00:00:06,820 --> 00:00:07,900 There's a lot to it. 4 00:00:08,029 --> 00:00:11,670 And so our first question really needs to be, where are we going to start? 5 00:00:11,710 --> 00:00:13,150 What is the first part we're going to build? 6 00:00:13,750 --> 00:00:18,010 Well, in my opinion, I think it makes a lot of sense to kind of tackle the hardest part of this application 7 00:00:18,010 --> 00:00:21,790 first and just make sure that it is technically feasible to actually build. 8 00:00:22,480 --> 00:00:26,680 So in this video, I'm going to tell you exactly what the hardest part of this application is and help 9 00:00:26,680 --> 00:00:28,960 you understand why it is going to be so challenging. 10 00:00:29,590 --> 00:00:34,780 Without a doubt, the hardest part of this entire application is going to be somehow executing the code 11 00:00:34,780 --> 00:00:37,810 that a user provides inside of a preview window. 12 00:00:38,260 --> 00:00:39,640 So let me just give you a quick reminder. 13 00:00:40,570 --> 00:00:43,000 Here's a little mockup of the application I just showed you. 14 00:00:43,030 --> 00:00:44,410 So this is what we are going to build. 15 00:00:45,250 --> 00:00:48,780 A user is going to be able to show us number of text cells inside of here. 16 00:00:48,790 --> 00:00:50,400 So a tech cell is like this up here. 17 00:00:50,680 --> 00:00:53,670 It's going to have some amount of text or documentation inside of it. 18 00:00:53,680 --> 00:00:58,820 And remember, a user able to click in there and turn it into a markdown ed so user can change the content. 19 00:00:59,530 --> 00:01:01,210 We're also going to have code cells. 20 00:01:01,510 --> 00:01:05,400 This is a code cell right here inside of a code cell. 21 00:01:05,410 --> 00:01:08,590 We're going to show that code editor where user is going to write in some amount of code. 22 00:01:08,890 --> 00:01:13,690 We're then going to take that code, somehow execute it over inside this preview window and show the 23 00:01:13,690 --> 00:01:15,300 result inside the preview window. 24 00:01:16,850 --> 00:01:21,500 So as you could guess, we're probably gonna end up building this entire application using react, so 25 00:01:21,500 --> 00:01:25,730 I think that it's kind of safe to assume that we might create a couple of different react components 26 00:01:25,910 --> 00:01:28,970 in order to show this little code cell thing right here. 27 00:01:29,600 --> 00:01:33,260 So we might decide to create something called like maybe a code cell component. 28 00:01:33,500 --> 00:01:36,840 And that's going to represent just about everything you see right there. 29 00:01:37,340 --> 00:01:42,590 We might have a code ed component to create the actual code editor and then maybe some kind of preview 30 00:01:42,590 --> 00:01:46,100 component that will show and execute the code on the right hand side. 31 00:01:47,040 --> 00:01:50,860 So I want to start to think about how these three different components might be wired up together and 32 00:01:50,860 --> 00:01:51,940 how they might communicate. 33 00:01:52,890 --> 00:01:56,940 Well, we might have something very simple and basic like this, we might have a code cell component 34 00:01:56,940 --> 00:01:59,790 that shows the code editor and the preview window as well. 35 00:02:01,300 --> 00:02:05,850 Now, at some point in time, a user is going to write in some amount of code to that code editor component. 36 00:02:06,380 --> 00:02:10,750 So we're going to have to somehow take that code and communicate it over to the preview window, where 37 00:02:10,750 --> 00:02:16,630 the preview component to do so might just have some kind of piece of state inside of the code cell component 38 00:02:16,630 --> 00:02:17,500 or something like that. 39 00:02:17,740 --> 00:02:23,260 Maybe any time a user changes the code inside that code ed component, we send the updated code up to 40 00:02:23,260 --> 00:02:28,810 the code cell component and then we send the updated code down to the preview component, or we then 41 00:02:28,810 --> 00:02:30,190 need to somehow execute it. 42 00:02:31,210 --> 00:02:37,630 So the entire process of receiving this code inside of the preview component and then somehow executing 43 00:02:37,630 --> 00:02:40,510 it is where a lot of challenges are going to come into play. 44 00:02:41,200 --> 00:02:45,730 Let me help you understand why running this code and somehow showing the result inside of here is going 45 00:02:45,730 --> 00:02:46,870 to be so challenging. 46 00:02:48,270 --> 00:02:52,110 All right, so in the demo in the last video, I showed you that we are going to eventually be able 47 00:02:52,110 --> 00:02:57,060 to write in something like a react component into those code editor windows, and we should be able 48 00:02:57,060 --> 00:02:59,210 to write in that riot component using just. 49 00:03:00,500 --> 00:03:05,510 We're also going to allow users to write in some JavaScript that has import statements as well, so 50 00:03:05,510 --> 00:03:10,190 they should be able to write an import statement for any kind of arbitrary module off of NPM. 51 00:03:10,610 --> 00:03:14,210 And they should also be able to write out import statements for case files as well. 52 00:03:15,330 --> 00:03:20,490 So these two snippets of code right here are examples of what we're going to have to somehow run or 53 00:03:20,490 --> 00:03:23,190 execute inside of our preview component. 54 00:03:24,120 --> 00:03:30,060 The preview component is going to receive snippets of code like this as a string now three big challenges 55 00:03:30,060 --> 00:03:31,070 here start to come up. 56 00:03:31,410 --> 00:03:36,270 The first big challenge is that if we want to run or execute some code like this inside of our browser, 57 00:03:36,600 --> 00:03:39,100 we'll notice that there are some just inside there. 58 00:03:39,600 --> 00:03:43,170 Remember, your browser has no idea what J is. 59 00:03:43,470 --> 00:03:48,180 If we tried to execute this code directly inside of your browser, we would very quickly get an error 60 00:03:48,180 --> 00:03:48,680 message. 61 00:03:49,380 --> 00:03:54,660 So before executing some code like this, we need to first do some preprocessing on it and remove anything 62 00:03:54,660 --> 00:03:58,020 like Jesus or any other kind of advanced syntax. 63 00:03:59,100 --> 00:04:03,210 The second big challenge is that we're going to have to somehow deal with these import statements, 64 00:04:03,690 --> 00:04:06,060 your browser doesn't really know what to do. 65 00:04:06,060 --> 00:04:09,840 If you say import axios from Axios, it doesn't know where that module is coming from. 66 00:04:10,170 --> 00:04:16,019 Your browser might not even have support for Native s modules or have any idea what this import keyword 67 00:04:16,019 --> 00:04:16,680 really means. 68 00:04:17,490 --> 00:04:22,130 And even if your browser does, it might not have any idea how to import access file, for that matter. 69 00:04:22,860 --> 00:04:27,270 So without a doubt, we need to do some kind of processing on this code as well and somehow figure out 70 00:04:27,270 --> 00:04:32,490 how to go and fetch the axios module or how to fetch the Bullmastiff SS file or whatever else we are 71 00:04:32,490 --> 00:04:33,120 trying to run. 72 00:04:34,160 --> 00:04:39,260 And then finally, last big challenge is that we are being given this code as a string, so it's a plain 73 00:04:39,260 --> 00:04:41,070 string and we need to somehow execute it. 74 00:04:41,540 --> 00:04:44,810 We need to figure out some kind of strategy to well execute that code. 75 00:04:45,890 --> 00:04:51,110 So in total, those are the three big challenges that we're going to start to examine in the coming 76 00:04:51,110 --> 00:04:55,370 videos, the first big challenge, we're going to be given that code as a string. 77 00:04:55,370 --> 00:04:57,410 We have to execute it safely in some way. 78 00:04:58,870 --> 00:05:03,580 Now, when I use the term safely right here, I mean to say that the code that the user provides us 79 00:05:03,580 --> 00:05:06,570 or whatever code they type in might have some kind of air inside of it. 80 00:05:06,910 --> 00:05:08,950 There might be a syntax error or something like that. 81 00:05:09,370 --> 00:05:13,120 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 82 00:05:13,120 --> 00:05:18,190 just crash the overall application like our entire app if some air is thrown by the user's code. 83 00:05:18,850 --> 00:05:22,840 In addition, we might want to think a little bit about some security issues that might come up as we 84 00:05:22,840 --> 00:05:24,910 start to run user provided code as well. 85 00:05:25,990 --> 00:05:30,940 Second big challenge, we might have stuff like inside that code that your browser just doesn't know 86 00:05:30,940 --> 00:05:33,690 how to deal with, so we might have to do some preprocessing. 87 00:05:34,090 --> 00:05:37,930 And then finally, we have to somehow figure out all the different import statements that have been 88 00:05:37,930 --> 00:05:43,420 written into the user's code as well to try to import something like a JavaScript file or excess and 89 00:05:43,420 --> 00:05:49,000 somehow go and download those modules or whatever else before ever executing the user's code as well. 90 00:05:49,660 --> 00:05:51,310 So these are the three big challenges. 91 00:05:51,340 --> 00:05:56,140 We're going to start to do kind of a deep dive into each of these and understand a lot more about each 92 00:05:56,140 --> 00:05:59,170 of these challenges and how to solve each one in the coming videos. 93 00:05:59,800 --> 00:06:02,020 There's a lot for us to do, so let's get to it.