Introduction to Node.js Convert Browser JavaScript Solution

Transcript from the "Convert Browser JavaScript Solution" Lesson

[00:00:00]
>> Scott Moss: So you should have gotten something like this from the start branch. And basically, we're just gonna go through file by file and just get rid of some of this stuff and start fixing it, right? So for the API file, I'm just gonna do a side by side.

[00:00:14] So we got this API file, and then we'll have the node 1. So the first thing I'm gonna do, I'm just gonna copy everything, and paste it over. That's step one. Step two, is I'm trying to get rid of everything that I know for sure this is not gonna work.

[00:00:29] And I know anything that has a window on it is just not gonna work. So I'm just gonna get rid of all of that. So the first thing I'm gonna do is get rid of that. And then I'm gonna get rid of window.app and I'm just gonna use good old const.bar.

[00:00:44] I'm also getting rid of window dot set time out, because there is no such thing as window dot set time out. And then I'm also going to get rid of window.app.users and just reference something called users that doesn't exist yet. There's nothing called users in here yet. So I'm guessing we'll have to maybe require this to import this eventually.

[00:01:04] Because it was attached to the window and the windows been acting like our global module systems, if you will. That's what it's been acting like. So if it's already attached to the window, I'm assuming this is were I have to do a module require. So also get rid of that, put a const and do the same thing and get rid of this window, cool, and this one right here.

[00:01:27]
>> Scott Moss: Cool, so, yeah, I just got rid of that. The set timeout is just to simulate some asynchronous thing. I just did that, it's asynchronous, just to throw you off a little bit, but yeah, that's all that is. So obviously, this wouldn't work right now, if I executed this file.

[00:01:41] I mean, for one, it's not actually executing anything. To it's using variables called users and posts that don't exist. And you can see that you might have an error here eventually. And then 3, I'm not exporting anything so we need to export there. So I'm gonna go ahead and export this on to the exports.

[00:02:03] And then I'm gonna go ahead and say export getPostsForUser, and then getUserById. So that's step one to getting this file to work, it still not gonna work. We still gotta come back in, and require some modules, most likely, to get this to work, so we'll come back to it.

[00:02:20] So we'll move on to the next file which is gonna be appJS in the browser, so I'm gonna copy that. And then I'm gonna come over here and open up @JS over here some pasted in, and boom, and this file is also mean to throw you offer that say there is no dom stuff in node, so you might as well, these elements here like whoa there is.

[00:02:46] No dom stuff, so do I get rid of this? What do I do? They're just strings. I'm not doing any dom stuff. There's no dom here. I'm just doing some string stuff. They just look like elements. If you look at the function, it's not actually rendering anything to the dom.

[00:03:01] There's no dom API anywhere inside. Even in the browser code there's no dom API, it's just manipulating strings. So Node can do that too. These div's are just strings. So you wouldn't have to do that, but it'll just get you to think about what Node can and cannot do.

[00:03:16] So if that threw you off, that's because I wanted it to, so sorry. [LAUGH] But the same thing, we get rid of our hacking module system. This pattern is actually something like if you've ever seen a backbone app from like 2012 or 11, you'd see this. You'd see people do window.app or window dot, and then they'll be like window.___$__App.

[00:03:39] [LAUGH] That's the app, right? And they'll do something like that and they'll have to do that on top of every file. And they'll have to say it's either there or make it, because they won't know what order the files load in. So they'll have to make it if it doesn't exist and it's just so bad, so bad.

[00:03:56] But, yeah, this is the early days of a module system. So get rid of that, get rid of this window.app, cuz we don't need that, we'll use const. This window.app right here, we'll also get rid of, because we're going to use some modules most likely. And same thing down here.

[00:04:13] Get rid of this window and this window. Cool, and we'll do the same thing we did before, we'll export, so module.export.
>> Scott Moss: And we got showPostForCurrentUser, and then it was showUserProfile. Cool, so we exported both of those, we got rid of them. Again, we still got to come in here and reference these.

[00:04:44]
>> Scott Moss: These modules that we had to require eventually, so we'll just fix the last one which is data.js, which is exporting some data. So I'll go back over to node data.js and I'll paste that in, and this was pretty simple. You just replace Window.App with module.exports. That's it, and now, exporting this object, done.

[00:05:10] All right, anything else. So now that we're exporting everything, we need to start tying everything together. So I don't need to browse this stuff anymore, so I'm gonna close that one. And now, we're gonna start in the lowest level. So the lowest level is data and the reason that I know that other than the fact that if you look at the html file.

[00:05:28] The data was loaded first, then API, then app. So that's telling me API depended on data and app depended on API, so that's how I know what order these were in. If you don't have html to know that which you would, because it's Node, then you would just follow the require, right?

[00:05:43] There's no require statement in data, so I'm guessing it's probably low level. There's nothing underneath it, cuz it's not requiring anything. So it's like the lowest level of this tree, so, or I just say the leaf, right? So we're gonna start right here on this leaf data, the leaf point of the tree, cuz again, it's not requiring anything, I'm just gonna start right here in this followed appendices.

[00:06:04] So because I'm not requiring anything here, I don't need anything, cool, I'm done. So then I'll look to see, okay, what's using data? What these use data, if I go looking API, you can see that there's this users.fine posts.filter. Data has users and post, so I'm guessing api.js is using data.js.

[00:06:27] So I'll just go ahead and require those. So I'll just say const, users and post equals require, and then relative which will be data and I only got talking about this last time, but you don't have to put it at .js. It's implied, it's always a JS file, so you don't have to put .js.

[00:06:52] Just don't put .js, it's implied only time you got to put file extensions. Is if you start using like Webpack where everything is a module Webpack turns everything into module? I don't want to get too deep in Webpack, but everything's a module, not just JavaScript. You can make SVG a module, or CSS a module, an image a module.

[00:07:08] I mean, any file can be a module. You can even virtualize modules, and have modules that don't exist on a file system, they're modules, it gets nuts. That's when you have these extensions, but we're not doing that. This is just Node, so everything's JavaScript until it's not, and then you would just probably not use the require statement to load in another file.

[00:07:28] You would use the file system to load in another file, and that's what you're gonna be doing on the next exercise, is using the file system. Cool, so you might think you're done here, but you're gonna run into an error. My editor's kinda hinting at it right now.

[00:07:42] It's saying right here posts is declared, but it's value is never read. So I'm like what? Yeah, I read it down here. That's because there's a variable called posts, and its equal, posts.filter. So there's like a shadowing here, right? So you probably want to change this to something else.

[00:07:58] So for lack of thinking of a better name there you go. So there was a shadow there, so that was like a soft issue that you probably wouldn't have found unless, you go like aah what's going on here. Or maybe the const, actually the const might have freaked out or something.

[00:08:14] But, yeah, that was a soft issue that you would have to scratch a little bit to figure out it's like a JavaScript thing. And the reason I left that in there is to get you to understand that it's just JavaScript. It's still the same JavaScript that you have to write, nothing changes.

[00:08:29] The language is still the same. It's just the environment that it runs in and the APIs that are exposed to it. But JavaScript still works the exact same way in node that it did in the browser, if you're using the same version.
>> Scott Moss: Okay, cool. So now, that I have this API, then I would go see what is being, what's requiring this.

[00:08:48] So if I go to, there's only one other file in this app. And I can see the app is getPostsForUser and getUserById. So I'll just say I'll just require those.
>> Scott Moss: Equals, if you have some stuff hooked up in your text editor, you could just tell it the path.

[00:09:07] And you can see, it's bringing out the files for me. So I'll say /api, or I'm sorry, yeah, that's right, /api. And then once I start typing here, it should auto-complete it for me. Yeah, there it is, getPostsForUser, getUserByID. So if you use something like typescript, it's even more than this.

[00:09:23] Typescript will auto populate the imports and requires for you. If you just start typing it will be like I know where that is. Let me bring it in here. So it's something you would get with Java or stuff like that. It's bringing that power, so that should be it.

[00:09:37] And then now, if you would run that test, npx jest. You're gonna get some of this stuff, but the most important thing is that all of these tests passed right here. Exercises/modules/node test as. These other ones are for another exercise and if they're just too noisy for you, you can comment them out.

[00:10:03] But I think you might get an error saying you need to add test to these files, which is why I didn't comment them out. Yeah, so you'll get this other error that says your test suite must contain at least one test. Which is why I didn't want to comment them out, cuz I think that might even be more confusing.

[00:10:16] So, yeah, the most important thing is that these tests pass. Exercises, modules, node, test yes. The ones that are specifically in this test file inside the node folder. No, so I had someone ask me what exactly is npx jest doing? So you might have noticed that when I ran the command it just did it instantly, whereas when you ran the command it didn't, right?

[00:10:37] It looks like it's downloading something, right? Yeah, and that's because I didn't teach you about NPM yet. So I didn't tell you how to [COUGH]. I didn't teach you about package.json, or Node modules, or NPM, or remote modules. So what end up. You didn't know, but what you did was actually you just used a remote module called Jest.

[00:10:56] That's a testing framework and we're gonna talk about that in a testing exercise. And then npx. That was giving you for free when you installed node node ships with a node binary NPM binary and NPX binary. That's actually new what NPX does is it allows you to run CLIs that are installed locally inside of a project as global CLIs.

[00:11:18] So for instance, the node CLI is a global CLI. You can type in node anywhere and it'll work. But Jest is one that we downloaded locally. You didn't do it, but it's already in there. It was one that we downloaded locally, so if you wanted to use Jest, you couldn't just type in js, because it's a local CLI in this project.

[00:11:36] So normally, what you would have to do is you would have to type out the full path like node modules and we'll talk about those in a minute. And then bin.
>> Scott Moss: No, no, don't do that. .bin, and then jest. You'll type that whole thing out just to run that.

[00:11:53] And that's kind of annoying, so NPM's just like, well, we're gonna make a CLI that just looks for it. So this will run the local jest inside your local folder, inside of the node module, so that's one thing. The second thing that it did was, because you didn't install any modules, every time you ran this it will install them before it executes.

[00:12:08] And notice that none of these modules existed, so npx was smart enough to know like, these modules haven't been downloaded yet. So that time that you were experiencing when you ran this command was the remote modules being downloaded. And all the dependencies for those remote modules, and all the dependencies for those dependencies, and all the dependencies for those dependencies.

[00:12:25] That's why it took so long. So Jest is one dependency, but it might have a tree of dependencies. So that's why every time you ran the command, it was doing that. You won't have to do that, because from going forward, we're gonna learn how to just install our modules once.

[00:12:39] And you can just have it run instantly like this.
>> Scott Moss: Cool, yo?
>> Speaker 2: For when you required the files-
>> Scott Moss: Yes?
>> Speaker 2: [CROSSTALK] each other?
>> Scott Moss: They're requiring the files, yeah. What about it?
>> Speaker 2: Why did you require the specific functions compared to just API?
>> Scott Moss: Yeah, it was a style thing.

[00:13:03] The reason I did it was because when I did the initial refactor, you can see for instance I have this function that already says get posts for user. So I just wanted to go ahead and do a require without having to go back down here and be like API, yeah.

[00:13:16] That's all, it's just a style thing, it's up to you. Yeah, I just like to be concise, and explicit, and stuff like that. But sometimes you can't get away from that. Like if you get it's like Advanced testing like mocking things out. Sometimes you have these objects and that can get pretty crazy.

[00:13:34] But for this example now, I just, destructured it, kept it clean and again the same answers that I just walked through on the master branch and another branch called solution. So you can check out to those branches at any time and see the solution that I just did and you should be good to go.