the web is event-driven, and so is your code

August 3rd, 2007

You click on something and then something else happens, you scroll the window and something moves around.
Welcome to the event-driven web, a concept that still some developers fail to assimilate.

the event-driven web

Developers need to understand that events are (or should be) everywhere, whether on DOM elements, over the HTTP protocol on in plain old javascript objects.
Now, the former two methods are well agreed and documented, yet the later is still an undiscovered world for many developers.

event driven… objects?

Think about it, you attach events to DOM elements, you respond to events pushed by the server yet you are still using a rigid callback based architecture in your objects and pseudo-Classes. That's plain wrong.
let's take object foo as:

1
2
3
4
5
var foo = {
  bar: function(baz) {
    /* do some stuff here */
  }
}

what the average developer does when they need to do something after bar is finished is to add another parameter into the call of bar:

1
2
3
4
5
6
var foo = {
  bar: function(baz, callback) {
    /* do some stuff here */
    callback();
  }
}

If you then need another callback to do something in the middle of bar, soon enough before you notice you will be growing a bloated piece of code. You will notice this approach is not extensible any more when you see you need *yet another* parameter passed into your object to add the new functionality.
To keep things clear, what your object/widget/Class should do is to "raise it's hand" when it needs our attention, and allow us to externally do whatever we desire on the outside, we should not pass-in callbacks to the object, we should run our callbacks once the object told us it's proper time to do so.

mootools to the rescue

So yes, achieving this in plain javascript is not possible as events are only part of the DOM elements. However there's one nifty (yet barely known) feature in mootools that lets us extend any object with whatever set of functions we desire. For the Ruby folks, that's mixins for javascript.

If you are a mootools lover, you may already know that Classes natively implement the Events interface. What you might not know is that *any* object can be mixed-in with Events to be that event-raiser we need.
So when needing to set-up callbacks in our code we could better use:

1
2
3
4
5
6
7
var foo = {
  bar: function(baz) {
    /* do some stuff here */
    this.fireEvent('onComplete');
  }
}
$extend(foo, new Events);

The result of this is that our object foo can now raise events, ones that we can attach to at *any* point of our code by the simple means of:

1
2
3
foo.addEvent('onComplete', function(){
  alert("hello from foo's onComplete");
}.bind(this));

and any time you need a new callback you can just set up another event and respond to it accordingly. Setting up an event of course, is as simple as adding a new fireEvent call where necessary and no more fiddling around with you perfectly built object.

conclusion

Events are everywhere on web development, and it's our job to use them where applicable and know how to do it. Events for regular objects help you keep your code extensible and semantically consistent with the rest of your DOM-based code, and that is a Good Thing.

PS: for those out there not using mootools or not needing it's whole range of functionalities, there's also the tiny Object.Event library that basically allows you to reach the same results, with a prototype-like syntax.

2008-07-13 Update: Having re-read this article many times, I must warn you that I do not fully agree any more to many of the points exposed at that time, so take the lecture with a grain of salt and simply imagine that the article was correctly written and explained.
Still, there's a lot of potential in using custom events inside your javascript code and I encourage you to investigate more into the topic.

9 Responses to “the web is event-driven, and so is your code”

  1. Nicolas Sanguinetti says:

    Ahem, JavaScript supports the concept of "mixins" natively, just by having a prototype-based object model. The capability of firing custom events has nothing to do with that :)

    Nice writeup, BTW.

  2. Wynand Winterbach says:

    I must admit to disliking the inversion of control which is part of normal event-driven programming.

    When I discovered functional reactive programming, I immediately fell in love with it, because I only had to declare relationships between objects without having to handle events explicitly.

    Flapjax (http://flapjax-lang.org) is an awesome Javascript library which implements functional reactive programming techniques.

    I'm curious to know what you think of that paradigm.

  3. Wynand Winterbach says:

    I forgot to mention this – the only bummer with Flapjax is that some of its functionality doesn't work with Internet Explorer. But it's still very usable with IE! :)

  4. Obnoxious says:

    Meeeec! Wrong. The web is resource-driven. Desktop applications are event-driven. Web is not a desktop application. Even web applications are not desktop applications. Take some REST and think about it again.

  5. gonchuki says:

    every day more and more typical desktop applications take a new home in the web.
    The web is not about stateless stuff anymore, we need a much richer interaction that is demanded by these desktop-like web applications and what I advocate in this article is to remain consistent throughout the whole application design process.

  6. Nicolas Sanguinetti says:

    LOL. And you cite 37signals as non-restful applications? Read again :D

    They are one of the groups that has made REST "more" popular in this last year, thanks to rails restful approach to development.

    You still misunderstand REST :)

  7. Pablo Viojo says:

    I agree with gonchuki, the web is currently evolving to a richer UI paradigm, so event-driven solutions, at least for the UI, are superior to the traditional web application approaches. Anyway it has no direct relation to REST as long as REST refers more to the transport layer than the UI, so you can continue using REST and an event-driven for your UI design

  8. Concept&Development » Blog Archive » The web is event-driven, and so is your code says:

    [...] Escrito hace un tiempo, pero interesante. The web is event-driven, and so is your code [...]

  9. Will says:

    wow. lot of haters in the comments. I know this is old but some of those people should come back and have another look.

    Event driven UIs = readable JS code.

Leave a Comment