Yahoo! User Interface Libraries

Feb 28, 2008 – 17:14 by Ryan

We are always on the hunt for web technologies that add functionality and decrease development time. We have been tracking The Yahoo! User Interface Libraries (YUI) for a while and are finally ready to slap on the Deft Labs seal of approval :-)

photo credit: V.P.Tz.

Paradigm Shift

For more than a decade engineers have been debating about which technologies are best suited for dynamic HTML page development. Typically, a developer would fall into the PHP, Java, Microsoft, Perl, Python or Ruby camp. All the platforms have similar tools, strengths and weaknesses when it comes to dynamic page development.

Something a lot of developers haven’t fully grasped is that the future will not include much in the way of server-side Html generation. The Internet makes a lot more sense when HTML clients are developed exclusively in JavaScript/static HTML. The paradigm of client-side HTML generation definitely isn’t new but the tools available are finally maturing.

Review

Over the last year we researched Dojo, GWT, script.aculo.us, Prototype, and YUI. All the frameworks have numerous strengths and weaknesses but we found YUI to be the best in show. To make our decision, we looked at:

• Documentation
• Available Libraries/Functionality
• Sample Code
• Styling Attributes
• Developer Adoption
• Code Performance
• Reliability
• Project Progress
• Content Distribution

We found that when all aspects were considered in each framework, YUI was the best solution for us.

Content Distribution

The beautiful part about client-side HTML rendering is that your client can be deployed globally on a CDN. Requests for dynamic content will still be sent to your servers via AJAX but the amount of data transfered for each action/request is drastically reduced. Additionally, you can cache data on a CDN in the form of JSON encoded data structures/files.

An added bonus of using the YUI is that you are able to piggyback on their content delivery network. This provides lower bandwidth costs, geographic distribution but most importantly caching in the browser. Yahoo! also uses YUI so there is a good chance the libraries will already be cached in the user’s browser (thus decreasing the time to load the page).

SEO Issues

One of the primary issues with an all JavaScript UI is Search Engine Optimization (SEO). Most bots or crawlers are not smart enough (yet) to render JavaScript UIs. This creates a problem when user’s are trying to find a piece of content through a search engine. Until the crawler technologies catch up, there is a simple way around this problem. You can identify the user agent in the request and display a separate/simple page. For example, if the request detects a crawler then you can display your content in a bot friendly format.

Of course the links provided to the bot must be translated when the user agent is indicative of a user. To assist you in keeping track of the crawlers you can use the data provided by the Browser Compatibility Project. The basic flow of this looks like:

If you’re using Apache you can accomplish this using the rewrite module.

Another way to simplify things for crawlers is to create a Sitemap file with all of your pseudo crawler links. If you only have several pages that need to be indexed then you can always use the <noscript> tag.

Cost

Currently, there aren’t any fees tied to using YUI. However, we think that Yahoo! will eventually start charging for the content distribution. It makes sense for Yahoo! to create a loyal developer base first.

License

The source for YUI is freely available under a BSD style license.

Happy Coding!

Sphere: Related Content