Mastering JavaScript Design Patterns: Building Better Apps

A practical introduction to writing better and more maintainable code using JavaScript design patterns
2.7 (21 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.
409 students enrolled
84% off
Take This Course
  • Lectures 38
  • Length 2 hours
  • Skill Level Intermediate 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 10/2015 English Closed captions available

Course Description

As the language of the web, JavaScript is used prolifically by developers building new applications every day. However, some developers still lack the knowledge about how to write things in a simpler, clearer and more maintainable way. Design patterns are proven solutions to common development problems, and can boost code quality and application maintainability, as well as improve developer efficiency.

Mastering JavaScript Design Patterns demonstrates how to apply design patterns in real life situations, whether that's for new, or already existing projects. It will help you to make your applications more flexible, perform better, and easier to maintain.

We’ll begin by building a simple music player application, and then we’ll build and add more and more functionality to our music player application. We’ll also cover different ways to modularize the application.

In the next two sections we’ll build a server and will load data from it. We’ll cover different techniques for caching, fallbacks, optimizing memory consumption and deferred actions.

In the last section we’ll cover code maintainability improvement techniques by using less known, yet powerful JavaScript techniques.

About The Author

Alexandr Truhin (bumbu) is a proponent of open web and robust solutions. His engineering background is based on desktop, back-end and front-end web applications where most recent years he’s using JavaScript to build fast and reach web applications.

His passion is improving and passing knowledge which has been doing by teaching in University, writing blog posts, mentoring other developers and contributing to open source community.

What are the requirements?

  • This video course demonstrates the fundamentals of JavaScript design patterns through the practical development of an application, a music player. Each pattern will be exemplified and explained. Unlike many other guides this one is heavily practical, featuring bite sized chunks of information, detailed explanations, and real results.

What am I going to get from this course?

  • Understand how to build a practical application with the help of design patterns
  • Write robust, maintainable JavaScript applications by using battle-tested solutions to common problems
  • Improve code readability by using common solutions and better names for what you are trying to accomplish
  • Build and use a server as a data provider
  • Leverage the deferred nature of JavaScript with call-backs and promises
  • Better your communication of design goals with other programmers through usage of common terms
  • Create a separation of concerns to split modules based on different responsibilities.

Who is the target audience?

  • You will get the most out of this course if you have at least some experience with JavaScript. But even if you've been writing JavaScript for several years you may find many interesting and useful techniques. By the end of this course you’ll be able to apply many best practices for developing JavaScript applications that are robust, readable, and easy to maintain.

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.


Section 1: Introduction

Introduction of all the sections of the course.


Understand what a design pattern is and why it is important to know them.


How patterns are different in JavaScript? Different versions of ECMAScript used in this course.

Section 2: Starting the Project

Rendering the tracks list.


Adding play functionality to the player.


Hide the specifics of components by encapsulating information into modules.


Browsers represent complex systems. In order to simplify their use, a facade pattern can be used.


Use adapter pattern to simplify the usage of setInterval and setTimeout functions.


Sometimes, there are alternative ways to match for conditions.

Section 3: Modularizing the Application

The application grew quite a bit, so it has become hard to manage it. Separating it into smaller modules will make it more manageable.


The Namespace pattern exposes modules through a global variable and does not resolve dependencies.


It is hard to establish a communication between modules using classical methods. We’ll use PubSub for communication between modules.


A new standard was established for defining and using modules - that is, ECMAScript 6 modules.

Section 4: Organizing the Application Through Separation of Concerns

Make the application more robust by decoupling tracks queue from tracks player.


Treating each track as a separate component will allow an easier separation of concerns.


In MVC, communication between model and view happens through a PubSub pattern.


MVC is one of the most used patterns that separates the internal representation of information from the UI with which user interacts.


MVP is another commonly used pattern that is used to organize the UI elements.


Often, before being rendered, model data has to formatted. For such cases, patterns such as MVVM are used.

Section 5: Enhancing the Tracks Functionality and Adding Nested Tracks

We'll add multiple types of tracks and we'll use Factory pattern to create them. Also we'll implement lazy initialization that will defer initialization of objects until they are necessary.


Track removal was not implemented. In this video we'll do that. Also we'll add methods chaining


The collection should be the only entity that manages its state. Thus, we'll move the collection iteration logic into the collection module.


Generators are powerful but have a limited set of functionality. An alternative to generators are iterators that use the same iteration protocol.


We'll add nested tracks. As each track can be both a parent and a child, we'll use the Composite pattern to make adding of nested tracks work.


After adding nested tracks, only their rendering worked as expected. Play and remove functionality worked in a wrong way. We'll fix that using an iterator that works with nested iterators.

Section 6: Building the Server and Loading Data from It

Storing the data in application code is a bad practice. We’ll defer that to the server.


Server will return a list of parent tracks, where child tracks would be embedded into parent tracks.


AJAX requests are asynchronous. This requires that you use callbacks in order to continue application execution only after the data becomes available.


Callbacks often lead to a complex code. Also, managing errors has to be done in each callback. Promises help to overcome these complications.


Passing context scope into callbacks may lead to bugs. A much cleaner approach is to find callbacks to certain contexts.

Section 7: Loading Tracks' Additional Data

Until now, we loaded only main data about track. Now, we need more data about each track. So, on track play, we’ll ask the server for more data about active track.


Making the same request multiple times is inefficient. We'll optimize this by implementing a caching mechanism.


Relying on a single source of data is fault-prone. We’ll implement a mechanism that will allow us to use multiple sources for tracks' additional data.


Having multiple objects consumes memory. In case of objects that have many similar attributes, a Flyweight pattern can be used to decrease memory footprint by using shared objects with data.

Section 8: Improving Code Maintainability

We’ll use the Template method pattern that will allow to have an object with main functionality and subclassed objects with a specific functionality.


We'll use inversion of control that is a widely used pattern in applications with tests.


JavaScript live post-processing is a feature that may be used to validate, log, or even update arguments passed into functions.


We'll enable tracks’ models to support any string as attribute name.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, 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.

Ready to start learning?
Take This Course