Check out a free preview of the full Organizing JavaScript Functionality course:
The "Creating a Random Number Module" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Kyle walks through the code for adding an additional module to the application. This module will generate a random number using the Math.random() function.

Get Unlimited Access Now

Transcript from the "Creating a Random Number Module" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: But let's decide that we want to make ourselves, just cause I'm not creative enough to come up with something that we have time for that's like the secure phrase generation. So I'm just literally going to create a random number module. Which does nothing but call math.random. But we're gonna illustrate again this point of creating some code and using it in both places, okay.

[00:00:30]
>> Kyle Simpson: So what we wanna do is first come up here to our place where I've got my hybrid server browser modules. And you notice I have one here that I was kind of already a placeholder anticipation. So I'm just gonna uncomment that, we're gonna call our random number thing Foo for now.

[00:00:49]
>> Kyle Simpson: So, uncomment that variable and then come down here, I've got it commented out. You can uncomment that line which is going to expect to find, as you see on line 67 there, it's gonna expect to find a capital F, Foo.js file in the web JS directory. It's a place where I'm putting my hybrid shared modules.

[00:01:11] That file doesn't exist but we're gonna create it next. So I don't wanna retype all that boilerplate code. So what I'm going to do is open up one of those ones that already exists in that location so, come to the JS directory. Let's see what's a good one to use, let's use view.js just open up view.js.

[00:01:36] And let's take out the stuff in the inner contents of view JS.
>> Kyle Simpson: And save, don't save overview cuz you need it. Save as and duplicate it and call it Foo.js.
>> Kyle Simpson: One little minor change, you'll wanna make sure you do is change that word view there on line 5 change it to the word Foo.

[00:02:09] So we get the proper naming for our module. Okay. So from a perspective of defining ourselves a module we wanna have some internal characteristics inside of our module. And then we wanna have a public API that we can interact with in some way with our module. So my internal characteristics are let's suggest that I have a function that I call random.

[00:02:46]
>> Kyle Simpson: And its job is to return me a Math.random number. Okay.
>> Kyle Simpson: I know that's not terribly interesting. I'm just showing you the pattern for how to create something that we can reuse. Now if you were not using the UMD style if you wanted to write your code in CommonJS style in known.

[00:03:13] Or you wanted to write an AMD style. Then the only thing that would be extra on top of what we're doing here, is that you'd need to have browser of running. And browser would take your file much like the templates are automatically converted. Browser if I would have a watch that would take this file and automatically convert it to something that would run in the browser.

[00:03:33] I just didn't want that step involved in our thought processes today. And that's why I've chosen the UMD. But there's really no difference in terms of the concept of what's happening on the inside. So we need a public API to express that or to expose that function. So we'll call that public API random.

[00:03:59] Now I want to use that information on both the server and on the client. I have a module now that's being loaded in to my server. But I actually want to invoke it and use it so I'm going to come back to the server JS file. And I want to set up,

[00:04:25]
>> Kyle Simpson: Trying to figure out the best place to put this I think it's going to go right after load page. So right before the default route we're gonna make a new route. Essentially, we're gonna make a foo API, a foo API call. Okay, so I'm gonna say routes.stop push.

[00:04:52]
>> Kyle Simpson: Putting away a little comment.
>> Kyle Simpson: And then this route Is a function which we'll call the FooRoute. Takes a request object and a response object. This is exactly the same sort of thing you do if you were going to define a new route with express or any of those other frameworks.

[00:05:20] You'd have to do some sort of middleware handler for it. So that's what we're doing we're making a little handler a little middleware for it. Now I need to figure out if the requests that's come in is one that I recognize as being something that I want to do.

[00:05:36] So I'm gonna say if req.url, that's the incoming url, if It is equal to /Foo, the capital F. And for just good measure. Well no, let's just be simple, req.url if it's /Foo. So that means we recognize that this is a route that we want to handle. Okay.

[00:06:04] So what I'm going to do, then, is say and I'm going to invoke and use my Foo module, so I have a Foo there that I can just say Foo.random on, right, need to pull out a number. Since this is an API request, basically what I need to do is package it up as a JSON and send it back to the server.

[00:06:35] I mean send it back to the browser. Okay this is all node stuff so basically what we're going to do is say, res.writeHead and we wanna give it the 200 status response. And then we wanna give it a Content-Type header of application JSON.
>> Kyle Simpson: And then I want to say res.end and the final data that I'm wanna send along.

[00:07:15] I'm going to stringify an object
>> Kyle Simpson: Which has one property in it called answer that has the value num that I created,
>> Kyle Simpson: Is everybody following? Okay. So, that's going to package up a JSON object with one property in it that has the response that we got. Now, I made this simple.

[00:07:53] This was a synchronous thing that I could answer cuz it's just random number generation. Had that needed to be something like a database request, which many real API calls do, we might have been calling off to a Foo module and asking it to do some stuff and waiting for it to respond.

[00:08:12] And it's that asynchronous process that we'd wanna invoke something like a promise system so that it was clean and clear for us instead of doing a bunch of nested call-backs. A promise system. So if instead of getting num back, I had gotten a promise back, then I would have said something like .then.

[00:08:31] And this code here would have been inside of my .then cuz I would only want to run this when I was finished with the promise. But we keeping things simple, we're not doing an asynchronous module at the moment. So I just can manually get that random number right away.

[00:08:49]
>> Kyle Simpson: And then these three lines of code are really, I mean these four lines of code or really nothing special at all. That's exactly how node does it. It's exactly how any framework out there sends out their responses.
>> Kyle Simpson: So the code from lines 186 to 189 is code that doesn't need to be shared with the browser because it doesn't even make any sense in a browser context.

[00:09:19] Talking about status codes and header managements, none of that needs to be. But if there was something that we were doing there that we would wanna share. We'd wanna offload that into a module like we've offloaded Foo. Does everybody see that? So you wanna look for places where there is something that does make sense to do in both and not repeat yourself.

[00:09:41] And the basic way that I'm suggesting you go about that is, whenever there's something that you wanna do in multiple places, that is, both places, put it in its own module. And do it like I just showed you, how we did that Foo. Put a little wrapper round it, or invoke browser, fire or whatever, but put that code inside of its own module.

[00:09:59] Here we just have this one touch point, this Foo.random that we wanna get.
>> Kyle Simpson: So we've essentially made ourselves a route for an API endpoint.
>> Kyle Simpson: But I wanna also.
>> Kyle Simpson: Actually that for now we'll just keep it simple. I keep trying to make it more complex. For now we'll just say our server uses Foo through an API call.