Inter-component communication in javascript

Question

I have a need for inter-component communication in a web application and am considering different ways to accomplish this. I have some ideas, but would welcome other ideas.

First, a quick and simple example. I have two separate components on a page that are loaded asynchronously. By component , I mean a chunk of HTML that has a javascript object associated with it that includes jquery-based behaviors on nodes in the html. When a user interacts with one component, changes should take place in the other component, and vice-versa.

The key thing to remember here is that each component should be a self-contained unit. It could be re-used in different parts of an application, or even different applications. So it doesn't know about the existence of the other components on the page.

My current thoughts on a solution involve having components listen for custom events that they are interested in as well as sending custom events when an action has taken place. Therefore, each component listens for events that are triggered by the other one.

The problem is that because of the async loading, one component might take longer to load than the other. There is a possibility that an event might get sent too soon and be lost. In some situations this might be fine, but in some cases I need to make sure that all events a component sends get consumed.

So here's some related questions:

1. What happens to an event after it is triggered? Does it just disappear if there are no listeners at the time it was triggered?

2. Is there a way to detect if a triggered even was consumed or lost?

3. What are some good ways for each component to know about the other components ?

4. Are there any existing open-source javascript projects or jquery plugins that deal with these types of things?

In regards to question #3, I'm thinking that each component could send out some sort of register event that includes the types of events that it listens to and a list of components that it has registered with. Components would listen for these register events. Some sort of registration logic using timers would be used to make sure the right components get registered together during the component loading process. Once the registration has completed, then the components would be able to send their normal events.

Answer 1

Message queuing is indeed what you seem to be looking for. I'm sure you can envision various schemes involving an observer object listening for custom events, receiving messages, playing with timing and sequence, throttling, broadcasting, etc. But before getting into all that, take a look at this jQuery message queuing plug-in . Might be a good starting point.

Answer 2

Web services are a good model to reference here. When you have interconnected web services that are used for cloud computing (or any distributed computing platform) they usually implement some kind of message queue or "bus" between them.

You might think about creating a global message queue that handles "events" and can either publish it to subscribers or hold on to it until an action is taken on it (usually called a job).

Answer 3

I'm not sure if this totally encapsulates what you're trying to do, but it sounds like an open source project like JavaScriptMVC may be useful to you. This open source framework lets the controllers handle event delegation and provides some of that separation that you're looking for. It also leverages jQuery under the hood.

The site is a little hard to navigate (or at least find a lot of concrete information) but the intro video is useful (12 minutes in length).

Hope this helps! Good luck!

Answer 4

Something else to consider around event management are the Reactive Extensions for JavaScript from Microsoft (RxJS). It is along the same kind of lines of the controller in JavaScriptMVC where you register events in Observable sequences, but then you can interact with them in LINQ-like syntax.

Matthew Podwysocki has a number of good blog posts about working with RxJS. Here's a few good posts:

Introduction to RxJS (good intro)
Error Handling Pt. 2 with links to his many other posts

And a link to some hands on labs for RxJS.

Hopefully this also helps!