Wednesday, December 3rd, 2008
Decoupling data and UI layers with PubSub architecture
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:
JAVASCRIPT:
-
-
pubSubBroker.subscribe('email-open', gData, 'onRead');
-
pubSubBroker.subscribe('email-open', gUI, 'markEmail', true);
-
var email = {title:'Test email', id:1, body:'Test body'};
-
//This will call both gData.onRead(email) and gUI.markEmail(true, email);
-
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.
2.3 rating from 15 votes
Tibco’s PageBus (http://www.tibco.com/devnet/pagebus) is a bit more sophisticated and has been used for mashups by various applications such as MindTouch Deki (http://www.mindtouch.com) for a while. OpenSocial also has a PubSub mechanism for gadgets (http://code.google.com/apis/opensocial/docs/0.8/reference/gadgets/#gadgets.pubsub).
In other words, please let’s try to converge on some existing implementations and not add more homebrewed ones! :)
hi guys,
noob question, how is this different from creating a custom event like this. its a mootools script to lazy load images. This seems cleaner other than the fact I used globals to do it. can I still use this style and pass data without globals?
Appcelerator (http://appcelerator.org) is a beautiful framework that offers this and much more.
If you like the idea of a loosely coupled UI and backend via a publish/subscribe model – you’ll love Appcelerator (and no – I don’t work for them).
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)
@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!
/end_rant
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.
I think YUI has this in it’s customEvent as well.
Was not XForms designed exactly for this see http://www.w3.org/TR/2007/REC-xforms-20071029/
It’s a useful idea and good to understand the concepts, not just how to implement a library. Having said that I’ve been using dojo’s implementation for several years now and would highly recommend people dig around their code for good ideas and practices.
dojo.publish
dojo.subscribe
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:
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.
Cheers,
Marcus Westin
It’s simple, it’s lite, it’s JS lib independent, it works. I like it!
Hi, I had worked on a similar but a little more evolved (supports wildcard subscriptions)
version of pubsub Details are here
Your comments will be appreciated. Unfortunately there is no demo on that page.
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