Introduction to Node.js Convert Browser JavaScript Exercise

Transcript from the "Convert Browser JavaScript Exercise" Lesson

[00:00:00]
>> Scott Moss: Exercise 2. This one's going to be legit. So, you're going to fork the repo. So the repo that I mentioned at the beginning of class. So if you haven't, fork it, clone it, however you want to do it, pull it down. Fork it if you want to push it up to GitHub later.

[00:00:14] If you don't want to push it up to GitHub later, you can just clone it and you're good. So get the repo on your machine. Check out to the start branch, there's a branch called start, just check out to that branch. By default the master branch is gonna be listed there and it's got all the solutions on it.

[00:00:26] It's totally fine. You could look at the solutions if you want to but the start branch is where you're gonna be working. So check out the start branch. The check the read me on how to run test. Look at that readme. There will be, for exercise 2, there will be instructions on what command you need to run to run tests.

[00:00:43] For this exercise you're going to be running tests, and we'll talk about that. You're gonna look at that command and be like, what the hell is this? We never talked about this. That's fine. Just run the command. We're gonna talk about that command later. And what it's actually doing.

[00:00:55] But just run that command to run tests. If you know what it's doing, that's fantastic. But we're going to talk about it later. So if you have questions save them for us for the next before we come back because I don't want to put you down that wrote that the path for that right now because it's like a rabbit hole.

[00:01:10] So your tasks are to fix and convert the three JavaScript files and exercises / module slides browser. So it's gonna be three JavaScript files in there. And they all have code in them that's meant for the browser. You need to convert them to Node code, so there's a folder right there next to the browser called Node.

[00:01:33] You need to grab each one of those files and make the appropriate file in Node folder and get rid of all the browser stuff so it works. And the way you know it works is if you run the test command and you pass. If the test is still failing then you didn't fix it.

[00:01:47] So once you get the tests to pass then your good. You will see all green. If the test didn't pass then, yeah. There might be some other tests on there for some other exercise. Just ignore those. Let those fail. You only want to look at the test that is for those three files.

[00:02:03] So again, the test command is in the README. So fix those, and yeah, make sure all the tests pass by running the test command. So I'm gonna walk through it right quick so you can see what I'm talking about. So intro-to-node and I'm going to check out to start, code.

[00:02:30] So again if you look at the exercise folder you will see a modules folder and if you click in there you will see two folders. Browser and Node and browser is literally a working browser app. I mean you could just open this as the html file In the browser and like you'll get like, I guess it isn't thing doesn't want to open with the file browser.

[00:02:52] Yeah, okay, whatever reason is didn't want to open for me. But it's a it's a browser app. You got some script tags in here these three they're loaded in the order they need to. So you need to look at this to see what order they're loaded in because this is going to help you determine how you require your modules and how you export them.

[00:03:07] And then you got this embedded JavaScript file. You don't need to convert this. This is pure browser JavaScript file, it even says it right here, browser only DOM code, don't try to convert this to Node. This is just for the browser. So this is one file you won't be converting, but you do need to convert these three files.

[00:03:22] So if you go look at one of them, I'm not gonna say what's wrong with it, but you can probably look based on what we talked about. There's some things here that just aren't going to work and Node and you need to kind of understand what is it trying to do.

[00:03:34] Like why is it doing Window.App = Window.App? I talked about why people would do that because there wasn't really a module system. So we have to share code somehow so you got to look at that. There's some a lot of Windows stuff happening here. So you need to look at all that, and then if you go to the node code, you got these three files here.

[00:03:55] They're all blank. There's nothing in them, but they're the same name as these files up here. So you need to take the code out of each one of those files, paste it in here and then fix it. Make it to where it works, and again, the way you know it works is when you run these tests.

[00:04:09] They all pass. So again, to run those tests, the command is in the read me, and you'll see right here, the command is gonna be npx jest. So in your terminal, all you gotta do is just run that, npx jest, and you're gonna see, it's gonna start running some tests.

[00:04:28] And then when they are, they just got a fail. They just got a half-failing test. So when those pass, you're good to go. Npx, you didn't install that, but it shipped with Node when you installed it. So Node came with something called npm and npx, we're gonna talk about those in the next lesson, but just use that to test.

[00:04:48] And we're also gonna talk about jest. When we get to testing, but just trust me, just run those commands, and that's how you're going to test. So, the tests you're going to be looking at are going to be the ones that are appropriate for your exercises. So you're going to be looking for exercises where it's only going to be testing those changes and not the other ones.

[00:05:09] So the test will still fail, but that's fine, as long as you get the ones that are important for you to be pass, and you're gonna be good to go.
>> Speaker 2: Which ones are they?
>> Scott Moss: So the test you wanna look for are gonna be, you have a test right here called data.

[00:05:27] So you see describe data, you have one called API, and you have one called get post for user. So if I go back to the failing test, you can see right here jest will say data > users, data > posts, api, getUserById, api > getUserById, all of these right here, app.showUserProfile, yep, all of those.

[00:05:49] So pretty much all of the ones above cuz you have these other ones that say exercises/testing. You're not concerned about those. That's for a future exercise. Don't worry about those. It's just the ones that are for exercises/modules.
>> Scott Moss: So data users, data post, api getUserById, api getUserById. API get post for user.

[00:06:14] App show post for current user. App for show user profile. And again the way you check that, if you just look at the test file, the names are here. The describe and the test, those are the names of the test. So when you see those passing in the print out, they are good.

[00:06:28] Other ones that aren't this name, don't worry about them.
>> Speaker 2: And if you want to open up the index HTML, you can just open it. Like right click and open in finder.
>> Scott Moss: I got it open that in the browser. Yeah, I don't know why that playing wasn't right now.

[00:06:47] There we go. Cool, so, yeah, it's just a regular browser app. It's just, I mean nothing fancy, it's just a browser website. So all that code works. It loads up all the stuff. So now you want to convert that code to Node, but you're not gonna look at it in a browser because Node's not a browser app.

[00:07:03] It's just code, we're just looking at pure code, pure logic, we just want it to work. We want it to not fail. It's just an exercise of converting the things that don't work. So hint you will be using modules here, exporting and requiring. So if you haven't figured that out you will be doing that.

[00:07:18] And then you will be trying to get rid of code that only works in a browser and using it just in Node. So those are two different things, two different things that we talked about in this last lecture that you'll be doing.