Practical Design Patterns in JavaScript

Writing "bad" JavaScript is easy. Fortunately, writing "good" JavaScript is not too much harder. In this course, I will show you tried and true design patterns to help structure and organize your code to make your JavaScript code more readable and maintainable.
Course info
Rating
(534)
Level
Intermediate
Updated
Jan 15, 2016
Duration
3h 10m
Table of contents
Description
Course info
Rating
(534)
Level
Intermediate
Updated
Jan 15, 2016
Duration
3h 10m
Description

Writing "bad" JavaScript is easy. Fortunately, writing "good" JavaScript is not too much harder. In this course, I will show you tried and true design patterns to help structure and organize your code to make your JavaScript code more readable and maintainable. I will walk you through the different ways to work with and manipulate objects in JavaScript. We will look at the tried and true gang of four design patterns and how to implement those patterns in JavaScript and AngularJS.

About the author
About the author

Jonathan Mills is a JavaScript and Node.js expert working mostly in the MEAN Stack with individuals and companies to help build their technical skills to cope with the constantly changing landscape of software development. He is also an ASP.NET insider and an international speaker focusing on JavaScript both in the browser and on the server.

More from the author
Testing JavaScript for Node.js with Mocha
Intermediate
2h 28m
May 4, 2017
More courses by Jonathan Mills
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hey everyone. I'm John Mills. I'm a consultant that deals mostly with JavaScript and process and people management. I've been doing JavaScript for quite a while now and I come from a. NET and Java background. And what's always amazing to me is when I have object-oriented developers who do really good. NET and Java code, move over to JavaScript, and lose all that object-oriented knowledge and start writing very procedural JavaScript code. And in this course, I'm going to try and undo some of that and show you how to properly implement good, solid, object-oriented development styles into JavaScript. We'll take a look at objects in JavaScript and why they're different. And then we'll move into the full Gang of Four design patterns and we'll look at what those look like in the JavaScript ecosystem. We'll look at creational design patterns and structural, and then, even behavioral, just so that you can get a good solid understanding of how to adapt your JavaScript code to be much more object-oriented.

What Is a Design Pattern Anyway?
Welcome to practical JavaScript design patterns. Now JavaScript's been around for quite a while and it's starting to kind of take over everything from the DOM in the front end, and now we've got node. js on the backend, and with Electra, and we've got JavaScript even on desktop applications. And what I want to do with this course is I want to take a deep breath and talk about some practical, real JavaScript design patterns that we can start to use to make our JavaScript a little more readable, a little more maintainable, and give us a vocabulary we can use to communicate with each other as we build out our JavaScript application. So in this course we're going to talk design patterns. We're going to talk a little about who created them, where they came from, and where they originated. What they are, what constitutes a design pattern, versus just something that we do. When do we use them? We're going to take a very practical approach. We're going to look at very specific scenarios where we would use design patterns to solve a problem. We're going to talk about where. We'll look at frontend, we're going to look at backend; we'll look all over the place. We'll do a lot of our work in Node. We'll do some work in Angular. We'll do some just plain vanilla JavaScript. I'll show you where to use certain design patterns. And this is going to be a very practical course. We'll specifically implement these solutions in an application so that this isn't just theory, we'll actually have a real-world implementation for each of these design patterns.

Objects in JavaScript
Now before we jump too deeply into design patterns, let's take a few minutes to level set on objects in JavaScript. Now if you've been doing JavaScript for a while, this may be a little bit rudimentary for you. But it's important we take a few minutes and level set everybody to make sure we're all on the same page. If we're covering stuff that you already know, it's perfectly okay to just skip to the next module and dig right in on design patterns. But if you're not quite sure what the different ways to create objects are, or how inheritance in JavaScript works, or define properties or those types of things, hang out with us for a little bit, we'll walk through all of that stuff and get you ready to jump into the design patterns piece of this course.

Creational Design Patterns
So now it's time to talk about Creational Design Patterns. Up until now, we've talked about what design patterns are, where they came from, and we've talked about how objects work in JavaScript. Now let's actually take a look at some design patterns specifically, and how we implement them in JavaScript. Now creational design patterns are used to create new objects. So if I want a new object of some type, I'm going to pick a design pattern that's used to create those new objects. I'm going to adapt how I create those objects to the specific situation involved at the time. So there's several design patterns involved, and we're going to talk about how and why we would use each one of them individually.

Structural Design Patterns
So now we're going to start talking about Structural Design Patterns. Now structural design patterns are concerned with how objects are made up, or what the composition of objects are, and how to simplify relationships between objects. Now, if you remember back in module 1, I said that design patterns are all about relationships. And in Creational Design Patterns we didn't see a lot of relationships, because we're interested in creating an instance of an object. The only one that dealt with relationships, really, was the Factory Pattern, where it was creating other objects. Well in structural patterns it's all relationships. It's all going to be about, let's take one object and how this new object relates to something else. Now Structural Patterns, like I said, deal with the relationship of an object. And they do it in two ways. And the ones we're going to look at will either extend the functionality or simplify functionality. So I've got two extremes here. We're going to talk about the Decorator Pattern, which is going to extend the functionality of an object. We're also going to talk about the Flyweight Pattern and the Façade Pattern, which are going to help simplify functionality, or at least mimic simplifying functionality, to make things easier to use. So it's all going to be about how one object relates to a separate object.

Behavioral Design Patterns
In this module, we're going to start talking about behavioral design patterns. Now, this is the last of the three types of design patterns that we're going to talk about in this course. Behavioral design patterns are concerned with the assignment of responsibilities between objects and how objects communicate. So while creational design patterns are very much interested in newing up an object such as the constructor method or the factory that were handing me back new instances of an object, and structural were more about adding functionality to an object, and they were all self-contained within an object or wrapping an object and things specifically. Behavioral design patterns break out of that single object mentality and start concerning themselves with interactions between objects. Now like we said, behavioral patterns deal with the responsibilities of an object, and they'll do things like help objects cooperate. If we've got multiple objects that are trying to accomplish tasks, we have patterns that are going to help objects cooperate with each other to all achieve the same goal. We can also assign clear hierarchy for objects. We can set one object as the object of record and everybody else watches that object to see when something changes and then they'll go and do the things that they need to do. We can also encapsulate requests between objects to make sure that requests are being made appropriately, and we can either alter those requests as necessary or we can change requests to suit our needs. So let's start looking at what these patterns look like and the types of problems that we can solve with them.