Developers Club geek daily blog

3 years ago
Observer and Pub-sub, probably the most known patterns of interaction in the world of development of interfaces and JavaScript. But despite the popularity, some developers consider these patterns identical, as served as help to write this article.

Observer vs Pub-Sub

There are very many templates of design, for example, a facade, factory, the adapter, the bridge, etc. It is considered that each developer applies design patterns, just solving daily problems, at the same time perhaps he even does not know about their existence. For example, such patterns as a facade, factory or the adapter, it is quite possible to apply even without studying them since they quite elementary and are the logical conclusion at a solution of any tasks. In my opinion, the best pattern is an existence of a brain in the head and desires to make a qualitative product, patterns in itself are not a final solution, and give only the common decision for typical tasks.

But it is not possible to live in the world of interfaces and asynchronous JavaScript without knowledge of patterns of observer and pub-sub as the knowledge and understanding of these templates, considerably facilitates life to the developer.

Observer and Pub-sub belong to behavioural patterns (interaction patterns), i.e. are applied when it is required to organize interaction between different objects of system.


Observer represents no other than one-to-many communication. In the simplified type this pattern consists of object of supervision (subject) and observers (observers).

The schematic circuit of interaction looks so:

Subject — implements methods: observe, detach, notify, get, set.

Observer — implements the update method.

Also subject contains references on all observers which listen to it, and observer, in turn contains the reference, on subject on which it is signed.

Thus in this pattern direct link between objects is observed, i.e. subject knows about all the observers and manually notifies them on the changes happening in themselves, calling the update method at each observer. Connection is established by the observe method, broken off by the detach method.

Subject stores in itself the status and all actions with its status need to be made using get/set methods that at state changes to call the notify method. The similar scheme is implemented in EmberJs.

Observer can be provided quite quite good picture (it is borrowed here):
Observer vs Pub-Sub
Approximate implementation can be found on the website Addy Osmani.


Pub-sub a pattern is one of Observer pattern variations. Proceeding from the name in a pattern select two Publisher components (publisher) and Subscriber (subscriber). Unlike Observer, communication between objects is performed by means of Event Channel communication channel (the bus of events).

Publisher throws the events in Event Channel, and Subscriber is signed for the necessary event and listens to it on the bus that provides lack of direct link between the subscriber and the publisher.

Pub-sub and difference from Observer is schematical, it is possible to provide so:
Observer vs Pub-Sub

Thus it is possible to select the main distinctive features between Pub-sub and Observer:
  1. lack of direct link between objects
  2. objects signal each other events, but not statuses of object
  3. an opportunity to subscribe for different events on one object with different processors

One of the most known implementations of a pattern of pub-sub is Backbone, AmplifyJs, etc. DOM, somewhat too implements the pub-sub model.


On the basis of pub-sub work of a pattern of Mediator which allows to adjust communication between different components of system is based. Mediator represents global object in system about which know all components of system, at the same time the component can act both the listener of an event, and the publisher of other event, thus adjusting communication between objects of system.

If to draw an analogy, then Mediator is city automatic telephone exchange to which the entering and outgoing calls from subscribers come, and they reach strictly the necessary subscriber. But as we know the telephone network has a shortcoming — for new year it can be overloaded with a huge number of calls and cease to deliver a challenge to subscribers. Most can happen also to Mediator when it does not cope with an event stream.

Mediator is especially useful when the multiple unidirectional or bidirectional communications between different components of system are observed. Especially the pattern is useful when in the application there are components of system enclosed each other (for example, child composition entries) that there was no need to forward callbacks using model of emersion of an event from within outside. It is enough to provide Mediator to an internal component which will publish the event, and other components learn about this event.

Mediator a pattern is quite successfully implemented in Backbone — the global object of Backbone can be used as Mediator, or to be inherited from Backbone.Events.

What? Where? When?

When and where it is necessary to apply each pattern — business of everyone, but before applying, it is necessary to understand their differences and features. For example, Observer a pattern represents direct link between objects and signals the observer about change of the status. In my opinion, this pattern very well approaches when developing different forms with a set of data entry fields when it is necessary to react to changes of field values of a form (binding).

Mediator pattern as it was already noted, is especially useful when it is necessary to establish the unidirectional or bidirectional relation between separate components of system, for example, in difficult interfaces with a set of composition elements when it is necessary to forward an event from the enclosed view upward that in other view to display any information or to perform the operation depending on this event.

To esteem

  • Learning Javascript Design Patters, Addy Osmani
  • Programming in the large with Design Patterns, Eddie Burris
  • Code samples
Observer differs from Pub-sub?

126 people voted. 35 people refrained.

The users only registered can participate in poll. Enter, please.

This article is a translation of the original post at
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here:

We believe that the knowledge, which is available at the most popular Russian IT blog, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus