JavaScript + jQuery Design Pattern Framework

JavaScript + jQuery Design Pattern Framework

The definitive guide for JavaScript architects building web apps with client-side Design Patterns.
Learn to build world-class web apps with:
  JavaScript Modern Patterns
  JavaScript Classic (GoF) Patterns
  JavaScript Model-View Patterns
  JavaScript Architecture Patterns
  JavaScript Idioms & Hacks 
  jQuery Design Patterns
  Patterns in Action Apps (MVC, SPA, etc)
  Bonus: 37 JavaScript Rockstar Tips

Do you know the true language of the web?

Perhaps your answer is yes, because you’re programming in .NET, Java, PHP, Ruby or some similar technology. However, these are server technologies which are not universal. The correct answer is JavaScript because it is the only language that runs on the browser (any browser) which makes it the de-facto standard. JavaScript is the only true web language.

Not only that, JavaScript can also run only the server (node.js for example). Some big-name sites are coding full-stack web apps in 100% JavaScript!

More and more work is being done in JavaScript and it is gaining fast in popularity. On github, for example, it is the top language:

Today, wonderful sites are available that use JavaScript extensively, such as,,,,, and many more.

JavaScript is a small language that was not designed for large scale deployment. Perhaps you have a basic understanding of JavaScript and looking at those beautiful large scale sites you’re wondering: “how’d they do that with such a simple language?”

Well, this is EXACTLY what the JavaScript + jQuery Design Pattern Framework is designed to teach you.  It will get you from “adding some procedural code that changes the background color of a button”, to “building robust, scalable, and professional applications that will delight your end-users.”

The JavaScript + jQuery Design Pattern Framework will teach you how to build web apps with modern JavaScript patterns, practices, and architectures. You’ll have the skills and the confidence to develop scalable, beautiful web apps using advanced JavaScript patterns and techniques.

By introducing patterns to your projects your notion of JavaScript will change from that of a ‘limited’ language to one that is flexible, powerful, and great fun to work with.  It’s how JavaScript pros (the ninjas and the rock stars) are building their apps all day long.

What others are saying

Your Design Pattern products are Awesome

I have your .NET Design Pattern Framework and just obtained your JavaScript + jQuery package. 

 I love them all.  Keep up the good work!


John Norman
Virginia, USA

What do I get?

This package comes in two formats: PDF (349 pages) and a ‘live’ HTML/JavaScript website which you install and run on your machine.

The contents of these two are the same. Here’s how this works:

There are 8 PDF documents, one for each section (the complete Table of Contents is at the bottom of this page). The PDF format is viewable offline, which is handy when traveling by plane for example. The documents are also printable.

The HTML/JavaScript format has the same materials but it has the advantage that it is a live web application which runs on your computer. Exploring the course this way is great because

  1. all materials are available from a single, easy-to-navigate place, and
  2. the JavaScript patterns, code samples, sample apps are live, meaning you can view and run the code right then and there!


If you decide to purchase the guide you will immediately receive a confirmation email with download instructions. Then download and install the package on your local machine and you are ready to get started. The entire course is self-contained without any external dependencies. Everything comes with 100% source code; available on your machine.

Your purchase comes with a 1-year subscription which includes free access to any enhancements or upgrades during that period.

You are also getting a 100% money-back guarantee for a full 60-days.
This gives you plenty of time to explore and apply the patterns in your own work. There really is no risk.

So what’s covered in this course?

The JavaScript + jQuery Design Pattern Framework is a comprehensive package that contains everything you need to excel as a JavaScript developer — and then some!  It will teach you how to apply design patterns, best practices, and other advanced techniques to build stunning web apps that are robust, elegant, and maintainable.”

You are probably thinking: “this sounds good, but show me something.”

Sure, let’s see what is in this package:

As mentioned there are 8 sections, each covering a major aspect of design patterns in JavaScript and jQuery (note: you find the Table of Contents at the bottom of this page). The first section, JavaScript & Pattern Essentials, will provide you with the necessary JavaScript essentials before embarking on your pattern journey.

It covers Design Pattern fundamentals, OO Design, SOLID and DRY principles, JavaScript Idioms and Hacks, the Event loop, Prototypes, and more. 

Model View Patterns

Model View (MV) Patterns are all the rage today. There is good reason for this because they bring structure and organization to your projects.

Many big name web sites use Model View Frameworks, such as,,,,, and many more.

The MV Patterns are a family of three related patterns: MVC, MVP, and MVVM. This diagram shows the main structure of each one.

The course will teach you, step-by-step, the essentials of each of these important patterns. Upon completion you will have the skills necessary to select the best MV model and framework for your own work and start building MV based apps right away.

You will also get a fully functional MVVM shopping cart. It is snappy and works beautifully! Feel free to copy the code and use it in your own projects.

Here’s the MVVM Shopping cart…

Architecture Patterns

The Architectural Patterns work on a higher, architectural level.  AMD (Asynchronous Module Definition) is a good example. You will learn about AMD and its implementation in Require.js. In fact, AMD is fairly hard to grasp initially, but it is important that you are aware of what it offers and its benefits.

Other topics in this section include Error Handling, Testing, and Transpilers. Here’s a quick review of each of these.

Error Handling and Error Logging

All JavaScript apps require a dependable approach towards error handling and error logging. This course will introduce you to the error flow in JavaScript as depicted below:

The error flow itself is easy to understand, but it is crucial that your projects follow a solid, consistent approach to handling and logging errors.

This course emphasizes the role of error logging — from the client to the server — because without it you have no idea about the errors on the browser: without it you are essentially flying blind.

Automatic JavaScript testing

As your project grows you will need to consider CI (Continuous Integration) which includes Automatic Testing.  In this course you will learn about testing using two popular testing libraries: QUnit and Jasmine. We will explore JavaScript test cases and test suites with plenty of examples.

Here is a screenshot of 10 passed specs in Jasmine:

JavaScript Transpilers

Perhaps you have worked with any of these languages: CoffeeScript, Dart, ClojureScript, and TypeScript. What they have in common is that at compile-time their code gets translated to standard JavaScript. These source-to-source compilers are called transpilers (i.e. translating compilers). Once compiled the JavaScript runs on any browser.

Of these four languages TypeScript is particularly interesting because it translates a future version of JavaScript to today’s version of JavaScript. TypeScript is designed with an eye toward future versions of JavaScript.

Exploring the translated TypeScript code (i.e. today’s version of JavaScript) you will discover that it is packed with patterns (the ones that are presented in this course).   This as a huge validation for all the patterns currently in use by the JavaScript community because many were designed to implement features that are missing from JavaScript but that are common in mature, object-oriented languages.

If nothing else, TypeScript offers a great educational value for those interested in JavaScript patterns. Lucky for us, the Typescript website ( makes it easy to compare the original and the translated code side-by-side. Here are some examples of before code (TypeScript on the left) and after code (JavaScript on the right):

In this we are checking how a TypeScript class is translated to JavaScript:

The TypeScript class is translated to a JavaScript Module pattern implementation (no worries if you don’t understand; you will learn about this in the course). The constructor on the left is implemented as a nested function on the right. It has the same name as the surrounding function (i.e. Person). The new Person (both left and right) will create a new Person instance.

In the next example we are checking how a TypeScript module is translated to JavaScript:

Again, if the following is not clear, it is all explained in the course.

The TypeScript module on the left is implemented as a simple global variable (var MyApp) on the right. The Module pattern is used to attach (export) classes to the module. As in the first example, the classes themselves are implemented using the Module pattern.

Notice that the module on the right is passed as an argument (MyApp || (MyApp = {}) into the anonymous function. This allows the module definition to be spread over multiple files which is great for team development. Multi-file modules are explained in the course.

In the final example we are checking how TypeScript class inheritance is translated to JavaScript:

On the left is an Employee class that extends (derives from) a Person class.

The right-hand side appears complex with all the underscores. However, please be assured that that once you are familiar with the materials in the course everything will fall into place! Your familiarity with patterns will allow you to fully understand what is happening in the translated code.

The __extends function on the right is an inheritance helper (by the way, you will learn about the Extend pattern in this course also). The Person and Employee classes are implemented using the Module pattern which is built with immediate functions in JavaScript. The constructors are nested functions by the same name as their parent functions.

Again, don’t let this code scare you; with the help of this course you’ll be able to read and write advanced JavaScript programs like a pro. Upon completion you will confidently and comfortably read code like that on the right hand side. In fact, your own code will probably look quite similar — but without all the messy code-generated underscores we hope :-).

jQuery Design Patterns

jQuery is by far the most popular JavaScript library today.

The pattern guide comes with a comprehensive section on jQuery patterns. Understanding jQuery patterns is important because it will allow you to make optimal use of this powerful library. Furthermore, it never hurts to study code created by the best JavaScript developers around.

The jQuery authors have used patterns extensively to build this amazing library. You’ll find patterns throughout their code base (10,000 lines of code). jQuery is deployed at 20 million sites, so you can be certain that all patterns used are ready for the most demanding projects.

Here’s the actual jQuery team hard at work at their pattern-rich code base.

Examples of jQuery patterns include: Options Hash, Module, Chaining, Overloading, and Lazy Load. The authors also use several of the classic GoF patterns: Singleton, Observer, Proxy, Façade, and Adapter.

An overview of some jQuery patterns follows:

Function Overloading

JavaScript does not natively support function overloading. Don’t worry if you are not familiar with overloading: it is explained in the course. Essentially it allows you to have multiple functions with the same name, but each with a different set of parameters.

jQuery uses function overloading extensively. It uses a technique called argument switching, the details of which are explained in the course.

Even jQuery itself (which is a function that is aliased as $) is overloaded.  It behaves differently depending on the arguments provided. Here are 3 different uses for jQuery (or $):

1) The $ function is passed a function:

  1. $(function() { alert(“DOM is fully loaded”); });

This is a shorthand for $(document).ready() which executes as soon as the DOM is fully loaded.

2) The $ function is passed a CSS selector string:

  1. $(“#menu”).addClass(“active”);

This is the regular jQuery selector syntax.

3) The $ function is passed an HTML string:

  1. $(

    Hello there!


This inserts a new DOM element after a specific location in the HTML document.

Notice that if the argument is a string value then the jQuery function needs to determine whether it is a CSS selector or an HTML string. This goes beyond regular function overloading and could be called semantic overloading.

Don’t worry if you don’t quite understand some of this; all the details are in the course.

Chaining Pattern

Another widely used pattern in jQuery is the Chaining pattern. Chaining allows method calls to be strung together in a single statement, like so:

  1. $(“#menu”).addClass(“highlight”).css(“margin”, “2px”).fadeIn(“fast”);

Some jQuery developers don’t know that chaining can also be applied to events, like so:

  1. $(“#menu”)
  2. .on(“click”, function (e) { alert(“You clicked me!”); })
  3. .on(“mouseenter”, function (e) { $(this).css(“backgroundColor”, “Red”); })
  4. .on(“mouseleave”, function (e) { $(this).css(“backgroundColor”, “Green”);
  5. });

Not only reduces it the code size, it also makes a huge difference in terms of jQuery performance.

Most methods in jQuery implement the Chaining pattern which allows them be chained with other methods. In your own work, you should consider doing the same; it will make your API more flexible and more usable. This course will teach you what you need to do to make your methods chainable.

jQuery Plugin Patterns

This guide also includes jQuery Plugin patterns. These are proven templates for successful Plugin development which makes writing jQuery custom code a breeze.

A common misconception is that Plugins are for open-source projects only. You will discover that Plugins can be very useful also in your own work.

JavaScript Patterns in Action

This section is the grand finale of the course: six sample apps that demonstrate the patterns presented in this guide in a real-world setting. They are referred to as: Patterns in Action.

The sample apps cover functionality you find in many real-world apps:

  1. Dashboard — with charts
  2. Data entry — with CRUD: create, read, update, and delete operations
  3. Search
  4. Pagination
  5. Mapping — with Google Maps and Geolocation
  6. Single Page Application (SPA) – with several pages

Below are some screenshots of the Patterns in Action apps.

Books and tutorials on JavaScript patterns don’t usually show you how to optimally apply these patterns in a real-world environment. This is what makes this course so unique: the six sample apps demonstrate exactly when and where you would apply the patterns discussed in a real-world setting.

What makes the sample apps even ‘more real-world’ is that they include several 3rd party libraries, including jQuery, Backbone, Underscore, and Require.js. In your own work, you will most likely also use jQuery, a Model View framework, and possibly some other libraries as well.

All this makes this course a truly unique and wonderful resource.

You are probably wondering what patterns are involved in these apps. Here is for example a list of the pattern you’ll find in the Single Page Application (SPA) App.

  • AMD Pattern
  • Truthy/falsy idiom
  • || and && idiom
  • Option Hash idiom
  • Namespace pattern
  • Single var pattern
  • Factory Method pattern
  • Apply Invocation pattern
  • Zero-Timeout pattern
  • Module pattern
  • Extend pattern
  • Init pattern
  • Chaining pattern
  • Iterator pattern
  • Singleton pattern
  • Observer pattern
  • Façade pattern

Quite a list… Note that we didn’t set out to cram as many patterns as possible in just 200 lines of JavaScript code. It reflects reality which is that patterns are omnipresent in programs written by professional JavaScript developers.

These are great apps to learn from — and then apply their techniques to your own work!

Table of Contents for the JavaScript + jQuery Design Pattern Framework

Laying the foundation for JavaScript Patterns and Pattern Archtectures.
  • What are Design Patterns?
  • Design Patterns & JavaScript
  • OO Design, SOLID, and DRY Principles
  • Unobtrusive JavaScript and Layering
  • Deep dive: The Event Loop (+ Zero Timeout Pattern)
  • Deep dive: Prototypes in JavaScript
  • Cracking JavaScript Idioms & Hacks (fun section)
  • Coding Standards and Style
Modern JavaScript Patterns as used by expert JavaScript developers.
  • Contructor Pattern
  • Namespace Pattern  —  Namespace, Bookmarklet
  • Module Pattern  —  Module, Revealing Module, Partial Module
  • Chaining Pattern
  • Invocation Pattern  —  Function, Method, Constructor, Apply
  • Mixin Pattern  —  Prototypal Inheritance, Extend, Mixin, Functional Mixin
  • Monkey Patch Pattern  —  Monkey Patch, Duck Punching
  • Multiton Pattern  —  N-ton, Registry of Singletons
  • Partial Pattern  —  Partial Function, Partial Object, Partial Application


JavaScript-optimized versions of the 23 Classic GoF Patterns.
  • Abstract Factory Pattern
  • Builder Pattern
  • Factory Method Pattern
  • Prototype Pattern
  • Singleton Pattern
  • Adapter Pattern
  • Bridge Pattern
  • Command Pattern
  • Composite Pattern
  • Decorator Pattern
  • Façade Pattern
  • Flyweight Pattern
  • Proxy Pattern
  • Interpreter Pattern
  • Iterator Pattern
  • Mediator Pattern
  • Memento Pattern
  • Chain of Responsibility Pattern
  • Observer Pattern
  • State Pattern
  • Strategy Pattern
  • Template Method Pattern
  • Visitor Pattern
All about the essential Model-View architectural patterns
  • MVC — Model View Controller
  • MVP — Model View Presenter
  • MVVM — Model View ViewModel
  • MV* Frameworks  —  Backbone, Knockout, more…
  • Exploring jQuery’s internal and external patterns and practices
  • jQuery Module Pattern
  • jQuery Single var Pattern
  • jQuery Double Exclamation
  • jQuery Overload Idiom
  • jQuery Placeholder Idiom
  • jQuery Short Walk Idiom
  • jQuery Options Hash Pattern
  • jQuery Chaining Pattern
  • jQuery Namespace Pattern
  • jQuery Lazy Load Pattern
  • jQuery Zero Timeout Pattern
  • jQuery Singleton Pattern
  • jQuery Iterator Pattern
  • jQuery Observer Pattern
  • jQuery Proxy Pattern
  • jQuery Façade Pattern
  • jQuery Adapter Pattern
  • jQuery Plugin Patterns  —  Function, Extend, Constructor
  • Building large-scale JavaScript apps
  • Script Loading
  • Modularity
  • AMD & Require.js
  • JavaScript Transpilers
  • JavaScript Error Handling
  • JavaScript Testing  —  QUnit, Jasmine
Using Patterns in a comprehensive, real-world setting
  • Dashboard App
  • Data Entry App  —  CRUD operations
  • Search App
  • Pagination App
  • Mapping App  —  Google Maps and Geolocation
  • SPA – Single Page Application
Tips and ideas on reaching JavaScript Rock Stardom!
  • 37 Ways to becoming a the next JavaScript RockStar!

Note: the Framework explores and uses these popular libraries:

  • Bootstrap, jQuery, Backbone, Underscore, Knockout, Require.js, 
    QUnit, Jasmine, Flot, Json2.js, Backbone.faux.server.js

Get started today

What we have covered here is only a tiny subset of the JavaScript + jQuery Design Pattern Framework package. This course offers a unique opportunity to learn to build JavaScript apps like a pro and gain a competitive advantage, which you can build upon every day. But it takes action.

The sooner you learn the patterns and techniques in this course – and apply them – the sooner you will start to see amazing results. It can launch your career into a whole new direction. I invite you to take the first step and place your order.

How to order

Ordering is easy.  

There is no risk. Your purchase is 100% backed with a full 60-day money back guarantee!  You will have plenty of time to explore and apply these patterns in your own work.

Nhận Xét Của Khách Hàng