Decoupling Data and UI: PubSub
November 26th, 2008This is a summary of my presentation today at the sf javascript meetup #4 on maintainable front end architecture in javascript. The presentation involves a demo app and a progressive construction of the model’s subscribe method, which contains the meat of the functionality and interesting javascript.
Demo app:
Decoupling Data and UI in webapps with PubSub patterns
As web applications become more powerful, they grow in complexity. Front end programming patterns and best practices are becoming more and more important both for the community and for the industry.
If you decouple your application’s data and UI layers, you will be able to easily extend and develop one layer without affecting the other. A powerful pattern that allows for such decoupling is publication/subscription.
It turns out that javascript’s combination of functional programming and the ability to apply a scope at runtime makes it a wonderful language to write a PubSub library in. 25 lines of code is enough to create a highly versitile model with both dynamic scoping and currying/partial application. We’ll go through that code together in a moment.
If you look at the application code (not more than some 70 lines), then you notice that the UI and the data layers are completely independent - i.e. they don’t reference each other. All the message passing between the data and the UI are taken care of with code like this:
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);
The pubSubBroker creation and publish are both pretty straight forward:
// Our publication and subscription broker
function PubSubBroker() {
var signals = arguments;
this.subscribers = {};
for (var i=0; i < signals.length; i++) {
this.subscribers[signals[i]] = [];
}
}
PubSubBroker.prototype.publish = function(signal) {
var args = Array.prototype.slice.call(arguments, 1)
for (var i=0; i < this.subscribers[signal].length; i++) {
var handler = this.subscribers[signal][i];
handler.apply(this, args);
}
}
However, the subscribe method is the fun part. Let’s go through its creation step by step in order to understand how we get to the final, slightly non-trivial 7-line implementation. First, we just want the ability to subscribe to signals with a function handler:
PubSubBroker.prototype.subscribe = function(signal, handler){
this.subscribers[signal].push(handler);
}
Then we add the ability of specifying the scope in which the handler will run on when a signal is published. Use handlerName rather than handler directly, and use call to run the handler in the given scope.
PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
this.subscribers[signal].push(function(eventArguments){
scope[handlerName].call((scope || window), eventArguments);
});
}
The third version adds the ability to pass in a variable number of arguments to publish. Using apply rather than call allows for this.
PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
this.subscribers[signal].push(function(){
scope[handlerName].apply((scope || window), arguments);
});
}
Finally, we make currying possible, which allows for partial application that can be super useful in many cases (let me know if you want a useful example and I’ll add it):
PubSubBroker.prototype.subscribe = function(signal, scope, handlerName){
var curryArray = Array.prototype.slice.call(arguments, 3);
this.subscribers[signal].push(function(){
var normalizedArgs = Array.prototype.slice.call(arguments, 0);
scope[handlerName].apply((scope || window), curryArray.concat(normalizedArgs));
});
}
That’s it! If you want to play with the code, just download the zipfile with the demo application and pubsub code or check out the demo - it has links to the application file, pubsub broker file, as well as the progressive build of subscribe.
November 26th, 2008 at 5:19 pm
Yes, this is a summary of the key points, and I do appreciate it, but it doesn’t hold a candle to the actual presentation I sat through. Awesome! You get solid kudos for your engaging performance. It really made me want to learn more. I look forward to your next one.
November 26th, 2008 at 5:30 pm
Ah, comment form fields that allow moderation, but not by the poster. My fault for having too many windows open at once. The previous comment was actually meant for another presenter, who seemed to be having a hard time on stage, but managed to make it work anyway. It should probably be deleted. But for the record, I did also enjoy your presentation, and the opportunity now to dig through the code samples at my own pace.
December 3rd, 2008 at 6:29 am
[…] got a brief post along with a demo and sample code for a really compact PubSub tool, as well as a short discussion […]
December 3rd, 2008 at 3:46 pm
I did not attend the presentation but Mariano Peterson gave me a decent recap. His enthusiastic description of your presentation stood out since we discussed it at length. I’m glad to see that you posted a summary of the presentation and a demo as well, since contemplating your concept was difficult (for not being there).
I have been and will continue to think of how to implement your concept while my brain thinks in terms of MooTools. Good job!
December 3rd, 2008 at 9:49 pm
[…] got a brief post along with a demo and sample code for a really compact PubSub tool, as well as a short discussion […]
December 4th, 2008 at 5:49 am
Hi, I had worked on a similar but a little more evolved (supports wildcard subscriptions)
version of pubsub Details are here(http://aniketn.blogspot.com/2008/12/publish-subscribe-in-javascript.html)
Your comments will be appreciated. Unfortunately there is no demo on that page.
December 4th, 2008 at 8:05 am
[…] got a brief post along with a demo and sample code for a really compact PubSub tool, as well as a short discussion […]
December 5th, 2008 at 1:25 am
[…] got a brief post along with a demo and sample code for a really compact PubSub tool, as well as a short discussion […]
May 1st, 2009 at 5:20 am
Well!! I want to download software pack X-Rumer 5.0 PALLADIUM free. Any link???
I’m so need this magic program! It’s can break captchas automatically! Activate accounts via email automatically too! Absolutely great software! Help me!
And did you hear news - price for XRumer 5.0 Palladium will grow up to $540 after 15 may 2009… And XRumer 2.9 and 3.0 - too old versions, it’s cant break modern catpchas and cant break modern anti-bot protections. But XRumer 5.0 Palladium CAN!!!!
So help me for download this great soft for free! Thanks!
July 2nd, 2009 at 5:01 am
Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!
August 15th, 2009 at 3:02 am
October 11th, 2009 at 2:24 am
PianoTrade…
Megacool Blog indeed!… if anyone else has anything it would be much appreciated. Great website Enjoy!…
January 26th, 2010 at 4:26 pm
The author of blog.narcvs.com has written an excellent article. You have made your point and there is not much to argue about. It is like the following universal truth that you can not argue with: Despite the amount that you find, you or anybody else don?t recall taking off/losing their plasters at the swimming baths Thanks for the info.
March 4th, 2010 at 4:21 am
Do you understand that it is the best time to receive the mortgage loans, which will help you.
March 17th, 2010 at 12:05 am
Aw, this was a really great post. In theory I’d like to write like this also - taking time and real effort to make a good article… but what can I say… I procrastinate alot and never seem to get anything done.
March 17th, 2010 at 4:12 pm
I’ve been looking around for articles similar to this but by no means found one that truly was helpful such as this. Glad I observed this place!
April 14th, 2010 at 11:28 pm
Hej Marcus!
I wonder what license this PubSubBroker code is under?
I’d like to extend it and post it to GitHub if I may, pretty please
Thanks in advance!
/Jacob
April 18th, 2010 at 7:01 am
casino gokkasten…
casino gokkasten…
May 15th, 2010 at 3:08 am
casino nederland…
casino nederland…
May 23rd, 2010 at 8:29 pm
he comes to pinch my ear to wake me,
and runs away quickly when I open my eyes angrily.
May 23rd, 2010 at 8:30 pm
I often can’t help kissing him.
When I don’t want to get up in the morning,
May 30th, 2010 at 3:16 am
Kasyno…
Kasyno…
June 20th, 2010 at 8:48 pm
Your blog writing is very good!Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this. The descriptions are literaturewow goldflavor!Good speech!