Rich Javascript UI Frameworks, EXT, DOJO and YUI

Disclaimer & Long Winding Question Approaching

I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.

The Question

Given that I have an existing web applicati开发者_如何学Pythonon, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.

Reason

I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.

Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.

Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.

Experience Thus Far

Dojo + Dijit

Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.

Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.

ExtJS

Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.

Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.

YUI

Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.

Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.

Help Me

I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.

Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:

Ext.onReady(function() {
    App = new Ext.Panel({...})
    App.render('div-id')
});

The App panel can then have it's own layout manager.

This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/

Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.

With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.

• There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
• Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
• If you get stuck, there's likely to be people in the Dojo IRC channel that can help.

RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/

I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.