This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

The Frontier of JavaScript Patterns

A journey from the familiar out to the forefront in thinking about OO architecture.

MV* may be the most widely used JavaScript pattern, but it is far from the only one. New thinking by MVC's inventor bids to solidify the very foundations of OOP.

Last month we visited the Throne of JS conference, where the aim was to gather some consensus about the scores of JavaScript frameworks available to developers. The most commonly used ones, including Backbone, Knockback, and Angular JS, embody some flavor of the MVC (or MV*) pattern.

Samuel Clay, the creator of the NewsBlur open-source, Web-based RSS newsreader, goes into useful detail on its "Backboneification": how he wrestled NewsBlur's initial implementation, 8,500 lines of "DOM spaghetti," into an MV* organization and tamed it using the Backbone framework. Clay presents this refactoring in detail in both slideware and narrative form. The code now consists of "8 models, 12 views, 3 routers, [and] 3 collections." (Routers are the Backbone objects that were initially called controllers.)

NewsBlur provides a perfect example of the kind of (common) problem that the MV* pattern fits like a glove. But not every problem is a nail best dealt with by using an MV* hammer. When refactoring an existing codebase, it is essential to understand its basic architecture in order to select the pattern that most closely aligns with the problem being solved. It's a whole lot easier to gain this deep understanding about existing code than it is to figure it out about a greenfield application; but the exercise is well worthwhile for both.

A wider view
Garann Means gives a quick overview of the territory in The World Beyond MVC, based on a talk she gave at two recent JavaScript conferences. She sketches the history of MVC -- it was invented in the late 1970s by Trygve Reenskaug and first implemented in SmallTalk, so the pattern actually predates OOP and, obviously, was in widespread use well before the Web came along.

Means notes that most of the patterns commonly used in Web development were described in a 1994 book, Design Patterns: Elements of Reusable Object-Oriented Software, by four authors usually referred to as the Gang of Four (E. Gamma, R. Helm, R. Johnson, and J. Vlissides). Means describes three other patterns to which JavaScript developers have recourse: Event-Driven Architectures (for message-heavy applications), Naked Objects ("good for big meaty widgets"), and Pipelines (for anyone who deals with a lot of callbacks). These patterns aren't embodied in time-tested libraries the way MV* is in Backbone (and others), and Means issues a call to JS developers to get about the task of systematizing some of these lesser-used, but still common, patterns.

Stepping back still further
The aforementioned father of MVC, Trygve Reenskaug, gave a talk in Norway recently in which he proposed to fix the problems of object-oriented programming (which we have discussed) at a more basic level. Reenskaug, now over 80 years old, wrote his first program in 1957. He motivates his new Data-Context-Interaction (DCI) pattern with this sobering reminder, from the Gang of Four's Patterns book, that the behavior of an OO system can't necessarily be understood from its code:

An object-oriented program's run-time structure often bears little resemblance to its code structure. The code structure is frozen at compile-time; it consists of classes in fixed inheritance relationships. A program's run-time structure consists of rapidly changing networks of communicating objects. In fact, the two structures are largely independent. Trying to understand one from the other is like trying to understand the dynamism of living ecosystems from the static taxonomy of plants and animals, and vice versa.

DCI deals with objects as they are embedded in their local sea of relationships with other objects. Some architecturally minded JavaScript developer would do the world a tremendous favor by implementing the DCI pattern in a general-purpose JavaScript framework at the level of Backbone -- perhaps it could be named Nerves. For the rest of us, let's enjoy and be enlightened by this talk from one of the greatest living deep-thinkers on the structure and architecture of code.

Related links