Joe Hewitt, a longtime Mozilla/Firefox engineer and the author of DOM Inspector, recently made a return to frontend development after many years working on browser code. He found that the state of the art in terms of tooling hadn’t advanced much since his days as a DHTML author in the late 1990s.
While many frontend engineers have lamented the state of debugging tools in the JavaScript development arena, Joe reacted in a singularly useful fashion: He set about in January 2006 to create a Firefox extension that brought together some of the great strengths of Venkman and DOM Inspector in an integrated, lightweight interface. Adding features inspired by sources ranging from Python to Prototype, he’s been evolving FireBug for the past five months and developing a cult following of developers who are finding FireBug to be an essential part of their toolkit.
Joe stopped by Yahoo! last week to talk to the Y! frontend engineering community about FireBug. He was kind enough to let us capture the talk on video, and we’re pleased to share the core part of his talk with you here. We apologize for the poor audio quality, which does not do full justice to the quality of Joe’s presentation, but we wanted to help get the message out about FireBug.
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:
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.
In the two months since our last release, the YUI Team has been hard at work improving the library, optimizing code, and working with our colleagues at Yahoo! as they’ve launched numerous products using YUI as a foundation. The new Yahoo! Front Page beta is just one example where YUI is helping Yahoo!’s frontend engineering community to bring its most interesting visions to fruition.
In addition to one brand-new component — the Logger Control — this release brings substantive ehancements throughout the library, including:
Color animation: The Animation Utility sports a new ColorAnim subclass that makes the animation of color properties (like color, background-color, and border-color) a snap.
Drag & Drop performance: The Drag & Drop Utility has been one the YUI Library’s most popular components since its release. Version 0.11 brings an improvement in the way Drag & Drop positions dragged items during a drag interaction — resulting in significant performance gains, particularly in Firefox.
Managing inheritance: We’ve provided new documentation for the Yahoo Global Object, including its new YAHOO.extend method. YAHOO.extend supports prototype, constructor, and superclass assignments for new subclasses, making it easier than ever to manage inheritance in object-oriented JavaScript applications.
File upload: The YUI Connection Manager now supports file upload in addition to XMLHttpRequest-based asynchronous transactions. Connection Manager will create an iframe for you on the fly, use that iframe to post your uploaded file(s) to the server, and then return to you the HTML body of the server’s response — all within the familiar syntax of the component’s connection and response objects.
Minor changes and enhancements throughout: From "popping" a branch in the TreeView Control (and reinserting it elsewhere in the Tree) to implementing AutoComplete with an always-visible suggestion container, a host of minor changes can be found throughout the library for 0.11. Check out the README file found in each component’s build directory for detailed information about enhancements and bug fixes to the components you are implementing.
New Cheat Sheets:Cheat Sheets for the YUI Utilities have been updated for 0.11 and new Sheets have been added for three of the Controls (Logger, Slider, and TreeView).
One of the most gratifying aspects of this release from our perspective is the growing influence of the vibrant YUI Library community on the YDN-JavaScript Yahoo! Group. Peter Michaux, for example, pushed us to add YAHOO.extend to help manage inheritance and to look at new ways to optimize drag-and-drop performance. Hundreds of other members, in ways large and small, have helped us to see places where YUI could be more complete and more useful. Many thanks to all who are contributing there.
The YUI Library’s Logger Control
The biggest change you’ll see in YUI Library 0.11 is the advent of the YUI Logger Control, a flexible and integrated logging package in the spirit of earlier tools like Five Volt Logic’s estimable fvlogger. The Logger Control gives you useful insights into the operation of other YUI components, each of which now ships with a -debug version. Logger debuts with the following core features:
Powerful, compact UI: The default user interface, which is optional and highly configurable, supports live filtering of log messages by category or source and allows you to pause and resume logging on the fly. If Drag & Drop is available on the page, the UI can be repositioned; it can always be collapsed and expanded. Script hooks allow you to show and hide the Logger Control console dynamically.
Integration with the YUI Library components: The YUI Library components now ship with -debug versions that output logger messages at interesting moments. Take a look at how the Logger Console helps to illuminate the inner workings of the TreeView Control in this example.
Simple integration with your own projects: Taking advantage of the Logger Control in your own projects is as simple as adding logging statements at interesting moments in your scripts’ execution: e.g., YAHOO.log("Initializing menu: Variable sName = " + sName);. The global YAHOO.log method can be safely used throughout your scripts, even when the Logger Control is removed from the page.
Integration with other consoles: We’re huge fans of Joe Hewitt’s excellent FireBug extension for Firefox, and we’re pleased to report that the YUI Logger Control arrives with built-in FireBug integration. Moreover, Safari users who have the debug menu enabled will also find Logger messages in the Safari JavaScript Console. Either of these consoles can be used instead of or in addition to the default Logger UI. Check out Firebug and Safari integration in this Logger example; note that external console logging, which (like most debugging instruments) can degrade performance noticably, can be disabled in your Logger configuration.
We look forward to hearing your thoughts and learning from your experiences as you implement the new Logger Control, whether to enhance your toolkit while working with YUI components or in development of your own application code.
What’s Next?
Even as we send YUI Library 0.11 out the door we’re thinking about and planning for the next release. As we’ve said on YDN-JavaScript, we’re working on a Tab Control and a Button Control for 0.12 and beyond. And we see many further opportunities to enhance YUI as a platform for building robust, rich applications in the web browser. If you haven’t already, please join the YUI community on YDN-JavaScript and share your thoughts about the 0.11 release, the Logger Control, and where you’d like to see the YUI Library go from here.
Since the YUI Library was released under an open-source BSD licence in February, we’ve gotten a lot of questions about YUI. One of the questions we’ve fielded more than any other, though, is also one of the best and most relevant: Who at Yahoo! is putting this stuff out into production? The answer is that almost everyone at Yahoo! is using YUI to some degree, including some of our most highly trafficked and high-profile sites. There are some notable exceptions — the Yahoo! Mail Beta and the new Yahoo! Photos, for example, are projects that started before YUI was available and work their DHTML magic using solutions crafted by their own engineering teams. But, increasingly, what we’re seeing is that most new projects at Yahoo! are relying on YUI to serve as a foundation.
Inspired by our own Dustin Diaz’s recent post (”15 Things You Can Do with Yahoo UI“) on the new frontend-developer journal Vitamin, we wanted to share with you ten things Yahoo! is already doing with YUI. This list isn’t exhaustive, nor does it suggest that these are the ten most important implementations; rather, these are ten that represent some of the breadth and depth with which YUI is being used within the Yahoo! family.
1. Front Page’s Personal Assistant
Yahoo’s Front Page redesign, recently out of preview and available at http://www.yahoo.com, uses YUI extensively in its Personal Assistant module toward the top right corner of the page. Event Utility is used to listen for mouse events when interacting with the module; Connection Manager retrieves data on demand from the Personal Assistant’s six services; and the Animation Utility powers the smooth transitions as you move from module to module.
2. My Yahoo! Drag & Drop Portal
My Yahoo! was one of the first major consumer sites to embrace RSS and allow users to fully experience the "Come To Me" web — the web in which information you care about, whether from Yahoo! or from any site with an RSS feed, is aggregated and arranged to your liking. In January, arranging that information got a whole lot easier when My Yahoo!’s developers gave the site a major infusion of YUI — Event Utility, Connection Manager, Drag and Drop Utility, Animation Utility, and the Dom Collection. The result: A personalized portal in which you can drag your content modules around on the page to reorder them. Note the use of the Animation Utility to soften the transition when you drop a module in a new location.
3. AllTheWeb.com LiveSearch
No picture is provided for this example, because the only way to fully appreciate the responsiveness of this Search interface is to experience it yourself. AllTheWeb’s LiveSearch provides an alternative interface to the Yahoo! Search platform and drives intense XHR-mediated traffic via Connection Manager, exploring the deep integration of client- and server-side application logic. (Note: This implementation imposes some browser restrictions at present; these restrictions are not intrinsic to YUI Library code, which is designed to work in all A-Grade browsers.)
Yahoo! Tech is the first major Yahoo! product launched in the YUI era, and it takes full advantage of the library. One of the more unique uses of YUI on Tech is its implementation of a configurable content width control. This feature allows you to show and hide the secondary content column on the fly, and it employs the Animation Utility to gradualize the transition for good measure — an innovative approach to handling the variety of screen sizes and browser viewport sizes with which users view Tech’s content-rich pages.
5. Yahoo! Finance CSS Reset, Fonts, & Grids
Yahoo! Finance takes advantage of one of the newer components of the YUI Library, the CSS Reset, Fonts and Grids packages. Try visiting Finance and zooming your text size — notice that the page’s wireframe zooms right along with the text, keeping the integrity of the design intact at the larger size. This is just one benefit of these infrastructure CSS components that provide a stable, flexible, and future-friendly foundation for your web site.
6. Yahoo! Search Y!Q Drag and Drop Contextual Search Module
Drag and Drop implementations can be complicated, but some of the best implementations are quite simple. When you click on a Y!Q contextual search link on any site that implements it (like Yahoo! News, or even many non-Yahoo sites via the Y!Q API), a small window pops up with search results for the linked term. That window can be moved around using a simple implementation of the YUI Drag and Drop Utility, allowing you to position it on the page as desired, out of the way of anything it may be obscuring.
7. Yahoo! Sports Torino Olympics AutoComplete Content Navigator
Yahoo! Sports designers wanted to do something special for the 2006 Winter Olympics in Turin, something that would make it easier to navigate to check on the action for individual athletes, sports and countries. So they took the YUI AutoComplete Control and put it to work, developing a slick navigator that augments directory-style navigation with something much faster and more powerful. Typing a few characters in the search box and arrowing to your selection allows you to get to your destination in world-record time.
8. Yahoo! News Animated SuperTicker
Yahoo! News takes the ticker idea to a new plateau with its smooth-scrolling SuperTicker. This module, which promotes major features toward the top of the main News page, overloads a <div> horizontally and uses the YUI Animation Utility’s Scroll subclass to slide the content back and forth — automatically via a timer or as a navigation control when the user clicks on the arrows at the module’s lower corners.
9. Yahoo! Health Refresh Content Scroller
Yahoo! Health has its own take on the horizontally-scrolling ticker, employing YUI components including the Slider Control and the Animation Utility to provide a Health Expert Advice module loaded with content in a compact space. Note the highly customized implementation of the Slider Control along the bottom of the module.
10. Yahoo! Groups Advanced Message Search
The YUI Calendar Control makes date-selection a snap. The Yahoo! Groups implementation of this is a nice one. Go to the Advanced Search page in the Messages section of one of your groups, and use the select menu for Dates to search for messages between two dates. The standard interaction model presents itself — three select menus for each date (month, day, and year), requiring six mouse clicks (or three long click-and-holds) to choose each date. But a single click on the calendar icon next to the select menus summons up the Calendar Control, and another click selects your date, giving you the same result with one-third as many clicks. Sometimes it’s the little things that matter most.
What Are You Doing with YUI?
These are just ten examples of how Yahoo! is deploying the YUI Library today. These projects, and the dozens of others we’re tracking, leverage the a la carte nature of YUI, a characteristic that is allowing properties to enrich their interfaces gradually and incrementally. There are exciting things afoot in frontend engineering at Yahoo! beyond just YUI — see Yahoo! Finance’s new Flash-based charting for one example — but YUI is playing an important role in the evolution of theYahoo! product family.
Now it’s your turn: What are you doing with the YUI Library? If you’re using YUI in your own work, we’d love to hear from you and to make your project available to the larger YUI community on the YDN-JavaScript Yahoo! Group. Please share the url and a project description in the YUI application gallery and/or in the comments below.
The richness revolution on the web is about improving the user experience. A richer interface can feel faster and more responsive because it can bring users closer to their data and to powerful tools for enhancing, filtering, or sharing that data. We add richness to pages to make our applications faster, lighter, and more responsive to the user’s needs.
At the same time, ading richness and interactivity to a web page invariably means adding code complexity. Instead of simply loading the data required to represent a document, we load data related to visual and informational transformations that might take place within the document based on user interactions. This infusion of information (and rules about behavior and presentation related to that information) adds weight to the page — weight on the wire, weight in terms of processing and parsing information and rules, and weight within the browser as it holds all of this richness in memory.
One place where we run up against practical limitations of richness in web applications is in UI controls like TreeView and Menu in which nodal information structures are given easily-navigated UI treatments. A library of 1,000 nodes might live very compactly in a 100×200 pixel space using a Tree or Menu — ten top-level nodes with ten children each yield 100 nodes just in the top two levels; a third level, again with ten children per node, gets us to 1,000.
This compression of data in visual space is one of the powers of richness, but it also highlights the potential for rich UI controls to grow exponentially in their resource consumption. Where a UL with ten links would typically require a trivial amount of memory and rendering power, a Menu with 10 top-level nodes and 1000 nodes in total might increase data load by a few orders of magnitude. And it might increase the complexity of the DOM by just as much, while creating an additional burden of an object model in JavaScript in which every node in the Menu is represented by one or more JavaScript objects.
Both the TreeView and Menu Controls in YUI support strategies for reducing the impact that this added complexity has on initial pageload times and in-page resource consumption. In this article, we’ll review those strategies and look under the covers at how this can be accomplished in the Menu Control.
Dynamic Loading in the YUI TreeView Control
The YUI TreeView Control helps you address the problem of navigating vast node collections by providing support for dynamic loading. Dynamic loading is a mechanism whereby the children of a node are only loaded when the user expands that node. This allows you, for example, to use YUI’s Connection Manager to make XHR calls as TreeView nodes are expanded, gradually filling out the data for the node library — but only doing so as the user demonstrates a need for that information.
Adam Moore, the author of the TreeView Control, has provided a nice example of dynamic loading in the TreeView Control. While this example doesn’t use Connection Manager to fetch data (rather, it randomly creates data for the nodes), it does illustrate the dynamic loading implementation pattern. Adam walks through the pattern on the example page and breaks out the key elements of the technique.
Dynamic loading in TreeView can be configured for the entire TreeView instance or on a node-by-node basis, giving you flexibility in how you manage your initial pageweight and the corresponding complexity of your DOM structure.
Progressive Rendering in the YUI Menu Control
Todd Kloots, author of the YUI Menu Control, this week added a new example to Menu’s documentation that illustrates a similar technique using Menu. His progressive rendering example examplifies the creation of a Menu based on an in-memory JavaScript data model. The result is a lightweight, fast-rendering Menu with 50+ child nodes built around a scalable technique. Let’s peek under the covers of his implementation.
First, Todd puts his markup on the page for the top level of the menu in which his four top-level nodes or menu items (Communication, Shopping, Entertainment, and Information) are displayed. He does this using a standardized module format shared by a number of YUI components; this format is documented with the Module component on the YUI web site. The basic menu information structure is nodal; Menu can consume data for menu items from an unordered list in the markup.
With this markup in place, Todd instantiates the main menu:
The main menu is now in place; it’s time to lay a foundation for progressive rendering of submenus. Each of the four top-level menu items will have its own submenu populated by data that’s not yet in the DOM. Todd begins by creating an object containing all the data he’ll use for his submenus; it’s organized into buckets corresponding to the four top-level items. Here’s the beginning of that code block, with the data being shaped into an object literal:
The next step is to create the four top-level submenus (instances of YAHOO.widget.Menu) and link them to the data provided in oMenuData above:
Now Todd has a top-level Menu and we have Menu instances for each of the four main submenus. At this point he applies his progressive rendering technique, a strategy that relies on Menu’s intrinsic BeforeShowEvent (inherited from Module). By writing a handler to execute just before a Menu is shown, we can defer its rendering (and all of its overhead in terms of DOM element creation) until the Menu is actually needed. Here is Todd’s onBeforeShowEvent handler:
The approach here is a simple one: Build submenus only in response to user interaction. The submenus begin as empty vessels that know about their intrinsic data (it’s in their itemsData property); however, they don’t render that data until they’re activated by the user. When that happens, the onBeforeShowEvent (to which we’ll attach this method as a handler) fires. It takes the following steps:
Checks to see if this submenu has already been rendered (line 3); if it has, its getItemGroups method will return subitems, and nothing more needs to be done here.
Loops through each menu item in this submenu (line 12-29), gathering its configuration properties and creating any submenus that might be associated with this menu item (line 19-24). Once all necessary information is in hand, the menu item is added to its parent Menu (line 27).
Renders the menu, preparing it to be shown (line 33).
The finishing touches for Todd’s implementation involve subscribing this function to the onBeforeShowEvent of each of the four main submenus, assigning those submenus to the Menu instance created from markup, and then rendering and showing the main menu:
The result of this particular technique is a Menu with 50+ nodes, of which only a small fraction need to be rendered when the page loads. In this implementation, the data for the remaining nodes is in the page (and has weight on the wire during initial pageload as a result) but takes up only trivial resources until called upon. And, for a more complex Menu with a few more levels (and potentially 500, 5000 or more menu items), it’s easy to see how Connection Manager could be built into your onBeforeShowEvent, with the ConnectionManager success callback being used to add menu items, render the menu, and show it.
Conclusion: Richness on a Diet
The bottom line here is that we can get richer pages that overload small pieces of screen real estate with powerful interactive paths, and we can do this in ways that don’t add massive weight and resource consumption to their contexts. Doing necessitates more thought up front. However, this kind of forethought is the price of entry for most high-volume web applications that want to include more and richer interactions within a single page. Using dynamic loading and progressive rendering in TreeViews and Menus can lead to light pageweights and fast rendering, giving you the best of both worlds: Rich interactive power along with lightness on the wire and in the page. Extending that technique throughout your site using Connection Manager can help you achieve real richness and solid performance even in highly interactive contexts.
Recently I posted some examples of how YUI is being put to use within Yahoo. Another point of interest for those of us involved with the YUI Library and community is how the library is being used outside of Yahoo. Members of the Yahoo! Group YDN-JavaScript, which is the YUI community’s key forum, have shared some great examples of applications using YUI. Occasionally, we’ll explore some of those examples here as well to illustrate the kinds of projects for which YUI is being tapped.
One of the principal enhancements arriving in SugarCRM 4.5 is an elegant, dynamic interface that incorporates a number of useful interaction patterns. Developers Majed Itani, Anjay Gupta, and Wayne Pan (among a team of about 25 total engineers at Sugar) implemented the new interactions using YUI. Pan told us he was about three days into a custom drag and drop implementation when the YUI Library was released as open source in February. "I downloaded YUI and my 300 lines of JavaScript turned into about 10," he said. "I was impressed. It just worked."
The main SugarCRM interface consists of a dashboard on which live configurable "dashlets." With release 4.5, those dashlets can be repositioned on the page using drag and drop. When new dashlets are added (or current ones are dismissed), animation is employed to gradualize the page change and make it more intuitive for the user. The modal DHTML options panel for each dashlet animates down from the top of the screen. When you add new dashlets, your choices are presented in a tree format. The administrative interface also received a major injection of interactive richness. To accomplish all of this, Itani, Gupta and Pan leveraged many of the YUI components: Event, Animation, Connection, Drag & Drop, Container, and TreeView.
Do you have a YUI implementation that would be of interest to the YUI community? If so, please share your link and post a message to the community forum at YDN-JavaScript, or leave us a message in the comments section below.
We released a minor update to the YUI Library today, fixing more than a dozen bugs across the suite. This brings YUI to version 0.11.3. You can download the update, along with comprehensive release notes, from SourceForge. (You can read more about what was new for the last major release, 0.11 in July, here on YUIBlog; our latest forward-looking roadmap for the YUI Library is available on the Yahoo! Group YDN-JavaScript.)
Along with this release, we’re updating our YUI Cheat Sheets and broadening coverage to include additional components. Cheat Sheets are now available for the following YUI utilities and controls:
YUI Developer (and after-hours DJ) Matt Sweeney will be among the featured speakers at Yahoo!’s first Developer Day/Public Hack Day on September 29, 2006. (Photo: Scott Schiller.)
As you’ve no doubt heard, Yahoo! is hosting its first-ever open Hack Day/Developer Day in two weeks. The focus of the Developer Day proceedings is on software created with (and for) an ecosystem of API-driven, web-accessible applications and services. Featured speakers during the Friday, Sept. 29, Developer Day event include Bradley Horowitz talking about the Yahoo! API ecosystem and Iain Lamb (formerly of Oddpost) talking about the new portfolio of skills required to be a "hacker of the ecosystem."
Also addressing the conference in the featured-speakers track will be YUI developer Matt Sweeney, author of the YUI Dom Collection and YUI Animation Utility. Matt’s 9 a.m. talk, "Web 2.0: Getting It Right the Second Time Around," will focus on the role that frontend archtecture (x/html, css, JavaScript) plays in creating web applications that perform well in the ecosystem, making the sharing and reuse of information practical, scalable, and accessible across different (and unanticipated) contexts.
The Developer Day schedule features multiple concurrent tracks. In addition to the featured-speakers track, YUI authors will be hosting hands-on introductions to the YUI Library throughout the day on Friday. These are "getting-started" sessions in which developers walk participants through basic use cases for various library components. Here’s the tentative schedule for Friday’s workshops:
9 a.m. Event Utility, Adam Moore
10 a.m. CSS Reset, Fonts and Grids, Nate Koechley
11 a.m. Animation Utility, Matt Sweeney
2 p.m. Menu Control, Todd Kloots
3 p.m. Connection Manager, Thomas Sha
4 p.m. Container (Panel & Dialog Controls), Steven Peterson
Several YUI team members will also be on hand Saturday for the open Hack Day, to be capped with presentations and awards emceed by the estimable Mike Arrington of TechCrunch fame. If your hack uses YUI, we’ll be there to help you work through any issues that might come up. The internal Hack Days at Yahoo! have been incredible experiences…this first open session promises to be even more diverse and compelling.
I hope you’ll come join us for this unique opportunity to meet and engage with the terrific developers behind the YUI Library. The Hack Day website (hackday.org) is taking requests for attendance (see the form at the bottom of the Hack Day page); sign up now to get on the list for additional information about the schedule, attendance and workshop participation.
This is a big event for those of us involved with YUI and for Yahoo! generally; developers from throughout the Yahoo! ecosystem (including Cal Henderson from Flickr, engineers from Yahoo! Maps, JSON inventor Douglas Crockford, PHP creator Rasmus Lerdorf, and many more) will be speaking on development in the still-emerging mashup software culture.
The Accessible Rich Interet Applications (ARIA) specification is in working-draft form in the W3C. It provides a framework for implementating rich web-applications that convey improved semantics to screen reader software as a user interacts with a page. ARIA is patterned after the more established desktop experience, but it also provides a set of tools that allows room for invention.
In this talk, delivered at Yahoo! on December 3, 2008, YUI engineer and accessibility specialist Todd Kloots introduces you to ARIA and provides some insights gleaned from his work in bringing ARIA support to a host of YUI widgets.
SugarCRM
