Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What You Need

Let’s get our development area set up ready for the coding examples! In this lesson I’ll show you how we’ll be implementing the example projects for each design pattern as a series of RequireJS modules.

Related Links

1.2 What You Need

Hi, folks. In this lesson, we're going to get our development area setup and ready to work through the examples. We're going to be using RequireJS and let's get a basic workflow setup with Node and Bower. You'll need to have Node installed, as well as Git. So first of all, let's create a folder somewhere convenient. I'm going to put mine into my user folder. And I'm just gonna call this jspatterns and inside of this folder, let's create a new folder called JS. We want to initialize NPM in here, so let's run the NPM any command and we can just step through the prompts. And we can also initialize Git. So to do that, lets run the git init command. We'd better also create a .gitignore file, so let's just do that in Vim. And let's ignore the node_modules and bower_components folders. Great. So next up, let's make sure we have Bower installed globally. And now we just need to add a little configuration for Bower. So we can do that using the Bower init command. And again, we'll just walk through the prompts until it's created. So now we need a main entry file, so that require.js can load on modules and we'll need a basic HTML page to get things up and running. What we're also going to do is create an extra file for every example called init.js and let's just take a quick look at the outline of this file. It's very simple, as you can see. Each init file will be a regular AMD module, which contains a callback, which is passed a function called require. This function allows us to load more AMD modules as dependencies. The module will return an object containing a method called init, which will run the example code for the specified example. So now let's create our main entry point. We'll need to add a new file in the JS folder called main.js. And let's add the following placeholder code, first of all. As we progress through the course, we'll gradually fill up the empty array with the init modules to load and we'll be passing these into the function as parameters. So inside the function just after the use strict declaration, we can add in empty object to store references to all of our init modules. Lastly, we'll want to expose a global method that we can run from the browser's console to view an example. So we just need an HTML page now. We can add this to the roots of the project, let's just call it index. And down at the end of the body, we're going to need to load RequireJS and our main.js file. As soon as we've installed RequireJS through Bower, the script file for RequireJS will reside within in the bower_components folder. And let's just go back to the command line now and we can install require using Bower. And let's just make sure that that's been installed So we should now be set up and ready to move on to the first pattern, which we'll look at in the next lesson. We've used a number of different tools so far such as Node, Gits, Bower and RequireJS. Now these aren't key parts of the course, so I haven't gone over what they fall and how to use them in very much detailed at all. I've just done the minimum necessary to bootstrap this course. I would recommend that if you're not familiar with any of these tools, you take a quick look at them now and just make sure you understand what they are and what they're being used for. The RequireJS website is at requirejs.org and it contains all of the information that you'll need to know in order to use RequireJS. Now you don't need to read all of the documentation on the site, but just have a quick look through the start section maybe and you could also take a look at the Bower and Node.js website. Although that's less important, I think RequireJS is probably the bigger tool and the tool that you're gonna want to understand in more detail. So in this lesson, we setup our project folder and initialized NPM and Git in there. We then installed Bower and used that to download RequireJS. And lastly, we just setup a HTML page to run the examples with and hooked up RequireJS. So let's move onto the next session now and get started with our first pattern. Thanks for watching.

Back to the top