Ionrock Dot Org

My Weblog

The Problem with jQuery as a Framework

First off, I'm a fan of jQuery. It is a great library. My problem is I want to use more of it! I want a Rails/Django/Pylons/Your Framework Here for writing Javascript apps. The problem is that while jQuery provides a very powerful plugin architecture, it doesn't offer a set of conventions and helpers to make writing a Javascript app with jQuery consistent. I find that every time I step up to the Javascript plate with jQuery, my path is usually sporadic and rarely do I cover the same ground in term of application design, while many of the same requirements exist. With that in mind, what I'd like to have is a jQuery framework that does the following.

1. Presents a clear and obvious place for configuration. Many of the tutorials suggest a pattern of providing default options for a plugin, but the pattern is rarely the same.
   
2. Provide a simple way of defining different kinds of functions. I'll go into more later.
   
3. Theme and/or template support. This is already starting to be solved via jQuery-UI, but it is somewhat limited to widgets. It also infers specific details about how an item will be laid out. What I'm looking for is a generic pattern for taking a selector and adding some visible feature. This includes things like DOM nodes and styles/classes, but is not meant to provide a look and feel as much as a way of consistently mapping between a set of configured classes/selectors/ids and program logic.
   
4. Dispatching to an obvious set of exposed functions for a plugin interface. The pattern that seems prevalent is the $(selector).plugin($action, options) pattern. I'm cool with that. The question though is where do you go from there? I've created basic dispatchers, but the pattern is limited based on how you define that dispatcher and the functions accepting the result. Personally, I'd like to see a WSGI interface here, but that honestly seems doubtful as one of the killer features of jQuery is the chaining, so no big deal if it limited to cater to chainability.
   

Regarding the different function types, it is unclear the best way to organize a plugin. Looking at the jQuery UI code, there are some obvious patterns, but they are difficult to follow within the scope of creating your own plugin. There seems to be a lot of ramp up code involved that hides the basic patterns. As I mentioned above, it would be nice to have a set of function type helpers to reduce the boilerplate as well as simplify things. One good example is that most jQuery plugins work with a selector and without a selector. It would be nice to have an easy way of defining a functions that have either functionality or both. Likewise, having an obvious place for a simple library function seems helpful as well.

One thing I'm not looking for is another MVC pattern. I don't think it makes much sense as the DOM and jQuery's data features provide more than enough model enough, in addition to effectively defining the view in one way or another. What I'm thinking about be more like a stack of functions and hooks that you plug into. These would effectively just be namespaces that have assumptions. Something like:

$.plugin = {     dispatch : 'action',     actions : { 'show' : function () { ...}, 'hide' : function () { ... } },     libs : { ... }     config : {...}     ui : { ... } }

Now, I have no idea how that "ui" thing would work or what the "action" dispatcher is, but hopefully it is somewhat clear what the idea is. While jQuery rules, it is not obvious how to use all the amazing bits. There is still a lot of voodoo that happens in the Javascript world and having a Javascript specific set of constraints to keep things in order might be very helpful in pushing the limits that much farther. I'm not talking about things like Cappuccino that provide an entire GUI framework either. This is just a set of design patterns and helpers to make the basics a little more obvious so those folks who don't program in Javascript every day (ie most web developers) have a better chance of doing something really interesting. If constraints set you free, then that means Javascript, with its crazy features and style, is a prison.

I'll probably take a stab at the above idea, but if you're intersted in sending along code, I'd love to see it. Likewise, if you do the work, I'm happy to sit by and cheer you on. Is this a decent idea?

Share: