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.3 (114 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,768 students enrolled Bestselling in Design Patterns
$19
$95
80% off
Take This Course
  • Lectures 26
  • Length 3.5 hours
  • Skill Level Expert Level
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 English Closed captions available

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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.

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: My First Design Patterns
04:03

This video will offer an overview of the course.

12:49

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.

08:14

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.

07:58

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.

06:33

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.

05:46

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.

Section 2: Creational Design Patterns
13:20

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.


06: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.

09:44

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.

12:11

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.

05:04

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.

04:59

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.

Section 3: Structural Design Patterns - Part 1
09:06

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.

06:12

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.

11:58

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

04:23

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.

Section 4: Structural Design Patterns - Part 2
07:15

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.

04:59

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).

05:18

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.

01:34

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.

05:41

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.

Section 5: Behavioral Design Patterns
06:03

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.

08:51

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

08:39

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.

04:42

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

14:01

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course