1. Introduction

1.1 Introduction

Hello, and welcome to RequireJS Explained. My name is Daniel Wellman and I'm a software engineer at Microsoft and I live in the UK. If you have any questions or comments about this course, I'd be thrilled to hear them. So feel free to reach out to me on Twitter, I'm @danwellman, all one word. RequireJS can load both scripts and AMD modules, and in this course we're going to look at how we can use it to create more maintainable JavaScript. AMD stands for Asynchronous Module Definition, and is an API that defines a specification for creating JavaScript modules. You've probably heard of the module pattern, which is commonly used on the web to encapsulate JavaScript to protect it from the global scope and prevent creating global variables. AMD is an advanced form of this approach that specifies how much should be created, how they can export values, and how they can load dependencies. Globals are one problem, but other problems that motivated the creation of AMD include the fact that JavaScript is being used in increasingly complex applications. More complex apps tend to be bigger, so we need some way that makes it easier to organize and manage our code, in a way that's maintainable. AMD modules are loaded asynchronously. Hence the A in AMD. This means that they can be loaded in parallel without blocking the rest of the app, which in turn makes the app nice and fast. As well as AMD, another JavaScript module loader is part of CommonJS, which specifies a module ecosystem for JavaScript. CommonJS came first and brought the require method and exports object to the table. It was created with JavaScript on the server in mind however, and it doesn't work very well in the browser without additional third party tools like browserify. AMD was created directly to work in browsers and bring the benefits of a module specification to front-end development. Building on some of the ideas of CommonJS, AMD brings the define method as a way of defining modules. AMD is flexible in some ways because we can borrow some techniques that are commonly used with CommonJS, such as how dependencies can be specified. RequireJS comes with an optimizer that can build a single minified file that contains all of our modules. This optimizer is called r.js, and can be used with node. In this introductory lesson, we looked at what AMD actually is and saw that it is an API that we can use to create JavaScript modules. We saw that it was created to address the short-comings of using CommonJS in the browser. And we learned a little bit about the benefits that it can bring to our code. We can define self-contained modules of code that don't create global variables. We can organize and structure our code in a much better way. And we can create an optimized build that combines all of our modules into a single file, and minifies it. Three great reasons to use RequireJS. Thanks for watching.

1.2 What You Need

Hi folks, let's get our development area ready for our example app. The full source of the app is up on GitHub at https://github.com/dan-wellman/to-do. And that's there for reference purposes, but for better understanding, I'd recommend that you follow along lesson by lesson and build the app up yourself. So we'll be building a simple little to-do app, which we can use to add and remove simple tasks. Nothing too fancy, but plenty to keep us busy. We don't need to worry about a full on console based environment. Again, because I wanna keep things nice and simple, and focused on Require itself. Although we will be using the console later on when we get to the advanced section of the course. But we'll go through these specifics at that point. So just create a folder somewhere convenient and call it to-do. I've got mine set up on the desktop here. Inside this, we'll need to add a few more folders, one called SRC, one called external, and one called CSS. So I've got these already set up. We should download Require itself at this point. So let's head on over to the downloads page at http://requirejs.org/docs/downloads. [BLANK_AUDIO] And we'll grab the latest version which, at the time this course was produced, is Version 2.1.15. And we can save this in the external folder. There's a couple of other files that we need, an index.HTML page and some basic CSS styling. Rather than watch me create them now, I'll just show you the code in each file briefly. So here's the index page, as you can see, nice and simple. [BLANK_AUDIO] And just a minimal CSS styling. So let's bring these into our project folder now. [BLANK_AUDIO] Another of the frameworks that we're going to make use of in this course is Knockout JS, which is completely compatible with Require JS. We can use this to bind the views our app needs to simple view models. So let's head on over to the Knockout download page which is at http://knockoutjs.com/downloads. And we can save this in the external folder as well. And the version of Knockout at the time this course was produced, as you can see, is 3.2.0. We'll be using the excellent Jasmine Test Framework so let's also install that. We can grab a copy off of GitHub at https://github.com/pivotal/jasmine/tree/m- aster/dist. [BLANK_AUDIO] And we'll grab the latest version which at the time this course was produced is version 2.1.1. So this will give us a zip file. So in our project, let's create a test folder. [BLANK_AUDIO] And then we can extract the full content of the Jasmine zip file to our test folder. So there's a few files here that we won't need, we've already got an SRC folder in our project so let's delete the example one that comes with Jasmine. And there's a couple of example spec files, we can also get rid of those, we won't be needing those at all. And that should be it for now. We can add more stuff as we need it. So we're all set up now and ready to go for the next lesson. Thanks for watching.