Editing A Comparison of JS Publish/Subscribe Approaches

Your details (optional)

Name

Email (won’t be displayed; might be used for Gravatar)

URL

Test case details

Title *

Published (uncheck if you want to fiddle around before making the page public)

Description (in case you feel further explanation is needed)(Markdown syntax is allowed)

# A Comparison of JS Publish/Subscribe Approaches

In this comparison I'm trying to focus on event inheritance feature present in PubSubJS and my implementation of the JQuery PubSub plugin.
In most PubSub implementations Subscribers and Publishers have a one to one relationship. This gives them a huge performance benefit, but can be a drawback when building complex decoupled applications as you have to wire every single event. In this comparison I'm looking at a pretty standard GUI like the one on google.com. We have a HEADER region, a tool region to the LEFT, a CONTENT region and a FOOTER. Each one of these regions are dependent on each other using PubSub to communicate. A MANAGER in each region is responsible for Loading/Unloading modules. A typical PubSub message for this application would look something like this:

"/APP/REGION/MODULE/EVENT"

Using a PubSub implementation that allows for inheritance allow us to create a subscriber for "/APP/REGION" that would listen to ALL events that occur within this region. Using the simpler implementations we would have to publish two events, one for the module and one for the region.

In this example each PubSub implementation has 4 subscribers. One for APP, REGION, MODULE and EVENT each. PubSubJS and JQuery Subscriber may invoke all four subscriber callbacks by a single publication to app/region/module/event where as the rest each has to publish 4 events.

More info: [publish/subscribe](http://en.wikipedia.org/wiki/Publish/subscribe) on Wikipedia.

*Compared:*

* [jQuery custom events](http://api.jquery.com/category/events/)
* [PubSubJS (with inheritance)](http://roderick.dk/blog/2010/10/12/introducing-pubsubjs-a-library-for-doing-publish-subscribe-in-javascript/)
* [Subtopic (with inheritance)](https://raw.github.com/pmelander/Subtopic/master/jquery-subtopic.js)
* [Recursive Observer (with inheritance)](https://raw.github.com/jkroso/Observer/less-function-calls/dist/Observer.min.js)
* [iterative Observer (with inheritance)](https://raw.github.com/jkroso/Observer/Iterative-publish/dist/Observer.min.js)
* [Pure JS PubSub](https://github.com/phiggins42/bloody-jquery-plugins/blob/55e41df9bf08f42378bb08b93efcb28555b61aeb/pubsub.js)
* [Library Agnostic Pub/Sub by Darcy Clarke](http://darcyclarke.me/development/library-agnostic-pubsub-publish-subscribe/)
* [Amplify Pub/Sub](http://amplifyjs.com/)
* [Spine Events](http://spinejs.com/)
* [Ply](https://github.com/richardscarrott/ply/)

Are you a spammer? (just answer the question)

Preparation code

Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries)

jQuery(function() {
    jQuery(window).on('/app', callback);
    jQuery(window).on('/app/region', callback);
    jQuery(window).on('/app/region/module', callback);
    jQuery(window).on('/app/region/module/event', callback);

PubSub.subscribe('app', callback);
    PubSub.subscribe('app.region', callback);
    PubSub.subscribe('app.region.module', callback);
    PubSub.subscribe('app.region.module.event', callback);

jQuery.subscribe('/app', callback);
    jQuery.subscribe('/app/region', callback);
    jQuery.subscribe('/app/region/module', callback);
    jQuery.subscribe('/app/region/module/event', callback);

Events.subscribe('/app', callback);
    Events.subscribe('/app/region', callback);
    Events.subscribe('/app/region/module', callback);
    Events.subscribe('/app/region/module/event', callback);

amplify.subscribe('/app', callback);
    amplify.subscribe('/app/region', callback);
    amplify.subscribe('/app/region/module', callback);
    amplify.subscribe('/app/region/module/event', callback);

Spine.bind('/app', callback);
    Spine.bind('/app/region', callback);
    Spine.bind('/app/region/module', callback);
    Spine.bind('/app/region/module/event', callback);

Ply.core.listen('/app', callback);
    Ply.core.listen('/app/region', callback);
    Ply.core.listen('/app/region/module', callback);
    Ply.core.listen('/app/region/module/event', callback);

require(["https://raw.github.com/jkroso/Observer/less-function-calls/dist/Observer.min.js", "https://raw.github.com/jkroso/Observer/Iterative-publish/dist/Observer.min.js"], function(Observer1, Observer2) {
      window.recursive= new Observer1();
      window.iterative= new Observer2();
      recursive.subscribe('app', callback);
      recursive.subscribe('app.region', callback);
      recursive.subscribe('app.region.module', callback);
      recursive.subscribe('app.region.module.event', callback);
      iterative.subscribe('app', callback);
      iterative.subscribe('app.region', callback);
      iterative.subscribe('app.region.module', callback);
      iterative.subscribe('app.region.module.event', callback);
    });
  });
</script>

Title

Async (check if this is an asynchronous test)

Code

iterative.publish('app.region.module.event', payload);