1 00:00:01,080 --> 00:00:04,320 Now that we understand the very easy way of putting all the stuff together, we're going to take a look 2 00:00:04,320 --> 00:00:06,030 at a much more complicated solution. 3 00:00:06,420 --> 00:00:09,030 In this course, we're going to use the more complicated solution. 4 00:00:09,330 --> 00:00:13,860 We're going to take a look at a few diagrams in this video and understand why we would ever want to 5 00:00:13,860 --> 00:00:15,900 use this more complicated solution. 6 00:00:16,320 --> 00:00:18,960 I'm not just going to come out and say right away, hey, here's what we're doing. 7 00:00:19,090 --> 00:00:23,640 I first want you to understand why we might want to take a more complicated approach at all. 8 00:00:24,480 --> 00:00:29,280 OK, so first, a very quick review of how we are really intending a user to use our application right 9 00:00:29,280 --> 00:00:29,550 now. 10 00:00:30,010 --> 00:00:36,180 So our goal is to allow a user to run something like Northparkes JDBC surf that is going to run some 11 00:00:36,180 --> 00:00:40,980 locally installed module on the user's computer when that module runs. 12 00:00:41,010 --> 00:00:42,830 So this is really our Seelie right here. 13 00:00:42,840 --> 00:00:45,840 We want the Seelie to start up a local Express API. 14 00:00:46,300 --> 00:00:49,920 This local Express API is going to modify some file. 15 00:00:49,920 --> 00:00:53,520 Maybe it's called Notebook's, maybe it's called my notes. 16 00:00:53,520 --> 00:00:54,840 Dot just doesn't really matter. 17 00:00:54,870 --> 00:00:57,990 That is a file that's going to contain all the user's cells. 18 00:00:58,020 --> 00:01:00,360 So the raw code, the raw text for them as well. 19 00:01:01,170 --> 00:01:05,459 The Express API is also making our REACT application available inside the browser as well. 20 00:01:06,400 --> 00:01:10,120 So this is pretty much where we kind of understand things to be right now. 21 00:01:11,370 --> 00:01:16,890 But I want to imagine how a user might eventually want to use our application in the future with this 22 00:01:16,890 --> 00:01:21,060 current setup that we are looking at, we're really just saying that a user can only ever make use of 23 00:01:21,060 --> 00:01:24,000 our Facebook application on their local machine. 24 00:01:25,290 --> 00:01:30,660 So what would happen if a user starts to write out a series of notes inside of one of their notebooks 25 00:01:31,290 --> 00:01:36,030 with some really awesome notes inside of it, maybe that they write out a full tutorial on how to use 26 00:01:36,030 --> 00:01:40,020 react or something like that, and they've got an awesome notebook that they want to share with the 27 00:01:40,020 --> 00:01:40,850 rest of the world. 28 00:01:41,700 --> 00:01:44,290 How would we allow a user to share this thing effectively? 29 00:01:44,580 --> 00:01:49,260 We are currently writing all this cell data into this notebook file, or at least that's what we plan 30 00:01:49,260 --> 00:01:49,660 on doing. 31 00:01:49,950 --> 00:01:54,930 How would we allow a user to share that information with other people across the world without requiring 32 00:01:54,930 --> 00:01:57,870 them to first install Gebek onto their local machine? 33 00:01:58,620 --> 00:02:00,910 This is a big question I want to think about for just a moment. 34 00:02:00,930 --> 00:02:03,990 How would we allow a user to share these notebooks? 35 00:02:04,770 --> 00:02:10,080 Well, let's imagine for just a second that we want to expand our application in a very dramatic way, 36 00:02:10,650 --> 00:02:16,740 maybe in addition to allowing a user to run locally on their machine, maybe we also have some kind 37 00:02:16,740 --> 00:02:22,710 of public API as well, or a public diploid version of our JUMBUCK application. 38 00:02:24,420 --> 00:02:29,580 So in other words, in order to share this notebook with other people across the world, maybe adding 39 00:02:29,580 --> 00:02:35,790 an additional command to our books July, maybe something like Gebek publish, so user would be able 40 00:02:35,790 --> 00:02:39,450 to run something like JDBC, publish and then a file that they want to publish. 41 00:02:40,110 --> 00:02:44,010 We then might upload that file to some public API that you and I manage. 42 00:02:44,310 --> 00:02:49,080 And then once we've uploaded that file, we could post that file and all the notes inside of it at some 43 00:02:49,080 --> 00:02:54,000 static address like, say, JDBC, dotcom, some ID for that particular notebook. 44 00:02:54,390 --> 00:03:00,060 A user could then take this URL right here, share with other users and say, hey, you go to this address 45 00:03:00,060 --> 00:03:02,910 and take a look at this really awesome notebook I put together. 46 00:03:03,500 --> 00:03:06,090 So I think that this would be absolutely awesome. 47 00:03:07,110 --> 00:03:11,640 If we had something like this, this would really allow you and I to expand this application in dramatic 48 00:03:11,640 --> 00:03:15,150 ways, we've now got a very easy way that users can share notebooks. 49 00:03:15,420 --> 00:03:19,410 We can maybe allow users to make changes to other people's notebooks, stuff like that. 50 00:03:20,550 --> 00:03:24,090 But if we want to implement something like this, that's really kind of implying that you and I are 51 00:03:24,090 --> 00:03:29,790 going to put together some kind of public outside Express API or any kind of API, doesn't necessarily 52 00:03:29,790 --> 00:03:30,600 have to be express. 53 00:03:31,050 --> 00:03:34,920 You and I might host this at something like JDBC, dotcom or something like that. 54 00:03:35,340 --> 00:03:39,480 Not to be clear, this is a completely separate server that you and I would manage. 55 00:03:39,690 --> 00:03:42,270 It is running on some publicly hosted domain. 56 00:03:42,600 --> 00:03:45,840 It is running on Google Cloud or RWC or something like that. 57 00:03:46,350 --> 00:03:51,840 This API right here is completely separate from the local express API that is running on a user's machine. 58 00:03:52,110 --> 00:03:57,570 This API right here, this is only about reading and writing sells to a single file and serving up the 59 00:03:57,570 --> 00:03:58,460 react application. 60 00:03:59,040 --> 00:04:02,420 This public API right here is going to do kind of all that same stuff. 61 00:04:02,430 --> 00:04:06,930 It can serve up a list of cells save sells, it can serve up the react application. 62 00:04:07,110 --> 00:04:10,110 But we might want to to have a lot of additional functionality as well. 63 00:04:10,470 --> 00:04:15,540 For example, we might want to require a user to log in or sign up to our application before we ever 64 00:04:15,540 --> 00:04:16,920 allow them to publish a notebook. 65 00:04:17,160 --> 00:04:21,630 We might want to have some series of permissions or something like that that decides whether or not 66 00:04:21,630 --> 00:04:27,810 a user is allowed to edit a notebook hosted at Gebo Dotcom or just other features such as that. 67 00:04:29,620 --> 00:04:33,580 Now, to be clear, we are not going to add in this thing inside this course, this is just really an 68 00:04:33,580 --> 00:04:36,610 example of some way that we might want to expand our application in the future. 69 00:04:37,210 --> 00:04:42,220 Now that we've got an idea of this kind of additional piece of technology or this additional server 70 00:04:42,220 --> 00:04:45,790 that we really need to add into our project, how would we really add this in? 71 00:04:46,830 --> 00:04:50,340 Well, I think that we can start to consider all the different parts of our application that we've kind 72 00:04:50,340 --> 00:04:56,340 of established that we need, we've got the Seelie, which needs to know how to start up the local API 73 00:04:56,790 --> 00:04:59,400 so user can edit a notebook locally on their machine. 74 00:05:00,120 --> 00:05:04,280 Seelie also needs to know how to publish a notebook to our public API. 75 00:05:04,710 --> 00:05:08,610 So in other words, how to take the contents of some file like this thing right here and send it off 76 00:05:08,610 --> 00:05:11,610 to our public API hosted at Baucom. 77 00:05:12,990 --> 00:05:19,230 So the Seelie now really has a tie directly to the local Express API and to the Public Express API. 78 00:05:20,220 --> 00:05:25,440 The local API needs to be able to serve the react application and save and load cells to and from a 79 00:05:25,440 --> 00:05:25,830 file. 80 00:05:26,890 --> 00:05:30,140 The public express API needs to be able to serve up to react up as well. 81 00:05:30,580 --> 00:05:32,340 It needs to also save and load cells. 82 00:05:32,350 --> 00:05:35,470 But in this case, we don't really have to save and load these cells to a file. 83 00:05:35,470 --> 00:05:38,110 Instead, we can just save them inside of a database or something like that. 84 00:05:38,620 --> 00:05:42,460 The whole file requirement that we've been talking about here is just to make it easier for users to 85 00:05:42,580 --> 00:05:45,460 share these files or commit them to get in stuff like that. 86 00:05:46,880 --> 00:05:51,380 But the Public Express API is also going to have some additional functionality that it requires, for 87 00:05:51,380 --> 00:05:53,790 example, beyond the local Express API. 88 00:05:53,930 --> 00:05:58,750 It might also need to handle authentication, permissions, some other stuff as well. 89 00:05:58,760 --> 00:06:00,740 It might need some kind of marketing page. 90 00:06:01,190 --> 00:06:04,310 So something to explain what all this stuff is and so on. 91 00:06:05,860 --> 00:06:10,750 And then finally, the last part is our REACT application, the REACT application needs to make its 92 00:06:10,750 --> 00:06:17,170 production assets available either to the local API so the user can run the reactor up on the machine. 93 00:06:17,530 --> 00:06:21,750 But it might also need to make all of its production assets available to the public API as well. 94 00:06:21,760 --> 00:06:27,220 So we can actually go to, say, Jay Bookham and see a notebook loaded up on the screen over there as 95 00:06:27,220 --> 00:06:27,550 well. 96 00:06:28,530 --> 00:06:33,150 So now, whereas before when we were saying just a moment ago that we could just add in a script to 97 00:06:33,150 --> 00:06:38,280 our ReachOut project in the scene, like a very easy and simple way to handle everything, now it's 98 00:06:38,280 --> 00:06:42,960 seeming like we really want to have these more distinct parts, these very different things. 99 00:06:43,590 --> 00:06:48,360 And some of these different things have very similar shared functionality, such as the local and the 100 00:06:48,360 --> 00:06:49,290 Express API. 101 00:06:49,620 --> 00:06:54,330 Those both need to be able to serve up the REACT application and have some logic inside them about saving 102 00:06:54,330 --> 00:06:55,200 and loading cells. 103 00:06:55,590 --> 00:06:57,270 But they're also slightly different as well. 104 00:06:57,770 --> 00:07:00,350 The local API is only ever going to run on a user's machine. 105 00:07:00,360 --> 00:07:03,120 It doesn't need to know anything about authentication or anything like that. 106 00:07:03,990 --> 00:07:08,160 In addition, the Seelie, whereas before it seemed like, well, yeah, we could just write out some 107 00:07:08,160 --> 00:07:13,260 logic inside of the server command or something like that to just very simply start up a local node 108 00:07:13,260 --> 00:07:13,830 API. 109 00:07:14,100 --> 00:07:17,600 Now we're kind of saying that the cloud is going to have more functionality tied to it. 110 00:07:17,930 --> 00:07:23,310 Not only needs to somehow start up a local API, but also is going to have some logic inside there to 111 00:07:23,310 --> 00:07:27,150 understand how to take a notebook file and publish it off to an API as well. 112 00:07:27,570 --> 00:07:32,820 So no longer does it necessarily make a lot of sense to almost embed this thing into the local Express 113 00:07:32,820 --> 00:07:33,280 API. 114 00:07:33,300 --> 00:07:35,940 It's really kind of its own standalone thing as well. 115 00:07:36,910 --> 00:07:41,860 And then finally, the react application no longer does it really make sense to you embed, say, the 116 00:07:42,040 --> 00:07:47,260 local Express API inside there doesn't really make any sense to try to embed the Seelie inside there 117 00:07:47,260 --> 00:07:50,500 either, because, again, it's really its own single thing. 118 00:07:50,680 --> 00:07:54,970 And we need to take those production assets from it and make them available to both versions of our 119 00:07:54,970 --> 00:07:55,480 API. 120 00:07:56,510 --> 00:07:58,040 So I think that at this point in time. 121 00:07:58,990 --> 00:08:04,030 It doesn't really make a lot of sense to try to add in all these additional pieces of functionality 122 00:08:04,240 --> 00:08:06,390 direct into our ReachOut project. 123 00:08:07,030 --> 00:08:08,190 I don't think it would make a lot of sense. 124 00:08:08,210 --> 00:08:12,550 You would just have, say, a serve command inside there anymore that tries to do all this stuff. 125 00:08:12,850 --> 00:08:18,760 Instead, the reactive project is really just about the react application itself, some front end components, 126 00:08:18,760 --> 00:08:19,420 stuff like that. 127 00:08:19,630 --> 00:08:24,430 And I think it really doesn't make a lot of sense to try to write in a lot of logic inside there around, 128 00:08:24,430 --> 00:08:31,750 say, starting up a local API or publishing any files around writing and reading from some file on the 129 00:08:31,750 --> 00:08:36,400 local machine, or most especially around handling authentication or stuff like that, which we would 130 00:08:36,400 --> 00:08:37,840 want to do in this public API. 131 00:08:38,760 --> 00:08:43,080 So at this point in time, it really seems like we really would want to split each of these separate 132 00:08:43,080 --> 00:08:49,050 parts of our project out into these standalone kind of separate entities, but still kind of have some 133 00:08:49,050 --> 00:08:54,330 tenuous ties between them, because we still want this Seelie to be able to start up the local Express 134 00:08:54,330 --> 00:08:54,830 API. 135 00:08:55,260 --> 00:09:00,630 We still want this local Express API to access some of the assets created by our REACT application. 136 00:09:00,960 --> 00:09:06,270 And we probably still want this Public Express API to read some of these react assets as well. 137 00:09:06,960 --> 00:09:08,760 So again, they're kind, they're standalone things. 138 00:09:08,760 --> 00:09:13,740 They're kind of all separate projects, but they still kind of depend upon each other just a little 139 00:09:13,740 --> 00:09:14,130 bit. 140 00:09:15,290 --> 00:09:19,100 All right, so at this point in time, I just want to say I know a lot of this stuff is a little bit 141 00:09:19,100 --> 00:09:21,860 esoteric, a little bit kind of crazy and hard to understand. 142 00:09:22,100 --> 00:09:27,290 All I'm trying to do right here is establish a case for making these different parts of our applications 143 00:09:27,440 --> 00:09:33,560 into separate kind of standalone small projects, as opposed to trying to combine everything together 144 00:09:33,680 --> 00:09:35,360 into one single project. 145 00:09:35,720 --> 00:09:38,330 So that's all I really want you to understand at this point. 146 00:09:39,110 --> 00:09:41,360 The other thing I want to just make sure is super crystal clear. 147 00:09:41,540 --> 00:09:45,140 Once again, we are not going to be building this public express API thing. 148 00:09:45,410 --> 00:09:49,300 This is just an example of how we might want to expand our application in the future. 149 00:09:49,790 --> 00:09:54,230 It is incredibly possible that you might continue developing this book thing that we're building inside 150 00:09:54,230 --> 00:09:57,650 this course and eventually say, you know what, this is an awesome developer tool. 151 00:09:57,810 --> 00:10:00,760 I think that this could work as a company or a startup or something like that. 152 00:10:01,010 --> 00:10:05,090 And so I'm just kind of imagining down the road, if you continue developing a playbook, I think you 153 00:10:05,090 --> 00:10:06,830 might eventually want something like this. 154 00:10:06,860 --> 00:10:07,670 So we're not building it. 155 00:10:07,670 --> 00:10:11,840 But I think it's incredibly possible that if this was a real application we were building, you would 156 00:10:11,840 --> 00:10:14,090 want to put something like this together at some point in time. 157 00:10:15,460 --> 00:10:21,010 OK, so, again, at this point, all we need to understand, these are all separate things, they kind 158 00:10:21,010 --> 00:10:22,150 of depend upon each other. 159 00:10:22,330 --> 00:10:23,760 So that mind quick pause right here. 160 00:10:23,770 --> 00:10:27,550 We're going to come back next video and take a look at a better way of architecting your application 161 00:10:27,820 --> 00:10:30,130 and kind of taking this whole thing into account.