Introducing DOM-Resource

I have been doing a lot of hard core Prototype based AJAX work recently for a client and came to realize that there should be a more DRY (Don’t repeat yourself) way of doing AJAX work.

I mean if you’re already following standards in your rails app and using Rails restful routing, why should you have to repeat yourself in the browser?

So bringing a little side project to life again, I’ve spent the last day or so on DOM-Resource which is my approach to this. It’s really an experiment, but I think it already looks promising.

Quick Intro

Given the following chunk of html:

<div id="people" class="people">
        <div id="person_1" class="person">
                <div class="name">Pelle</div>
                <div class="email">pelleb@gmail.com</div>
        </div>
        <div id="person_2" class="person">
                <div class="name">Bob</div>
                <div class="email">bob@gmail.com</div>
        </div>
</div>

The div’s are marked up using rails conventions. I use these conventions to map back to the server resources.

You can operate on the people resource using the $RES function:

$RES('people').create({name:'Dwight',email:'dwight@dundermifflin.com'}) => AJAX POST call to /people
$RES('people').find(2) => <div id="person_2"....
$RES('people').find(2).destroy() => AJAX delete to /people/2

Individual objects can be manipulated through the $REC function:

$REC('person_1').get('name') => 'Pelle'
$REC('person_1').resource() => $RES('people')
$REC('person_1').destroy() => AJAX delete to /people/1 then removes from dom
$REC('person_1').action('toggle') => AJAX post to /people/1;toggle then replaces element with result

You can also easily extend your Person objects as if it was a normal Javascript object. For more see the DOM Resource Quick Start.

Alternatives

Jester is a pretty cool ActiveResource clone for JavaScript. It tries hard to mimmic ActiveResource, just in Javascript. I had taken a similar approach earlier on a client project, but decided that I might like a more DOM integrated way of doing it. Go check Jester out. Who knows maybe there is some way we can integrate them in the future.

Download

Download the script here:

resources.js

You also need Ryan Schuft’s fantastic Javascript Inflection library :

inflection.js

And of course the latest Prototype which you already have if you’re doing rails work.