Wednesday, December 3rd, 2008

Decoupling data and UI layers with PubSub architecture

Category: JavaScript

Marcus Westin (who we featured on finger print) gave a talk at the SF JavaScript meetup on a top that is very interesting:

One common issue in my experience are intricate dependencies between the UI and data models. Decoupling these is a huge benefit with respect to maintainability. The PubSub model is a great way to do it!

I’ve got a brief post along with a demo and sample code for a really compact PubSub tool, as well as a short discussion on the somewhat non-trivial javascript that makes it work with minimal code.

The demo app uses code such as:


  1. pubSubBroker.subscribe('email-open', gData, 'onRead');
  2. pubSubBroker.subscribe('email-open', gUI, 'markEmail', true);
  3. var email = {title:'Test email', id:1, body:'Test body'};
  4. //This will call both gData.onRead(email) and gUI.markEmail(true, email);
  5. pubSubBroker.publish('email-arrive', email);

Marcus then goes through the PubSubBroker code itself.

I am a big fan of pubsub app development. I have talked about this wrt custom events in the past.

Posted by Dion Almaer at 6:18 am

2.5 rating from 20 votes


Comments feed TrackBack URI

Tibco’s PageBus ( is a bit more sophisticated and has been used for mashups by various applications such as MindTouch Deki ( for a while. OpenSocial also has a PubSub mechanism for gadgets (

In other words, please let’s try to converge on some existing implementations and not add more homebrewed ones! :)

Comment by Bjorg — December 3, 2008

re converging on existing implementations…have a look at the OpenAjax hub, it is designed precisely to standardise this kind of pubsub mechanism (whilst allowing pluggable implementations, of which PageBus is one)

Comment by heswell — December 3, 2008

@Bjorg: Why not?! You know how many home brewed variants of all sorts of things there are? It’s simple, it works, and that’s about it. Why mess with it? Take screwdriver handles for instance! They all let you hold the driver but there’s lots of implementations. I don’t see anyone complaining that there’s too many ways to make a screwdriver handle, eh?

@aw2xcd: I use custom mootools events too, I suppose it’s just a different kind of screwdriver.

We should really stop trying to standardize everything and really think about what works best and for who. Why can’t there be many frameworks and plugins? Why must we feel that everything has to be the same or it isn’t any good. I think I’ll make my own pub/sub-custom-event framework just to spite you guys. Standardization is nothing more than forced subjectivity and I won’t stand for it! I call for the end of standardized implementations and leave things alone! Javascript is the driver, my frameworks the handle, and both are used to screw you!


Comment by AndrewHerron — December 3, 2008

This was a nice, thoughtfully-presented topic at the JS meetup. I think it would have been meaningful and interesting particularly to people not familiar with the pubsub approach. Rather than starting with some huge framework, Marcus nicely showed how to build one from the ground up. I liked his approach.

Comment by Schill — December 3, 2008

Was not XForms designed exactly for this see

Comment by hblink — December 3, 2008

I’ve been using Prototype’s implementation for some time now and it is syntactically beautiful.

And I believe a little wittiness would benefit this article:

Marcus Westin (who we fingered on finger print) gave a talk at the SF JavaScript meetup on a top that is very interesting:

Comment by Jordan1 — December 3, 2008

Hey guys,

The presentation/post was intended to demostrate 2 points:

1) the pubsub model is great for decoupling your data and UI
2) javascript is a freakin’ awesome language. Some 25 lines is enough to create a pubsub tool with non-trivial functionality such as currying

Also we don’t see enough pure javascript out there – while js libraries made production quality js apps possible, the language itself is interesting enough to warrant discussion.

Marcus Westin

Comment by narcvs — December 3, 2008

It’s simple, it’s lite, it’s JS lib independent, it works. I like it!

Comment by beckie — December 4, 2008

This really is a powerful technique – both for where you control the whole UI and for when you need arbitrarily imported components to communicate.

Its been in Dojo for a while of course, and is a part of the base librar, and even documented!

Its also a feature of the OpenAjax hub – something I’d really like to hear more about here. This is a specification for a standard api for use in mashups, ajax libraries- providing a baseline for ajax functionality and reliable communication between components on the same page, where its critical they dont step on each other’s toes.

One of the things pubsub buys you is a degree of freedom from the tyrannies of execution order. Components can subscribe to an event before the publisher of that event even exists, and publishers can push out events without having to know or care if any thing is setup and ready to respond to them

Comment by sfoster — December 5, 2008

Leave a comment

You must be logged in to post a comment.