Yahoo! User Interface Blog

Full Service: The Yahoo Developer Network and the Yahoo User Interface Library (book excerpt)

All of us at Yahoo! were excited this spring when long-time web developer and blogger Christian Heilmann joined our increasingly deep and talented frontend engineering team in London. Christian had been working for etoys, had been involved in the development of dozens of high-profile sites (including VisitBritain.com), and is the author of the well-regarded web-developer site ICant.co.uk.

Christian had also been working on a new book, Beginning JavaScript with Dom Scripting and Ajax, From Novice to Professional, which is now coming off the presses and is soon to appear in book stores. In Chapter 11 of the new book, Christian explores the YUI Library from an implementer’s perspective and steps through a variety of code solutions using library components. We asked if we could share a free preview of the YUI section of the book here, and happily the editor at APress agreed.

• Download Full Service: The Yahoo Developer Network and the Yahoo User Interface Library (PDF, 4.5MB), from Chapter 11 of Beginning JavaScript with Dom Scripting and Ajax, From Novice to Professional.
• Visit the book’s website, where you can download the code samples.

Thanks to Christian and to Chris Mills, editor at APress, for allowing us to post the excerpt.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Cheat Sheets for the YUI Utilities

Comprehensive documentation for the YUI Library is found online at the YUI section of the Yahoo! Developer Connection website.

To supplement this online documentation, the YUI development team has begun drafting some cheat sheets — inspired by the handy references published by ilovejackdaniels, among others — that give you a one-page dashboard of documentation for each of the library’s components. When you find yourself elbow-deep in a coding problem, sometimes it’s quicker to turn to these rather than firing up a browser to review documentation and examples. Moreover, reviewing the cheat sheets can help you discover hidden gems you didn’t know were there. If you’re wondering, for example, what the syntax is for batching a function on an element collection, the Dom Collection’s cheat sheet might be enough to get you started:

These one-page references aren’t comprehensive, but we think you’ll find them valuable to have on hand. Today, draft references for each of the YUI Utility components (Event Utility, Dom Collection, Connection Manager, Drag and Drop, and Animation) are available:

• Download the references in PDF format
• Visit the YUI Library page on the Yahoo! Developer Network

Update 2006/08/03: I’ve updated the links here to point to the download area on the Yahoo Developer Network rather than at the YUI v.0.10 cheat sheet zip file. Since this post was made, YUI has incremented to 0.11 and a bunch of new cheat sheets have been added. The latest zip file should always be available from this location on YDN. -EM

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Global Domination

JavaScript, as realized in browsers, is a load-and-go programming language. Programs are delivered to the execution site as text. This is a good fit for the web, which is at its root a text delivery system. The program text is eval‘d, which compiles it into an executable form and then immediately executes it. That execution can leave artifacts in the window’s global object.

The global object is the global namespace that holds the top level functions and global variables. Variables which are not explicitly defined are implied global variables, and their names are also kept in the global object. This was a convenience for the little scripts that Navigator 2 was expected to support. In the decade since NS2, those little scripts have grown into Ajax applications, and the true nature of the global object is revealed:

Global variables are evil.

Global variables are a source of unreliability and insecurity. Fortunately, JavaScript includes tools for allowing us to drastically minimize our use of globals, which makes our programs more robust. This becomes increasingly important as our programs get bigger, and as we mix in and mash up program components from multiple authors. Reducing our dependency on globals increases the likelihood that collisions are avoided and that the program components work harmoniously.

An objective measure of the quality of a JavaScript program is How many global variables and global functions does it have? A large number is bad because the chance of bad interactions with other programs goes up. Ideally, an application, library, component, or widget defines only a single global variable. That variable should be an object which contains and is the root namespace for all of your stuff.

Yahoo’s single global is YAHOO. It is spelled in all caps to identify it as something special, since all lower case is ordinary and initial caps indicates a constructor. Being in all caps, it is unlikely that someone would use it accidentally, which further reduces the likelihood of collision.

Yahoo is the world’s biggest website. Eventually, all of Yahoo’s JavaScript and browser webstate will be accessible through the YAHOO object.

But this technique also works well with the smallest library or widget. It is a clean, efficient way of organizing your program’s resources. The performance hit in having to access through a single global is negligible. JavaScript is very good at resolving such expressions. It is more than offset by the self-documentation and reliability benefits.

Generally a shallow tree is better than a deep tree. One could imagine that YAHOO.util.Dom.get could have been factored more compactly perhaps as YAHOO.get. And perhaps someday it will, but for now YAHOO.util.Dom.get is not measurably slower, and it is helping Yahoo to manage its evolving codebase. (And if you don’t like the length, you only have to type it once. See with Statement Considered Harmful.)

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!