Tuesday, April 22nd, 2008

Making application modules communicate with each other using Decoupling

Category: Component, Examples, Framework, JavaScript, Yahoo!

I’ve been talking about event driven application design in JavaScript in January last year and inspired Caridy Patiño to write his Bubbling Library based on these ideas.

Caridy now upped the ante a bit by talking about decoupling using the bubbling library over on the YUI blog.

In essence, his solution allows you to have custom events on application modules and listen to them independent of execution order or availability. Simply using custom events can get you in a pickle if you make yourself dependent on their order. With the decoupling solution proposed by Caridy this becomes one less issue to worry about.

Posted by Chris Heilmann at 5:17 pm

4 rating from 29 votes


Comments feed TrackBack URI

Great article, it is extremely important to have decoupling in the complicated web application esp.

Comment by chalia — April 22, 2008

This sounds a lot like JDA (JavaScript Dataflow Architecture);

Any decoupling is good decoupling thought. Taking it one step beyond a message bus, any way you do it, is good.

Comment by peter svensson — April 22, 2008

I dont think I understand how this takes things beyond a message bus. It looks to me like another pubsub implementation (and nothing wrong with that, all ajax frameworks should have one).
Could I suggest you add support for the OpenAjax hub, which will probably be a minimal amount of additional code. I have no association with OpenAjax, just a desire, as a professional javascript programmer, to have more interoperability between all these frameworks.

Comment by heswell — April 23, 2008


In Backbase framework there is a standard DOM-Events (Level 3) implementation built-in that serves successfully the application logic as well as the application components needs by driving execution. You might wanna take a look at how it works.

Comment by caston — April 23, 2008

This is great and we’ve been using our open-sourced prototype-based EventHandler: http://code.google.com/p/motionbox/wiki/EventHandlerDocumentation
to do this with all of our new components. Our work is based on Carridy’s and it’s nice to see Yahoo adopting a similar component strategy to ours :-)! My brief write-up to using our EventHandler to do custom component events is here: http://blog.toppingdesign.com/2008/04/22/custom-javascript-events-using-the-motionbox-eventhandler/

It helps to read the YUI article first though.

Comment by TopperBowers — April 23, 2008

@heswell: You might be right. It seems like the bubbling library is anotehr messaeg bus. Please correct me if I’m wrong. I tried to read through some dox but could only find fairly standard stuff – all very good and well integrated with YUI of course but still.

The JDA approach is to define a workflow instead with JS objects getting input and output “channels” which can be reconfigrued fairly easy, either in HTML markup or dynamically. Has been meaning to port it to Dojo for some time, but now they’ve got their wires and stuff.. We’ll see :)

Comment by peter svensson — April 23, 2008

@sethdill: Thakns for the link. yes, you’re right! Your request broker is just like the JDA idea, and probably like Dojo’s wires of sorts, only earlier and very good :).

But this also proves another central tenet; people don’t want to learn anything, rounded down. But at least we have superpowers ;)

Comment by peter svensson — April 23, 2008

@sethdill: You’re right, in fact I did read your article long time ago, and it did inspire me to modify the bubbling library core to wrap, not only the user’s events (clicks, key strokes, etc), but also to allow customized events. What I’m trying to explain here is how to use this technique with the YUI Library, as easy as possible.

@peter: You’re right, definitely I will review the JDA.

Thanks everybody for sharing your thoughts.

Comment by caridy — April 23, 2008

I am going to look into this “decoupling solution”

Comment by Tribulus — September 22, 2008

Leave a comment

You must be logged in to post a comment.