Mastering JavaScript Design Patterns: Building Better Apps
2.7 (23 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.
416 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering JavaScript Design Patterns: Building Better Apps to your Wishlist.

Add to Wishlist

Mastering JavaScript Design Patterns: Building Better Apps

A practical introduction to writing better and more maintainable code using JavaScript design patterns
2.7 (23 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.
416 students enrolled
Last updated 10/2015
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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.
View Curriculum
  • 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.

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.

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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 38 Lectures Collapse All 38 Lectures 02:09:48
3 Lectures 08:36

Introduction of all the sections of the course.

The Course Overview

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

Software Design Patterns and Antipatterns

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

JavaScript Patterns Specifics
Starting the Project
6 Lectures 20:29

Rendering the tracks list.

Preview 05:30

Adding play functionality to the player.

Adding the Play Functionality

Hide the specifics of components by encapsulating information into modules.

Encapsulating Information

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

Abstracting Manipulation with DOM Events and Elements

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

Creating an Adapter to Set Intervals Using Seconds

Sometimes, there are alternative ways to match for conditions.

Using Different Ways to Match Conditions
Modularizing the Application
4 Lectures 18:29

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

Preview 04:29

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

Modularizing the Application Using AMD and RequireJS

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

Communication Between Modules

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

ES6 Modules
Organizing the Application Through Separation of Concerns
6 Lectures 25:53

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

Preview 04:22

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

Treating Each Track as a Separate Component

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

Adding the PubSub Functionality to Tracks

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

Enabling Track Play and Highlighting the Active Track

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

Decoupling the Track Model from the View

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

Formatting Track Time: Two-way Data Binding
Enhancing the Tracks Functionality and Adding Nested Tracks
6 Lectures 19:21

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.

Preview 03:09

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

Implementing Track Removal

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

Iterating Over Tracks Using a Generator

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

Iterating Over Tracks Using an Iterator

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.

Adding Nested Tracks and Displaying Them

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.

Fixing the Queue to Work with Nested Tracks
Building the Server and Loading Data from It
5 Lectures 11:58

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

Preview 02:17

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

Returning the Tracks Queue from the Server

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

Loading Tracks from the Server

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

Replacing Callbacks with Promises

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

Binding a Function to a Custom Context
Loading Tracks' Additional Data
4 Lectures 12:10

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.

Preview 04:27

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

Caching Data Loaded from the Server

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.

Checking for Track Data with a Fallback

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.

Storing Common Tracks Data in Shared Objects
Improving Code Maintainability
4 Lectures 12:52

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

Preview 04:16

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

Improving Testability by Inversion of Control

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

Forcing Function Argument Types

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

Fixing Models to Support Any String as Attribute Name
About the Instructor
Packt Publishing
3.9 Average rating
4,083 Reviews
32,735 Students
318 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.