Test Driving DED|Chain

I have been using the JQuery JavaScript library for a while now. I enjoy working with this library because it’s small (~19k), it has strong CSS support, and it has good cross browser support. Recently Dustin Diaz released his DED|Chain JavaScript library, built on the Yahoo! UI library, and I figured I would give it a test drive.

Initial Reactions

The functionality provided by DED|Chain seems to be relatively small, however when you think about the fact that the library is built on top of YUI, functionality becomes a non issue. It does leave a substantially larger footprint than JQuery (it takes ~70k to run DED|Chain vs. ~19k for JQuery), however ~63k of the 70 are a result of the YUI utilities.js file which provides the foundation for DED|Chain.

Though I didn’t take advantage of it in my testing, DED provides the developer with the ability to customize interaction with the API. This seems like a nice feature to have as part of the library.

Some of My Favorites

My series of testing documents can be found in the following files:

• Managing Classes
• Animation
• Utility Methods
• Utility Methods (hijackForm)
• Utility Methods (Fetch / Populate)

Throttle (Demo 3)

Throttle allows you to fire off timed requests (once or repeatedly) through an object or array.

1. _$('#foo2 a').on('click', function(el) {
2. _$().throttle(2, myarray, {
3. id: 'fooneedle',
4. callback: function(needle) {
5. alert(needle);
6. },
7. loop: true // defaults to false
8. });
9. }, true);

And to stop the throttle:

1. _$('#foo3 a').on('click', function(el) {
2. _$().stopThrottle(’fooneedle’);
3. }, true);

Repeat (Demo 3)

Repeat allows you to fire off requests (repetition of some action) at a given interval of time.

1. _$('#foo4 a').on('click', function(el) {
2. _$().repeat(
3. 5,
4. 'repeatme',
5. function() {
6. alert("still repeating");
7. }
8. );
9. }, true);

And to stop the repeat:

1. _$('#foo5 a').on('click', function(el) {
2. _$().stopRepeat(’repeatme’);
3. }, true);

I seemed to have issues with stopping my repeat in the testing I performed. I did post a forum topic regarding the issue.

Fetch (Demo 5)

DED|Chains way of doing AJAX, fetch grabs data from a valid URI and allows you to do something with that data. It also allows you to specify before and after callback keys.

1. _$('#foo a').on('click', function(el) {
2. _$('#content').fetch(’data.php’, {
3. before: function() {
4. _$('#spinner').show();
5. _$('#content').hide();
6. },
7. after: function(resp) {
8. _$('#spinner').hide();
9. this.show();
10. this.setContent(resp);
11. }
12. });
13. }, true);

Populate (Demo 5)

Populate provides and very easy way to populate data from a valid URI to a section of your page.

1. _$('#foo2 a').on('click', function(el) {
2. _$('#content').populate(’data2.php’);
3. }, true);

A Final Note

In my testing I wrapped most of my tests up in a click event handler. This allowed me to have more control over my testing.