Thursday, February 12, 2009

jquery rocks! now back to GWT

Update: read the followup to this post, Why I left GWT and came crawling back to jquery.
I just finished a project that includes a rich, complex web interface built on jquery, and now it's time to report the good, the bad, and the ugly.

The Good

Certain things can be expressed with incredible succinctness in jquery. In a finished project there are snippets of code sprinkled throughout that really evoke a smile. Certainly other projects have a lot to learn from the expressive power of jquery.

The Bad

One core principle behind jquery is the idea of progressive enhancement; that is, you start with HTML markup that would render reasonably well in a browser even with no javascript enabled. Then you add in some well placed jquery "enhancements" via selectors, plugins, etc. and the page literally comes alive.
The problem is, projects have deadlines. When a business person funds a project, they don't really care if the site runs without javascript enabled. So, in the push to launch the project, the ideals of progressive enhancement quickly fall by the wayside.

The Ugly

In reaching for the ideal of progressive enhancement, jquery performs weakly in one important feature of traditional software engineering: encapsulation. Certainly the code within plugins is encapsulated, but the markup on which those plugins operate is completely exposed. The very power of selectors and plugins for progressively enhancing existing markup are also their downfall: when the markup needs to change for some reason, you must carefully review/debug/bang-your-head-over all the selectors and plugins and the assumptions they made about the markup that are no longer true.

Back to GWT

I'm starting a new project now, and I'll be doing this one on GWT. Is it because GWT is better than jquery? No, that is certainly not true in the general case. To breathe new life into an existing web site, there is perhaps nothing better than jquery. No, I'll be doing this project on GWT because progressive enhancement is not relevant. The ability to encapsulate DOM structures and behavior together, and then refactor wildly (with no fear of breaking carefully crafted selectors and plugins) will be essential to this project. And so it's back to GWT.
Fear not, jquery, my friend. We have built great things together, and there will be other times.






8 comments:

Anonymous said...

I agree with you...

jQuery could be the right for small development but for complex one GWT based on Java and with its awesome compiler/optimiser is the right tool.

Jeoff Wilks said...

John Resig seems to agree that 95% of jquery users don't use or need widgets and other large-development paradigms.

That said, later in the same thread you can see that he's clearly looking at these areas. He just wants to solve them right.

And I agree. One problem with GWT is that it has some great plumbing (seamless RPC, automatic CSS image sprites, etc.) but the widgets themselves feel like they were hastily designed. Sometimes the behavior you need is buried in private methods that force you to either fork the source code or rewrite yourself from scratch.

David Yu said...

Agree 100% It definitely lacks encapsulation.
Perhaps some kind of framework could be spruced up to solve this in jquery.

Modularized views maybe?

Cheers

Jeoff Wilks said...

David,

This article on custom events in jquery by Rebecca Murphy makes some interesting points about how to better encapsulate jquery behaviors. The idea is instead of directly connecting DOM elements to widgets by means of browser events, you fire logical events that widgets can act on.

The code samples in the article are not indented properly, but the ideas have merit.

Tetsuo said...

jQuery is perfect when you have a HTML interface, and want to 'enhance' it.

For full javascript construction of the interface, something that emphasizes modularity and OO (such as Prototype) and have built-in components (such as ExtJS and Dojo) would probably be more appropriate.

Florian said...

One major thing missing in jquery is a template engine that lets you throw together markup without tying that markup to your code AND without introducting a markup/code gap that would make use a lot of selectors to attach behavior to that markup.

Enter jquery.string.js that lets you write markup templates that you can fill/expand in your jquery code without closely tying to it with selectors.

Alexandre Gomes said...

Hi guys,

Why don't you take a look at www.javascriptmvc.com.

Cheers,
Alex

Jeoff Wilks said...

Read the followup to this post, Why I left GWT and came crawling back to jquery.