Thursday, April 5th, 2007

Event.Behavior: DSL for JavaScript

Category: JavaScript, Library

Ryan Johnson is quite prolific these days. His newest creation is Event.Behavior, a domain specific language for describing and defining events in your JavaScript applications. It attempts to approximate how one would describe an event in the english language and allows you to extend it with your own verbs.

The library was inspired by Adam McCrea’s presentation on Meta programming with JavaScript, and is built on top of Prototype 1.5.

Here are some examples:

javascript

  1. with (Event.Behavior) {
  2.     show('postal_code_field').when('country_select').is('United States').or('Canada');
  3.  
  4.     set_style(styles).on(paragraphs).when(selects).change();
  5.  
  6.     add_class_name('black').to('paragraph').when('color_select').is('black');
  7. }

Event.Behaviour

Posted by Dion Almaer at 6:52 am
5 Comments

++++-
4.2 rating from 40 votes

5 Comments »

Comments feed TrackBack URI

Wow very insteresting project … bonus, It will help me to improve my english ;)

Comment by Nicolas — April 5, 2007

Very interesting indeed. I bet Adam didn’t see this one coming. Congrats to Ryan on putting a good idea to work.

Comment by Andres Almiray — April 5, 2007

um….. can anyone say “big deal” and/or why is pseudocode being heralded as an invention??

Comment by steve — April 5, 2007

i thought pseudocode meant code that shows an idea but doesn’t actually run

Comment by andy — April 5, 2007

Interesting idea, but please don’t sacrifice code quality for dumbed down readability, that’s what comments are for. One of the examples on that page is:
with(Event.Behavior){
add_class_name(‘black’).to(‘paragraph’).when(‘color_select’).is(‘black’);
add_class_name(‘red’).to(‘paragraph’).when(‘color_select’).is(‘red’);
add_class_name(‘green’).to(‘paragraph’).when(‘color_select’).is(‘green’);
add_class_name(‘blue’).to(‘paragraph’).when(‘color_select’).is(‘blue’);
add_class_name(‘bold’).to(‘paragraph’).when(‘weight_select’).is(‘bold’);
add_class_name(‘normal’).to(‘paragraph’).when(‘weight_select’).is(‘normal’);
}

This should be simply:
$(‘color_select’,’weight_select’).invoke(‘observe’,’change’,function(event){
$(‘paragraph’).addClassName(Event.element(event).value);
});

I could be wrong but I’m guessing each Event.Behavior “statement” is a separate event observer, so not only is this example extremely verbose, but it’s also very inefficient and not maintainable. However, some other examples they used were actually pretty cool.

Suggestion: for all constructs that can take a function which returns an array of elements, you could make the code much cleaner by allowing you to pass a string which is assumed to be a CSS selector, in which case it would pass that to $$ itself rather than requiring you to pass it a function that just wraps $$. This would also be more readable since you don’t have ugly inline functions or functions defined elsewhere.
Example:
with(Event.Behavior){
set_style(styles).on(‘#font_picker p’).when(‘#font_picker select’).change();
}

Comment by Colin — April 6, 2007

Leave a comment

You must be logged in to post a comment.