Back from London JavaScript, where I saw +Addy Osmani speak on large-scale JavaScript - specifically patterns like Facade, Mediator, and Pub/Sub. I mentioned I'd send a couple of ideas on this, so I'll "send" them here. I think large-scale JavaScript needs to exploit some of the dynamic features of JavaScript and the DOM. Use the force, as it were, and these patterns do so ...

Automagic Event Registration [1] Pub/Sub solves one big problem (coupling), but introduces another - admittedly smaller - problem. The process of wiring up subs to pubs. This pattern solves it by auto-wiring based on naming conventions. e.g. If the app sometimes fires an event called "trialUpdate", then anything with a "trialUpdate" method automatically gets called.

Classy HTML [2] This pattern suggests you reflect state with classes in the root document element (<html>). If the app is in "performingTrial" state, the <html> element has "performingTrial" class, and you can then structure your CSS around how each element appears in each state.

Real-Time Templates [3] We've seen a ton of people using templates recently, but they're mostly of the "one-time compile" nature - use the template to spit out some content and slap it on the page. This pattern suggests a permanent umbilical cord between the content on the page and the template from whence it came. Things get much more declarative this way - you don't have to micromanage updates to the page. You just change the template and everything on the page changes. I think this could fit nicely with classy HTML, where you have different templates for each app state.

Trinity: JS/CSS/HTML components [4] While a lot of high-scale web app discussions focus on JS modules, a component is often something with JS, HTML, and CSS all together, and we need ways to bundle them together. In TiddlyWiki, there's a concept of a "theme", which effectively bundle HTML templates and CSS together. There's also the Shadow DOM concept, though no real API for it. I think Sproutcore and other frameworks also do this kind of thing.

[1] http://softwareas.com/automagic-event-registration and in production at http://webwait.com/javascripts/application.js

[2] http://softwareas.com/classy-html-a-speculative-design-pattern-about-classes-and-composition and less speculative after we used as a guiding principle in our news reader app demo'd at Google IO 2011 https://github.com/PaulKinlan/ioreader. The pattern helped us developer four form factors independently (one developer per form factor).

[3] Had a chat about this +Mark Wubben and it made me realise how much more declarative things become when the template's dynamic.

[4] Shadow DOM - http://wiki.whatwg.org/wiki/Component_Model_Use_Cases
Shared publiclyView activity