UI Jane Doing YUI
Filed under: Ajax, Scriptaculous, UX, XHR, YUI, Yahoo, prototype, widgets |
Toby and I played around with Yahoos open sourced UI library YUI yesterday. It is a high level lib containing widgets, Ajax features and a lot of DOM scripting utilities that reminds pretty much of UI toolkits for desktop applications. While PrototypeJS with Scriptaculous are frameworks for coding JavaScript and Ajax in a clean way, YUI is more of a platform with ready-to-configure-and-use stuff.
The upside is that you can get fancy things like desktop application like widgets like sortable and re-sizable tables, expanding trees, and tabs with Ajax XHR data bindings up in a short time without writing much JS code. The downside is that you get a lot of code to send over the network. Although the library has whitespace compressed production files and fragments you can use if you only use some of the widgets, you get pretty soon up to 500kb or 1mb of client side scripts and style sheets. On the other hand, if you compare it to the other major high level web UI framework Dojo Toolkit you get a much more stable and standards bases solution that don’t crash and ordinary browser like Dojo does.
It is obvious that the YUI framework takes the web one step further down the road to replace the rich user interface desktop application without losing the interaction and user experience. That being said, we will not use it on our social network site because of the files size overhead, but continue to use PrototypeJS and to some extent Scriptaculous. But if I were about to build a web based application for an organizations internal use or for a stock broker firm, I would definitely give YUI a chance.
One detail that is awesome with Yahoo is the use of sprites. If you check the default skin “sam” you will see that all background images and gradients are place in one file called sprite.png. The css file the shifts down to a position in that sprite to get the right background pattern using the y coordinate.
The result is that there is just one file that needs to be loaded for the background images (slightly over 3kb’s) and that the user will have it in the cache from start so if the user hovers over a tab e.g., the hover background will appear at once because it is just a sliding shift of the sprite that occurs, not a new bg image that needs to be loaded.
[...] by TechToby on September 6th, 2007 As Jane recently wrote, we spent an evening together with YUI. From a developer point of view I would say that it is a [...]
If Leah “Veronica Mars” Culver is thinking Scriptaculous is too large, I wonder what she thinks about YUI and Dojo.
Sometimes it’s a blessing not to understand all this techy stuff. On another occasion it’s a nightmare.
But that’s why our team works so well. I focus on understanding business, people’s needs and expressing them to Toby, Jane and Connie. They use their great talent in making htem become reality, compelling and easy to understand and use.
Working with pro’s is wonderful. It’s like soaring with eagles. (ref to JFK – wasn’t it?))
Under what circumstances did you see yui using 500KB of assets? Even without gzipping, the largest yui component is RTE, under 300KB of script. Most are much smaller; and even RTE is under 60KB on the wire, including all dependencies (not including css/images).
Regards,
Eric
If you like YUI, take it another step further and have a look at ExtJS (formerly known as YUI-Ext). It has adapters for JQuery and Prototype and set the bar for speed on DOM queries. http://www.ExtJS.com
I forgot to mention that ExtJS also has an support for YUI as well.
Hi Eric,
It might be that we had an overhead in what we included. We put together a data table with a context menu and data source binding, a tab set, used the connection manager for XHR and some event and util methods. We ended up around 500k uncompressed. That was with the whitespace stripped -min files.
I will check if we were using some unnecessary JS or CSS includes.
/jane
very interesting, but I don’t agree with you
Idetrorce