JavaScript Design Patterns: 20 Patterns for Expert Code
4.1 (254 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.
2,855 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScript Design Patterns: 20 Patterns for Expert Code to your Wishlist.

Add to Wishlist

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.1 (254 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.
2,855 students enrolled
Created by Packt Publishing
Last updated 11/2015
English
English
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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.
View Curriculum
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.
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.

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
26 Lectures
03:15:43
+
My First Design Patterns
6 Lectures 45:23

This video will offer an overview of the course.

The Course Overview
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
12:49

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
08:14

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
07:58

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

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
05:46
+
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
06:20

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
09:44

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
12:11

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
05:04

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
04:59
+
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
06:12

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
11:58

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
04:23
+
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
04:59

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
05:18

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
01:34

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
05:41
+
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
08:51

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
08:39

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
04:42

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
14:01
About the Instructor
Packt Publishing
4.0 Average rating
6,473 Reviews
48,226 Students
566 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.