JavaScript Design Patterns: 20 Patterns for Expert Code
4.0 (646 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,380 students enrolled

JavaScript Design Patterns: 20 Patterns for Expert Code

Dive deep into JavaScript design patterns to write brilliant code for a wide array of real-world programming situations
4.0 (646 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,381 students enrolled
Created by Packt Publishing
Last updated 11/2015
Current price: $61.99 Original price: $94.99 Discount: 35% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Master the logic behind the major design patterns, and wield them confidently for JavaScript programming
  • Understand how to modularize and condense code, optimize memory, and negotiate design problems
  • Explore Creational design patterns including the Singleton, Factory, and Prototype
  • Implement greater abstraction into application design, and control multiple objects sharing APIs with the help of Structural design patterns
  • Chain objects together and manage events and states using Behavioural design patterns
  • Ultimately deepen your understanding of JavaScript and understand how design patterns can make you a better, more effective programmer.
Course content
Expand all 26 lectures 03:15:41
+ My First Design Patterns
6 lectures 45:23

This video will offer an overview of the course.

Preview 04:03

Before we can confront the actual problem at the global level, we need to first build the core application that is going to be used throughout this section. In this video, we are going to work to develop a pseudo chat application between a user and computer to see how design patterns rescue with application issues.

The Problem with the Global Scope

With over 11 global scope references, we have 11 possibilities to get our code overwritten by other code. Let’s condense our code into an object and move it into a unique namespace protecting it from mistaken overrides.

Moving to One Object and Namespace

One of the biggest issues with our design using the Constructor Design pattern was that in current versions of javascript there is no way to create private members of an object. The Module Design Pattern enables us to have a separation between our private and public API – protecting the code from external resources.

The Module Design Pattern

While the Module design pattern is very powerful, it has a few limitations and they are related mainly to the fact that we have to treat public and private members differently. Moreover, this split has made it hard for us to call and use the public members from the private areas of our code. The Module Reveal Pattern comes to our rescue to solve this issue.

The Module Reveal Pattern

Let’s now turn our attention to the global scope. Our goal in this video is to remove access altogether to the global scope and define and control how and who has access to our objects.

Controlling the Global Access Completely
+ Creational Design Patterns
6 lectures 51:38

The Singleton design pattern restricts instantiation to a single instance and enables a delayed instantiation. This enables a public constant API to retrieve the instance while validating that only one instance of it can ever be created. This makes it easy to share the object with multiple objects.

Preview 13:20

A Factory design pattern enables us to separate the steps involved in what we need to customize and interchange from the core logic of our application. We will use factories only when there is a high likelihood that the creation process will change throughout the life of an application. In JavaScript, there aren't any abstract factories, but only factories.

The Factory Design Pattern

An Abstract Factory, similar to a Factory, creates objects or instances of things that are not in it. The difference is that an abstract Factory doesn't refer directly to what kind of a Factory it is; instead, it refers to the implementation of an interface. This comes in handy when the actual objects that will be registered are vast.

The Abstract Factory Design Pattern

The Builder design pattern is in many ways a continuation of the Abstract Factory design pattern. The Builder pattern enables us to create complex shapes that are split into steps. It also helps us merge more than one object with another to create the outcome that we need. Most of the time, you would start with a Factory, and as it grows old, you would move it into an Abstract Factory. If at this stage, it's logical to break it through to a Builder, you would move into one.

The Builder Design Pattern

In this video, we will continue to implement the logic of our Builder into our Singleton. We can remove more layers of information out of our main construct, thus enabling us to implement drastic changes in the way we implement the content within.

The Builder Design Pattern Continued

Understand how easy it is to implement the Prototype design pattern in JavaScript. The main concept is duplicating methods for reuse instead of creating new ones. This is a very effective way of reducing memory usage by not creating a new method, but instead creating a link to it.

The Prototype Design Pattern
+ Structural Design Patterns - Part 1
4 lectures 31:39

Our goal is to make our Singleton abstract so it can be less aware of the items that it is controlling, thereby opening the doors for us to change the interface that will be used.

Preview 09:06

The Adapter design pattern enables us to switch logic bases very easily within an application. This is commonly used when we want to simplify interface usage or need to modify our code to fit an interface that already exists.

The Adapter Design Pattern

The Composite design pattern enables us to control multiple elements, which have the same public API, at the same time. This is very useful in situations when we need to control a large number of items and want to have them react together to an action

The Composite Design Pattern

The Decorator enables us to add functionality to an existing object without creating a new inheritance chain or updating a prototype. The idea is to add functionality to items based on need instead of adding them to the object from the get-go. This can become very useful when you have multiple objects with partially shared functionality.

The Decorator Design Pattern
+ Structural Design Patterns - Part 2
5 lectures 24:47

The Fly Weight design pattern is focused on memory optimization. Its goal is to reduce the size of objects and extract functionalities that aren't vital to the object into sub-objects that would enable these features based on needs only.

Preview 07:15

A Façade design pattern provides a simplified interface to a larger body of code, such as a class library or larger object. Facades come in handy when you want to minimize an API to protect some methods (or hide them from the end user/developer).

The Façade Design Pattern

In the last video, we introduced the Façade design pattern, and in the process, we broke our application. In this video, we move things around and get our application to work again.

Getting Things Working Again

The Bridge design pattern is more or less the same as the Adapter design pattern with one exception. The Adapter design pattern is intended to be used when you can't change the original API, while the Bridge design pattern goes to the way the objects are built to have a shared API in advance.

The Bridge Design Pattern

The Proxy design pattern is when one function/object behaves like another one. There are many usages of this pattern, such as security and tracking when we want to have information go through a funnel so that we can control, influence, or monitor it. In JavaScript, the most common implementation of the Proxy design pattern keeping the scope of functions. In this video, we will create a Proxy fixer for issues such as losing scope in JavaScript.

The Proxy Design Pattern
+ Behavioral Design Patterns
5 lectures 42:16

The Chain design pattern enables us to connect objects to each other as if they were chains. Before we can implement this design pattern, we will need to update the logic of our core circle to enable it to store the next link in a chain.

Preview 06:03

Now that we have the logic needed to create chains, let’s implement the Chain design pattern.

The Chain of Responsibility – Part 2

The name Observer might not sound familiar, but you are probably working with it a lot. If you have ever worked with an event, you've been working with an implementation of the Observer. The Observer enables us to let an object update other objects for changes in its state without explicitly knowing who is listening to it.

The Observer Design Pattern – Adding and Dispatching Events

In the previous video, we created an event dispatcher. In this video, we will add a functionality to remove events as well.

The Observer Design Pattern – Removing Events

An application doesn't need to always be aware of its state. Awareness tends to add more complexity to an application (such as multiple conditions). By extracting the different states into separate implementations, all that is left for the application to do is update its state to change its functionality.

The State Design Pattern
  • This video course is for web developers who have a strong foundation in JavaScript with familiarity in Object-oriented JavaScript as well. It will help you create a strong foothold into the world of design patterns to integrate them into your workflow.

Design patterns are intelligent, reusable strategies for solving common development problems faced by developers. For Web developers working with JavaScript, design patterns provide a tested, methodical plan of attack for tackling challenges that arise in real-world application development.

JavaScript Design Patterns 20 Patterns for Advancing Your JavaScript Skills will immerse you in the world of intelligent JavaScript programming, demonstrating to Web developers how to mobilize design patterns and presenting key programming concepts and common solutions to frequently occurring programming problems.

Exploring 20 different design patterns, this video course demonstrates the internal logic of each, while providing examples and real-world scenarios that developers can adopt and implement when programming in JavaScript.

The course opens by introducing the conceptual logic behind design patterns: what they are; what they are not; what makes a pattern; major pattern types; and what role they play in the bigger picture of Web development. We then dive straight into a real-world case study, building a mock application with in-built issues that design patterns can solve.

Following on from this introduction, the course quickly expands into exploring the core design patterns underlying the major pattern types: Creational, Structural, and Behavioral patterns. With the knowledge delivered throughout the course, developers will come away from JavaScript Design Patterns 20 Patterns for Advancing Your JavaScript Skills armed with a powerful arsenal for solving a wide array of different JavaScript programming problems.

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and three video courses jQuery UI Development, Learning Object-Oriented JavaScript, and Mastering JavaScript, all for Packt Publishing.

Who this course is for:
  • This video course is for the JavaScript developer with a good understanding of the fundamentals of the language, and with prior experience of building Web applications
  • Take your JavaScript programming to an advanced level by understanding design patterns in depth.