JavaScript Design Patterns by Aaron Powell

This course takes things up a level – it will be challenging for beginners to take everything in the first time they watch this. There are many topics covered here that will help professional developers write better JavaScript.

Aaron introduces this course saying that JavaScript requires a certain level of discipline to make sure that you can maintain your applications over the long run. Some of the techniques in this course will help you to write code that is shorter and more expressive.

Common Object Patterns

Function argument patterns – begins with magic arguments; Aaron explains the arguments object and how arguments work differently to languages like Java and C# which have method overloading.

The arguments object doesn’t have sorting or filtering capabilities like a genuine array object has. There is an example for iterating through every element within the arguments object. This is a technique used in libraries such as jQuery.

Chaining

Amongst strongly typed languages, this is a technique that was popularised by LINQ in .NET and later incorporated into the Java Language.

In JavaScript, this was popularised by libraries such as jQuery.

Here is a good Wikipedia article with many examples

Aaron demonstrates something that is important to be aware of: JavaScript returns an implicit value from every function. If you don’t specify that value, the value will be undefined.

Observable Properties

Aaron explains that in .NET we have an INotifyPropertyChanged interface to make observing changes easy.

In JavaScript, properties are really just public fields. We can use a pattern known as methods-as-properties. This is used in many modern JavaScript libraries and frameworks.

Creating Observable Properties

Aaron shows an example with a changing price for the book ” JavaScript: The Good Parts”

Observable Property Futures

Aaron says that as of ECMAScript 5, properties can have method bodies, using the Object.defineproperty method.

He warns that this is only supported in IE9+.
In 2016, it is now a lot more reasonable to expect users to use a browser to supporting ES5, meaning adding method bodies to properties makes more sense today than when the course was recorded in 2011.

Timer Patterns

The introductory clip introduces two timers: setTimeout and setInterval
Unlike setTimeout, the function setinterval is executed multiple times, once for each Interval as specified.
Timers won’t start until the outer most function has executed

In Timer overview, Aaron shows an example, with each setTimeout taking an anonymous function. He discusses the timer stack and when they are executed.

Asynchronous Execution Pattern is a pattern for splitting up otherwise long running JavaScript routines into small pieces that don’t make the UI appear to be unresponsive

Demo: Asynchronous Execution Pattern – a function named buffer which takes items, interFn and callback as arguments

Mobile devices, and the JavaScript engines that they use, are significantly faster than they were when this course was created, so I recommend only using this if you know there is a problem to fix.

Recursive setTimeout Pattern is a better solution than setinterval if we have a function that is waiting for an AJAX response

Demo: Recursive setTimeout Pattern shows why using setInterval can lead to inconsistent ordering, and the benefit of refactoring to the recursive setTimeout Pattern. This pattern is a lot more efficient.

For a recent discussion on timer reliability see on the nature of timers on getify’s blog

Asynchronous Module Definitions

Introduces CommonJS.

The latest CommonJS AMD spec is found here on Github.

To learn about modules in the latest version of JavaScript, see exploring JS modules chapter

Pub/Sub Design Pattern

Aaron begins with a shopping cart example, and explains that the code is violating the single responsibility principle.

He also explains that the pub/sub pattern is similar to doing event driven development in .NET.

At the end of this module, Aaron shows how to extend the Pub/Sub library to be more like a message bus.

Promises

This begins with an example of creating a simple promise API, and then shows how it works using jQuery.

To learn about promises in ES2015 see the promises chapter in exploring JS