Apr 27, 2012

Behaviorial Driven Development with whenever.js

There are some things I have seen in my developer life that have totally bewildered me. Some of these things were jarring just because of their newness, others never lost their feeling of being a bad idea. Whenever.js is one of the latter. Whenever.js, surprisingly not a testing framework, takes Behaviorial Driven Development (BDD) out of the testing realm and brings it into development.

Instead of writing simply JavaScript code, you get to write conditions, linking code, AND JavaScript code. Below is a behavior that does nothing by itself but describes the conditions under which you should change the text on a button.

    whenever('Click Me!').is('clicked').then('Change the text to "Clicked!"')

Next you have to link from the behavior to HTML elements. The following snippet links 'Click Me!' with an anchor tag decorated with a click-me class.

    whenever.definitions.add({
      'Click Me!': 'a.click-me'
    })

Finally, you need to define the action that will be taken, in this case changing text on a button.

    whenever.actions.add({
      'Change the text to "Clicked!"': function(){
        $(this).text("Clicked!")
      }
    })

Whenever.js is interesting in the respect that it can allow designers and product people who don't code to take a more direct role in UX. It could work well with small applications, I think it quickly loses its luster on a big application. The 9 lines of code listed above can be summed up in a one-linerr

    $('#a.clickme').click( function() {
        $('#a.clickme').text('Clicked!')
    });

I like the idea of whenever.js as a cool architectural project but couldn't recommend using it in anything but demoware.