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

Next lesson playing in 5 seconds


Free Preview: Put JavaScript Design Patterns Into Practice


  • Overview
  • Transcript

A design pattern is a proven solution to a common software problem. Patterns codify good design principles and facilitate maintainable code that can be worked on by teams. Design patterns are also a way for teams to communicate about the structure and architecture of an application. Patterns are a language that can be used to convey ideas and facilitate discussions.

In this course, Tuts+ instructor Dan Wellman will cover some of the most common and most useful design patterns used in JavaScript. Each pattern will be demonstrated with a standalone example bundled in a JavaScript module.

We've built a comprehensive guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics:

1. Introduction

1.1 Introduction

Hi folks, welcome to Put JavaScript Design Patterns into Practice. My name is Dan Wellman, and over this course we're going to learn about some design patterns that you commonly see or make use of when developing applications in JavaScript. This course is aimed at those with some JavaScript familiarity and experience already. If you're interested in the subject design patterns I'm going to assume that you have some knowledge of object oriented programming to, but don't worry all concepts used in the course will be explained in full. If you don't want to follow along with the code examples, you can just grab the source code for the whole course from GitHub and skip straight to lesson 2.1. So first of all, what exactly do I mean by design pattern? What is a design pattern? Quite simply, a design pattern is a proven solution to a common problem in software development. Patterns are a way to adhere to good design principles and can help create maintainable code that can be worked on by teams. A design pattern is not a specific piece of code, it can't be copied and pasted into place and just work. The same pattern can be implemented in different ways depending on the situation, context, and language in use. As well as being solutions to common programming problems, design patterns are also a way for teams to communicate about the design of an application. Patterns are a language that can be used to convey ideas and facilitate discussions. Historically, design patterns became popularized in software development by a book written in the early 90s by four guys known as the Gang of Four. Their book contains 23 reusable patterns that could be applied to specific situations. Since then, further patterns have arisen and the existing patterns have been adapted for newer languages. Some patterns aren't relevant in some languages. One example of this is the prototype pattern. In JavaScript we don't really need to worry about implementing the prototype pattern because it's built into the language. One example of the pattern very common to JavaScript is the module pattern which wasn't one of the original 23 patterns by the way. We won't be looking at this pattern in this course, so let's just use it as an example now. The problem here is the global scope. We need a way to shield our code from the global scope. The module pattern solves this problem by wrapping up code inside closures and specifying what is returned from the module. One point I want to mention is that it's very difficult to talk about design patterns without referring to object-oriented concepts such as classes. JavaScript doesn't have classes and classes aren't required to use patterns in JavaScript, but it just makes it easier to explain things using concepts like base class. So throughout the remainder of this course, when I talk about classes I mean the JavaScript emulation of classes. So let's move on to the next lesson now and get our development area set up and ready to use. Thanks for watching.

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.