Tuesday, November 18th, 2008

Reglib and jQuery Demo

Category: JavaScript

We posted on reglib, the new declarative event based library by Greg Reimer. I was a little confused at first, but Greg has posted a follow up which includes a demonstration comparing reglib to jQuery that makes his strategy a lot clearer:

Let me first of all stress that I’m not trying to bust on JQuery here. JQuery does something that needs to be done, and it does it just about as well as can be done given the tool-set browsers have collectively placed at our disposal.

With that said, I’m going to go ahead and pimp the reglib way of doing things, by which I mean declarative, over the load-traverse-modify methodology, which JQuery makes so easy.

The demo page linked below has two identical interactive widgets; one wired up using JQuery, and the other wired up using reglib.

The page is rigged like a science experiment, with a control followed by several tests in which you observe differences in behavior between the two widgets in response to various stimuli. The goal is to demonstrate reglib’s resilience under duress (as it were). Enjoy.

The tests show:

The JQuery widget has been cloned using the DOM clone() method. After closing this message, note how the cloned version is non-functional. This is because event behavior needs to be explicitly re-added to each new element under the load-traverse-modify methodology.

The reglib widget has been cloned using the DOM clone() method. After closing this message, note how the cloned version functions normally since reglib event declarations automatically affect all additions to the DOM.

The DOM has been completely overwritten by: document.body.innerHTML += ''; After closing this message, note how none of the JQuery widgets work anymore, meanwhile the reglib widgets continue to function as normal.

At the end of this page’s HTML source is a comment containing a huge block of random numbers. If you don’t have a fast internet connection and you SHIFT+RELOAD this page, it will simulate network latency and/or or dynamic page processing delays, which cause a delay before the load event fires. After closing this message, SHIFT+RELOAD the page. While the page is yellow it means the load event hasn’t fired. During this time, note how the JQuery widget is non-functional, but the reglib widget is functional. This may not be apparent if you have a fast internet connection.

Posted by Dion Almaer at 6:44 am
10 Comments

+++--
3.2 rating from 39 votes

10 Comments »

Comments feed TrackBack URI

The JQuery widget has been cloned using the DOM clone() method. After closing this message, note how the cloned version is non-functional. This is because event behavior needs to be explicitly re-added to each new element under the load-traverse-modify methodology.

Isn’t this FUD? Couldn’t you just use jQuery’s .clone(true)?

Comment by davecardwell — November 18, 2008

I don’t think the point was to diss jquery, rather to demonstrate the qualitative difference between the declarative and the load/traverse/modify approach. I think declarative is the way to go, if feasible. Registering event listeners explicitly to instances is bad practice in any environment (although many environments offer you no choice but to do it).

Comment by Joeri — November 18, 2008

Event Delegation is possible in jQuery, there are some plugins to easily add the behaviour (e.g http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery) if you dont want to manually check the event target from a bubbled event, also delegation is pencilled in to be included in the next version of jq. (http://docs.jquery.com/JQuery_1.3_Roadmap)

Comment by SteveFDotNet — November 18, 2008

@davecardwell
One use of this library would be in the following scenario:
1. You have a complex table with filter and sorting that is updated via ajax and there are many events associated with the data (ex: click on a row toggles a checkbox, click on a text opens the edit form, click on a date activates and inline editor).

If you use the jQuery event binding you have to reattach the events everytime you get new data via ajax request, while using this approach it’s enough to populate the DOM.

Anything that changes the DOM except using .clone(true) that requires attaching events would benefit from this approach. For example if you add a class to an element and you want all the elements with that class to behave in a certain way you can:
1. bind the event AFTER you change the class and unbind it AFTER you remove the class
or
2. use reglib to handle the behaviour.

Jquery has a plugin called livequery but I don’t know if and how this better. Maybe the author can shade some light into this matter.

Comment by miller76 — November 18, 2008

very cool demo and good point on some of the limitations of jQuery. the name reglib is indeed a bit confusing and makes me think it’s some regex lib. almost missed this.

Comment by coolnalu — November 18, 2008

The reglib library is great, I’m currently in the process of moving much of my code to this method, although I ported the event delegation code to work as a plugin to MooTools. I had tried writing my own a while back, but Greg’s code is much better than mine(plus it actually works :p).

Good point about the name, it does sound like a regex library.

Comment by MattCoz — November 18, 2008

I am a jQuery fanboy. So to me it’s a bit strage. First there is clone(true); as mentioned before. Second, if you use jQuery, you just don’t do things like document.body.innerHTML += ”; You work with the DOM directly or with .html(”) on certain nodes.

Comment by Aimos — November 18, 2008

I do find this note interesting:


/*
The main purpose of reglib is event delegation:
- reg.click(selString, handler, depth)
- reg.hover(selString, overHandler, outHandler, depth)
- reg.focus(selString, focusHandler, blurHandler, depth)
- reg.key(selString, downHandler, pressHandler, upHandler, depth)

Note: delegated events are active before page load, and remain
active throughout arbitrary rewrites of the DOM.
*/

Which is indeed somthing what is not always good in jquery. The use of $(document).ready(); is good for BIG handlers, but the onclick handler on a link which might delete something HAS TO be there when a partial of the website is displayed. This si something what forces me all the time to have still inline javascript stuff – which I hate.

Comment by Aimos — November 18, 2008

“Second, if you use jQuery, you just don’t do things like document.body.innerHTML += ”;”

I agree that this is an incredibly irresponsible line of code. However in my world, at least, I don’t always have control over what other JavaScript runs on the page, and irresponsible JavaScript code is frustratingly common. I developed reglib partly for the peace of mind of knowing that my events weren’t going to get blown away or overwritten by whatever J. Random Script happened to be running at the moment.

Comment by greim — November 20, 2008

I’d also call myself a jQuery fanboy, but I’m pretty excited about this announcement. The more good ideas floating around, the better for all of us — especially if those good ideas play nicely with each other. (yay jQuery / boo prototype)

I’ve taken a quick look at the documentation, and I have some thoughts/questions. Perhaps someone can shed some light. (Or, Greg, if the answers are in the docs somewhere, just tell me to look harder ;)

1. I really like the reg.importAll(); function. It feels a bit Python-ish to me — in a good way. I’m wondering if there’s a way to sandbox or undo these changes to the global namespace. Is there a reg.restoreAll(); function similar to jQuery.noConflict()?

2. I love the “:target” pseudo selector! Time to find a jQuery plugin that adds that. Are there any plans to extend the Selector object to include other pseudo selectors like :hover, :first or :even?

3. Does anybody know the underlying differences between this technique and Live Query? I can’t find the word “delegate” anywhere on their plugin description.

[Lastly, let’s not forget that most Javascript libraries have odd to horrible names. “jQuery”? What, is it a Database query helper, or a DOM-implementation of confirm()? “SproutCore”?? Is it punk music for toddlers? Oh, and the mother of all horrible names: “prototype”. Isn’t that like a Ruby library called “object”?]

Comment by strathmeyer — November 20, 2008

Leave a comment

You must be logged in to post a comment.