Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.1 Introduction

Welcome to RequireJS Explained. In this introductory lesson we'll look at a little history behind RequireJS and the motivations behind its development. We'll see how it can benefit our code and why we should use it.

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.

Back to the top