1 00:00:01,480 --> 00:00:02,420 All right, my friends. 2 00:00:02,440 --> 00:00:06,460 Time for the Big Reveal, let's talk about how we're going to actually implement all these different 3 00:00:06,460 --> 00:00:08,590 parts of our project, so. 4 00:00:09,530 --> 00:00:15,800 We are going to develop each of these major parts of our project as standalone NPM packages, so that 5 00:00:15,800 --> 00:00:20,120 means that for our Seelie that we're going to eventually put together, we're going to create an NPM 6 00:00:20,120 --> 00:00:21,970 package called simply Chibouk. 7 00:00:22,400 --> 00:00:26,360 This will be an NPN package that can be very easily installed on a user's machine. 8 00:00:27,080 --> 00:00:31,070 We're going to create another package called at the local API. 9 00:00:31,520 --> 00:00:36,200 That package is going to contain all the code, all the implementation needed for our local Express 10 00:00:36,200 --> 00:00:36,690 API. 11 00:00:37,580 --> 00:00:41,540 Remember, we are not actually going to build this public version of our Express API, but I'm going 12 00:00:41,540 --> 00:00:43,500 to leave it on these diagrams just as an example. 13 00:00:43,670 --> 00:00:48,100 So if we're building this, we would create another package called JDBC Public API. 14 00:00:48,290 --> 00:00:50,600 And then finally our entire REACT application. 15 00:00:50,870 --> 00:00:56,150 We're going to package up and deploy inside of an NPR module called JDBC Local Client. 16 00:00:57,020 --> 00:01:01,170 So for the rest of this video, we're going to talk about some big benefits of taking this kind of approach. 17 00:01:01,520 --> 00:01:06,960 What we really gain by wrapping up each of these little pieces of functionality inside of an NPM package. 18 00:01:07,640 --> 00:01:13,100 But here's the first very big benefit we established in the last video that there are these kind of 19 00:01:13,100 --> 00:01:16,560 very tenuous connections between each of these pieces of functionality. 20 00:01:17,060 --> 00:01:24,050 So if we develop each of these as a standalone and package, then we can very easily add in each of 21 00:01:24,050 --> 00:01:26,550 these to another sub project as a dependency. 22 00:01:27,110 --> 00:01:31,880 So, for example, our ally needs to launch the local Express API. 23 00:01:32,390 --> 00:01:38,990 So the Seelie has a dependency upon that package so we can create the Seelie and say that it has a dependency 24 00:01:38,990 --> 00:01:43,970 of local express API and then specify what version of that package we want to use. 25 00:01:45,530 --> 00:01:51,350 The local Express API, in turn, depends upon our REACT application so we can install the React app 26 00:01:51,350 --> 00:01:56,930 into our local Express API and specify exactly what version of our REACT application we want to use 27 00:01:56,930 --> 00:01:57,340 as well. 28 00:01:58,440 --> 00:02:03,240 If we were developing the Public Express API, we could also very easily consume the reactor application 29 00:02:03,240 --> 00:02:03,960 from there as well. 30 00:02:04,650 --> 00:02:08,150 So now we can start to see that we've got the standalone reactor application right here. 31 00:02:08,520 --> 00:02:13,140 It can be very easily consumed by as many other parts of our application as we want. 32 00:02:14,030 --> 00:02:17,240 And in turn, each of these parts can be consumed by another part. 33 00:02:18,260 --> 00:02:23,040 And for each of these different dependencies, we can always precisely specify what version we want. 34 00:02:23,460 --> 00:02:28,430 So, for example, if we start to develop our REACT application and add in some new features to it that 35 00:02:28,430 --> 00:02:33,260 are only applicable to, say, the local Express API or the local version of our application, we could 36 00:02:33,260 --> 00:02:35,750 tell the local Express API to use that newer version. 37 00:02:35,960 --> 00:02:39,740 And we can just say, hey, you know what, Public Express API, you don't really need to be making 38 00:02:39,740 --> 00:02:41,010 use of this newer version just yet. 39 00:02:41,030 --> 00:02:42,710 So just stick with the version you have. 40 00:02:43,160 --> 00:02:47,840 So this will allow us to version out each of these different major dependencies of our projects. 41 00:02:49,320 --> 00:02:54,840 The next big benefit to this is that we can very easily start to do three factors and extract logic 42 00:02:54,840 --> 00:02:56,810 that is similar between our different packages. 43 00:02:57,210 --> 00:03:03,000 So, for example, our local Express API and the public one, those both need to have some understanding 44 00:03:03,000 --> 00:03:07,830 of what a cell is, because remember, part of the idea here is that both those APIs would eventually 45 00:03:07,830 --> 00:03:11,280 store a list of cells that belong inside of some notebook. 46 00:03:12,420 --> 00:03:17,700 So we might eventually decide to take all of that kind of cell handling logic and extract it into a 47 00:03:17,700 --> 00:03:23,610 new separate package, we could then very easily share that package between both versions of our API, 48 00:03:23,610 --> 00:03:25,410 both a local one and the public one. 49 00:03:27,180 --> 00:03:32,040 Another big benefit is that if we have, say, our react application or really any other part of our 50 00:03:32,040 --> 00:03:37,230 app and we realize that there's some really interesting part of this application we put together, we 51 00:03:37,230 --> 00:03:43,080 could very easily extract that into a separate package as well and then deploy that as a separate package 52 00:03:43,080 --> 00:03:44,400 and maybe even open source. 53 00:03:44,400 --> 00:03:47,810 It is a really good example of this is inside of our REACT application. 54 00:03:48,090 --> 00:03:51,000 Remember, we put together all that logic around our bundler. 55 00:03:51,450 --> 00:03:53,760 That's all inside the bundler directory right now. 56 00:03:54,330 --> 00:03:56,340 This folder is completely standalone. 57 00:03:56,490 --> 00:03:59,760 It does not import anything else from our entire project. 58 00:04:00,120 --> 00:04:03,120 And the code inside of you is actually really interesting stuff. 59 00:04:03,570 --> 00:04:06,760 Everything we put inside, if you're around doing some bundling inside the browser. 60 00:04:07,080 --> 00:04:09,120 This is very I can't stress it enough. 61 00:04:09,120 --> 00:04:14,850 This is very original work and there's not really many prior examples online of doing bundling inside 62 00:04:14,850 --> 00:04:16,220 the browser very effectively. 63 00:04:16,649 --> 00:04:21,000 So we might decide that we want to take this bundle everything right here and share it with the rest 64 00:04:21,000 --> 00:04:27,060 of the world so we could take just this bundler directory, extract it into a separate little sub project, 65 00:04:27,750 --> 00:04:33,630 rate that as a module deployed off to NPM, publish it on GitHub and open source it and say, hey, 66 00:04:33,630 --> 00:04:38,190 if anyone else wants to make use of this bundling thing or make improvements to it, there you go. 67 00:04:39,510 --> 00:04:44,850 And then we can very easily import that separate bundler package back into our REACT application. 68 00:04:46,960 --> 00:04:51,550 Yet another big benefit here, and this one is a little bit more obvious, if we are looking at a larger 69 00:04:51,550 --> 00:04:55,840 company, we can much more easily have different teams, manage each sub project. 70 00:04:56,230 --> 00:05:02,470 So we might have one team or just one engineer in charge of the local Express API, another one in charge 71 00:05:02,470 --> 00:05:03,860 of the public Express API. 72 00:05:04,060 --> 00:05:08,620 We have a front end team in charge of the reactor application by itself and maybe just one engineer 73 00:05:08,620 --> 00:05:13,420 in charge of the CLI or maybe the Seelie just never really gets touched because maybe it just just doesn't 74 00:05:13,420 --> 00:05:14,320 change that often. 75 00:05:16,840 --> 00:05:21,310 One last big benefit here, just in case you're kind of worried about this, if we ever have a package 76 00:05:21,310 --> 00:05:25,870 that has some really sensitive business logic inside of it, it's absolutely trivial to make sure that 77 00:05:25,870 --> 00:05:28,800 that particular package does not get shared with the outside world. 78 00:05:29,200 --> 00:05:34,600 So, for example, our public Express API and remember, the word public here just means that it's accessible 79 00:05:34,600 --> 00:05:35,200 by anyone. 80 00:05:35,200 --> 00:05:38,980 Once it is deployed, there might eventually be some code inside there that is very sensitive. 81 00:05:39,310 --> 00:05:43,870 So some code around authentication or something like that, we might want to make sure that no one else 82 00:05:43,870 --> 00:05:45,280 can very easily see that code. 83 00:05:45,970 --> 00:05:52,390 So we can very easily mark this package as private so that it is not publicly available on NPM for just 84 00:05:52,390 --> 00:05:54,400 anyone out there to download and install. 85 00:05:55,710 --> 00:05:59,810 That's going to make sure that nobody can just very easily take a look at the code inside of our public 86 00:05:59,810 --> 00:06:00,440 API. 87 00:06:02,090 --> 00:06:08,300 So this is pretty much it I've outlined a couple of big benefits to this approach, obviously this approach 88 00:06:08,300 --> 00:06:10,280 is extremely complicated. 89 00:06:10,280 --> 00:06:15,290 It is way more complicated than just adding in a little bit more code to our REACT app application. 90 00:06:15,590 --> 00:06:18,820 But there are many just incredible benefits to this along the way. 91 00:06:18,860 --> 00:06:21,500 So with that in mind, just a very quick disclaimer here. 92 00:06:21,770 --> 00:06:24,140 First off, once again, I want to repeat it just one more time. 93 00:06:24,140 --> 00:06:26,690 We are not going to be building that public express API part. 94 00:06:26,900 --> 00:06:30,200 That is just an example of how we might expand this application in the future. 95 00:06:30,380 --> 00:06:35,300 And if we were building that, using this multi package approach would be absolutely invaluable. 96 00:06:36,680 --> 00:06:42,530 Second thing, just another very big disclaimer here, the approach I'm showing you here is very overengineered. 97 00:06:42,780 --> 00:06:47,870 It is way more complex and needs to be, especially because we are not putting in this public express 98 00:06:47,870 --> 00:06:48,590 API part. 99 00:06:49,010 --> 00:06:53,630 So it is overengineer just keep in mind it's going to feel very often like we are doing a lot of extra 100 00:06:53,630 --> 00:06:55,430 work without a lot of benefits. 101 00:06:55,610 --> 00:06:56,330 And that is true. 102 00:06:56,340 --> 00:07:01,760 We really are doing a lot of extra work here, way more than we need to do for this particular application 103 00:07:01,760 --> 00:07:02,840 as it stands right now. 104 00:07:03,730 --> 00:07:07,570 The reason we are taking this approach, the reason we are doing everything way more complicated is 105 00:07:07,570 --> 00:07:13,630 because, well, this is a course and so in a course, I can very easily give you a lot of tips, a 106 00:07:13,630 --> 00:07:17,160 lot of guidance, a lot of direction on the best way to do these things. 107 00:07:17,470 --> 00:07:21,940 So personally, I think it makes a lot more sense for me to show you the more complicated approach here. 108 00:07:21,940 --> 00:07:26,530 And, of course, because I can give you all this extra guidance right away as opposed to you trying 109 00:07:26,530 --> 00:07:31,240 to implement this kind of thing on your own project and just being a little bit more having a harder 110 00:07:31,240 --> 00:07:32,550 or tougher time doing it. 111 00:07:33,130 --> 00:07:37,480 So the whole reason I show you this diagram right here is really to just highlight that a lot of stuff 112 00:07:37,480 --> 00:07:39,580 is going to be very complicated. 113 00:07:39,580 --> 00:07:42,520 And I just want you to understand, yes, it is complicated. 114 00:07:42,520 --> 00:07:44,430 It is more complicated than it needs to be. 115 00:07:44,770 --> 00:07:45,760 Just keep that in mind. 116 00:07:47,020 --> 00:07:52,390 OK, so now that we've got the general idea here, obviously the question very quickly becomes, well, 117 00:07:52,660 --> 00:07:56,980 how are we going to set up all these different packages and how are we going to do any kind of local 118 00:07:56,980 --> 00:07:57,900 development on them? 119 00:07:58,270 --> 00:08:00,970 How is this all going to come together in any practical way? 120 00:08:01,360 --> 00:08:03,580 Well, of course, that is the next very big question. 121 00:08:03,610 --> 00:08:04,840 So let's take a pause here. 122 00:08:04,840 --> 00:08:09,730 Take a look in the next video at a couple of diagrams and understand exactly how we're going to manage 123 00:08:09,910 --> 00:08:11,320 all of these different projects.