A Status Check on the YUI 2-to-3 Transition

By Eric Miraglia November 5, 2010

The YUI 2 JavaScript and CSS library has been an enormously successful product in the four-plus years since we released it in 2006. YUI 2 distributions have been downloaded more than 2 million times, and thousands of developers today use YUI without ever downloading the files, pulling instead from either the Yahoo! or Google CDN.1 YUI traffic on the Yahoo! CDN has grown steadily over the years since we made it public, and today we estimate that yui.yahooapis.com is serving about 15 billion files monthly.

It's no secret, though, that YUI engineers at Yahoo! are spending most of their energy today working on YUI 3, the successor project to YUI 2, and one that applies many of the lessons learned by YUI engineers in the years we spent building YUI 2. YUI 3 today is robust and feature-rich. At the utility level (animation, XHR, drag and drop, etc.), it exceeds the functional level of YUI 2. At the widget level, where YUI 2 has been popular with its wide portfolio, YUI 3 is still catching up. YUI 2's DataTable, Editor, Menu, Button and Calendar are still the standard, and YUI 3 users looking for equivalent functionality today are guided to the YUI 2-in-3 project, which allows you to easily include and utilize YUI 2 from within YUI 3 implementations. This is easy and safe, but it's also not optimal: We'd prefer not to switch between the two APIs, and we'd prefer not to incur the runtime overhead of loading two library cores.

As we prepare for next week's YUIConf 2010, it seemed like a good time to review the status of the YUI 2-to-YUI 3 transition. We're a little over a year into the YUI 3 era, and not quite a year out from the YUI 3 Gallery's launch. Between the YUI team at Yahoo! and those of you in the YUI community contributing components (nearly 100 contribitors in total), how are we doing?

The answer may surprise you.

With projects like LifeRay's AlloyUI and dozens of independent contributors populating the Gallery, we now have more options available even at the widget level in YUI 3 than we shipped with YUI 2. The table below matches functionality between the two libraries and gives a sense of how the two libraries compare in terms of functional categories. Caveats:

  • Few rows are 1:1 comparisons. When I say that functionality is supported, I don't mean that it is supported in exactly the same way or at the same feature level in both codelines.
  • All unsupported features in YUI 3 can be accessed via YUI 2-in-3.
  • Where I've indicated that something is supported via community/Gallery, I'm not suggesting anything about the feature completeness of the Gallery content -- merely that the community has responded to that need and produced and shared a solution.
  • This table includes only a fraction of the content that is in Gallery. A truer picture, including all Gallery content, would show YUI 3 dwarfing YUI 2 in terms of component options. I've confined myself here to the baseline functionality of YUI 2, its equivalent in YUI 3, and major new developments in the YUI 3 world (including major component categories that have emerged in Gallery).
Core Components
Component
Library Core
Loader
DOM support
Browser and Custom Events
Component Foundation
Component
Attribute management
Event management
Component base
Extension model
Plugin model
Widget foundation
Utilities
Component
Ajax/XHR
Animation
  • Animation module
  • Transition module

| YUI 3 adds support for CSS transitions via the Transitions module, supporting hardware-accelerated transitions where supported. | | Asset Prefetching | | Caridy Patiño Mayea's Preload module | | | Asynchronous Queueing | | AsyncQueue module | Support for a chain of function callbacks executed via setTimeout. YUI 2's delivery of this functionality is not split out sufficiently for general use. | | Authentication | | Dav Glass's oAuth module | | | Cache | | Cache module | Support for storing key/value pairs in local JS memory. | | Cookie | Cookie Utility | Cookie module | | | Data Management | DataSource Utility |

  • DataSchema (beta)
  • DataSource (beta)
  • DataType (beta)

| There is not exact feature parity between the two (for example, queueing is not supported in YUI 3; YUI 3 modules remain in beta.) | | Drag and Drop | Drag and Drop Utility | DD module | | | Event Extras |

  • Event delegation
  • Event simulation

|

  • Event delegation
  • Event simulation
  • Gestures
  • Synthetic events
  • Touch events

| YUI 3's event support exceeds the YUI 2 branch, with a good abstractions for touch and gestures. | | Form Validation | InputEx Field/Form Framework | The YUI 3 Gallery has too many form-related modules to list here — one group is from the prolific developers of AlloyUI, and there are many more from other contributors. | | | Geolocation | | Mikael Abrahamsson's Geolocation module | | | Get (script/CSS loading) | Get Utility | Get module | | | History management | History Utility | History module | YUI 3's History module includes HTML5 support. | | ImageLoader (smart deferral of image load) | ImageLoader Utility | ImageLoader module | | | Internationalization | varies by component | Internationalization module | YUI 3's i18n model is more robust, but there is work to do to realize all of its benefits throughout the widget system. | | JSON | JSON Utility | JSON module | YUI 3 includes the JSONP module which provides a facility for working with JSONP callbacks from within YUI 3's sandbox patterns. | | Resize | Resize Utility | AlloyUI Resize | The AlloyUI implementation in Gallery has been adopted into the library core and will be part of the 3.3.0 release. | | Storage (client-side) | Storage Utility (includes Flash fallback) | Storage Lite | Storage Lite does not support a Flash fallback. | | Stylesheet (manipulation via JS) | Stylesheet Utility | Stylesheet module | | | SWF management | SWF Utility |

| | | SVG Support | |

| | | Undo/Redo Support | | Iliyan Peychev's Undo/Redo Framework module | | | YQL wrapper | | YQL Query module | | | UI Widgets | | Component | YUI 2 | YUI 3 | Notes | | Accordion |

|

| As a YUI 2-based widget, Marco's component is not in the YUI 3 Gallery formally. | | AutoComplete | AutoComplete Control |

| YUI 3 AutoComplete will ship with YUI 3.3.0. Don't overlook the AlloyUI component here, though — it is feature rich and ready to use today. | | Button | Button Control | Anthony Pipkin's Button module | | | Calendar | Calendar Control | AlloyUI Calendar | Calendar widget/date selection is not expected as part of the YUI 3 distribution until 3.4.0 or later; the AlloyUI implementation, however, is an excellent choice for the common use cases. | | Carousel | Carousel Control | Gopal Venkatesan's Carousel module | Gopal has owned the YUI 2.x Carousel codebase for a long time, and his YUI 3 Gallery module will be in production Yahoo! products this year. | | Charts | Charts Control |

| Tripp is one of the authors and the maintainer of the YUI 2 Charts Control, which is Flash-based. The YUI 3 Charts work, which does not rely on Flash, is being pushed to Gallery on a regular basis and Tripp's work to-date will ship in beta as part of YUI 3.3.0. | | Color Picker | Color Picker Control | AlloyUI Color Picker | | | DataTable | DataTable Control | Anthony Pipkin's Simple Datatable module | Anthony's project, which includes a few plugin modules, is not meant to have feature parity with the ambitious YUI 2 DataTable Control. The work being done by the YUI team on YUI 3 DataTable will appear in beta form in 3.3.0. | | Image Cropping | ImageCropper Control | | | | Layout (full screen application management) | Layout Manager | | | | Menuing | Menu Control |

| Simple Menu is not as feature rich as the comprehensive menuing support provided in YUI 2. At present, the YUI team plans work on a YUI 3 menu control for the 3.4.0 timeframe. Node MenuNav is part of the YUI 3 distribution, but it remains in beta and may be deprecated in favor of new work on a formal UI control. | | Overlays | Container Family |

| | | Pagination | Paginator Control | John Lindal's Paginator Port module | | | Progress Bar | ProgressBar Control |

| Satyam wrote the YUI 2 ProgressBar Control; his YUI 3 implementation is not in the Gallery, but it is available for use. | | Ratings | |

| | | Rich Text Editing | Rich Text Editor | Simple Editor Port | YUI 3.3.0 will contain the base Editor content that Yahoo! is using in the new Yahoo! Mail beta — which is the most advanced Editor we've produced as part of YUI. However, the Editor toolbar (which is an important part of the component for most implementers) will rely on Button and Menuing functionality that won't appear until at least 3.4.0. | | ScrollView | | ScrollView module | This is an important component for mobile development. | | Slideshows | |

| This category is a good example of what the YUI Gallery can become. Whereas we never had a strong YUI 3 slideshow component, we already have four excellent modules to choose from in the YUI 3 world. | | Sliders | Slider Control |

| YUI 3.3.0 will contain an interesting new addition to the slider interaction pattern, courtesy of Yahoo! designer and engineer Jeff Conniff. Stay tuned for more on this as 3.3.0 preview releases appear. | | Tabs | TabView Control | TabView module | | | Trees | TreeView Control |

| Yahoo! engineer Gonzalo Cordero is currently working on a YUI 3 TreeView implementation. While it will not be ready for 3.3.0, it is expected to be available in the Gallery after the 3.3.0 release and be a candidate for the distribution as early as 3.4.0. | | Uploader (multi-file uploading with progress tracking) | Uploader Control | Uploader module | Both YUI 2 and YUI 3 implementations require Flash. | | Video (HTML5) | |

| | | CSS Components | | Component | YUI 2 | YUI 3 | Notes | | Reset | CSS Reset | CSS Reset | | | Base | CSS Base | CSS Base | | | Fonts | CSS Fonts | CSS Fonts | | | Grids | CSS Grids | CSS Grids | The new, more flexible YUI 3 CSS Grids package was released in 3.2.0. |

Notes:

  1. The YUI 2 Dependency Configurator can help you design your script and css includes for either Yahoo! or Google CDNs.