reglib versus JQuery

Read the reglib tag trail for more about reglib, or subscribe to the feed of all things tagged reglib.

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.

» Demo Page «

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.

Comments:

very nicely done demo, makes the issues you speak of crystal clear.

- jeffs -

Posted by Jeff Sonstein on November 15, 2008 at 07:57 AM MST #

jQuery can pass Test #2 by using clone(true): http://docs.jquery.com/Manipulation/clone#true

Posted by Jörn Zaefferer on November 15, 2008 at 07:09 PM MST #

The Live Query plugin for jQuery (http://brandonaaron.net/docs/livequery/) appears to do the same thing. It binds events to the document, and whenever an event bubbles up to document, it matches the query and executes the action. It works post-cloning, and pre-DOM-loading.

Posted by S Anand on November 15, 2008 at 07:18 PM MST #

S Anand is correct that the livequery plugin accomplishes this for you, but is incorrect in how it does it. livequery does not use event delegation; the events are bound directly to the appropriate elements when the DOM is manipulated.

There is also an event delegation plugin that would accomplish this in a similar manner. This plugin has the extra flexibility of allowing the user to define where the delegation should take place. By performing the delegation on the body element, you would create the same functionality that reglib provides.

With that being said, both libraries would benefit from the ability to handle standard event binding and delegation out of the box, since they both have pros and cons.

Posted by Scott González on November 15, 2008 at 11:09 PM MST #

That's interesting. I've been wondering whether it would be worth it to add JQuery-esque event-attachment functionality to reg, to balance out the capabilities of the lib, but so far I haven't had a huge personal need for it. Which of course doesn't mean others wouldn't.

Posted by Greg on November 16, 2008 at 06:00 AM MST #

Hey Greg, I'm very interested in the "super-delegate" (that's what I'm calling it) event registration pattern, but I have a rather open-ended question that I'm curious to know if you've already considered:

Why should reglib, with its completely different event registration paradigm, share the same concepts for most other things (like 'event' and 'selector') with jQuery?

Since a super-delegate model already abstracts event targeting, there's no reason besides convention to re-implement the traditional local/non-delegate event model. The super-delegate event handler has to decide, based on some criteria, which callback functions to call, but there are no restrictions on what those criteria must be. To the callbacks, it makes no difference whether they were registered with reglib or jQuery, but the super-delegate pattern opens up many possibilities for even more differentiation, usefulness and performance gains not otherwise possible.

As a quick experiment, last night I realised I could replace CSS selectors with regular expressions:

http://gist.github.com/25839

I think there's lots of room for innovation here. Regular expressions are just a trivial example; it's completely arbitrary what axis events "bubble", whether bubbling is linear, confined, etc. and how selectors tie this information to callbacks. My head is spinning!

Posted by Scott Hughes on November 17, 2008 at 03:43 AM MST #

I think I see where you're going. Looks like you test the regexp against a string you construct while traversing the parent chain from the target. I've wondered along those lines before too. Nothing like your RegExp idea, but I've half-planned on adding a predicate option to reglib's CSS selectors. This would be a total break from the CSS selector spec, but even now reglib's attribute selectors aren't compliant, and who says JavaScript libs need to conform to the CSS spec anyways?

Posted by greg on November 17, 2008 at 05:17 AM MST #

If I'm getting it right reglib is a CSS selector API implementation coupled with event binding/delegation. Hey, these are all possible with the major libraries at least with some small plugin (and there's Sizzle for css selectors as well). If reglib has some advanatage over these I'd be curious but now I don't really see any. And why is this news on Ajaxian? Maybe I'm missing something?

Posted by Carl on November 18, 2008 at 12:06 AM MST #

Really neat stuff. I was just looking through your code and it doesn't look like you've included mousedown or mouseup up events. Am I right?

Posted by Brent on November 18, 2008 at 04:18 AM MST #

@Carl - At least one advantage of reglib is that it's lightweight at 34k (and that's the fully-commented, un-minified version). Which is perhaps slightly smaller than a major library + plugin. However if you're comfortable using your favorite library, it's certainly not my aim to try to convince you otherwise.

Posted by greg on November 18, 2008 at 05:23 AM MST #

@Brent - I don't support mousedown/up events at the moment but it would be trivial to add it. Mainly because I haven't personally needed it yet. My M.O. for this library has been scratch-my-own-itch combined with keeping it lightweight. I'll probably add it at some point soon.

Posted by greg on November 18, 2008 at 05:31 AM MST #

I don't think it's appropriate comparing reglib to jquery, as jquery comes with substantially more functionality straight out of the box. Ajax handling and effects to name just two.
Jquery also enables far shorter code on the part of the developer. Because everything is based on the selection, it means one can use DOM or JQuery methods directly on the selection, and these methods can all be chained together. I'm not trying to bust on reglib here, what it does is very useful, but you're comparing apples to oranges.
Paul

Posted by paulhan on November 19, 2008 at 12:05 PM MST #

Wow, am I glad I looked at this blog entry.

reglib is a powerful abstraction!

Posted by Nico on November 20, 2008 at 02:28 AM MST #

It's interesting stuff. It kinda reminds me of XUL bindings. https://developer.mozilla.org/en/XUL/binding

Posted by Yansky on November 20, 2008 at 04:06 AM MST #

@paulhan - I both agree and disagree. JQuery is certainly a more mature and full-featured library, but as I said, this is a comparison of paradigms, not libraries. It's just that to build live examples you need to illustrate it using libraries.

And while my tactical goal with these blog posts is to promote reglib, my strategic goal is to challenge the current paradigm. In fact, I hope reglib, JQuery, Prototype et. al. will be someday obsoleted by an XBL-like standard implemented across all major browsers.

Posted by greg on November 20, 2008 at 04:41 AM MST #

Greg, thanks for your response on the Ajaxian thread! I figured it would be most appropriate to keep the conversation going here.

>> Is there a reg.restoreAll(); function similar
>> to jQuery.noConflict()?

> There isn’t. Would the use case be,
> reg.importAll()
> …do some stuff…
> reg.unImportAll()?

Yes, that would be the exact use case: to clean up (or restore) the global settings after using the imported functions.

An alternative implementation might look like:

reg.withImportsDo( function () {
... do some stuff ...
});

I'm not enough of a Ninja to know if that's even possible, but I'd prefer the previous reg.unImportAll() implementation. It makes the lonely '});' unnecessary, and that's a good thing. I think that character sequence is an all too common wart in jQuery code.

In any case, it's not a necessary feature, but it makes the library easier to use, while letting it still play well with others (a prime concern IMHO). In that same vein, I might advocate for a reg.noConflict to completely restore the 'reg' object (as jQuery.noConflict(true) does).

Posted by Eric Strathmeyer on November 21, 2008 at 07:39 AM MST #

Thanks, Eric. I'm going to have to ponder these ideas for a while. Meanwhile, with the way reglib is currently set up, you can rename 'reg' to anything by changing one line of code at the beginning of reg.js. Which would offer a way to sidestep most naming issues.

Posted by greg on November 23, 2008 at 09:37 AM MST #

@Brent - mouseup/down and dblclick events are included in the latest release.

Posted by greg on November 23, 2008 at 03:23 PM MST #

Looking at this blog and Scott Hughes comments the next obvious step is an abstract library for this super-delegate pattern (yes, I am calling it too) with plug-ins implementing "delegate" and "register". If you want to use CSS selectors use reglib (maybe Sizzle?) or for regexp implementation => Scott's code or build your own plugin.

Posted by Victor Doss on January 04, 2009 at 07:00 AM MST #

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today