Posts from "September 2011"

The introduction of YUI 2in3

YUI 3.2 and earlier had no browser based detection loading, and worked well with YUI PHP Loader, allowing for Exponent to load YUI dependencies on the server side. Since the introduction of YUI 3.3.0, which loads (and skips loading) JavaScript based on your browser, it's now only YUI 2.x that can take advantage of server-side dependency calculation and loading, since PHP has no sure-fire way to detect the user's browser. The result: Exponent YUI 2 loading up on the server, and YUI 3 loading via YUI3's built-in Loader.

It's always been the goal to migrate fully to YUI 3 once certain aspects of the library offer comparable widgets to YUI 2. Until we can fully drop YUI 2 from the system, we can at least streamline the YUI loading mechanisms by making use of the YUI 2in3 library. YUI 2in3 is written by the YUI team as a compatibility layer that allows the loading and usage of the YUI 2 library within the YUI 3 ecosystem.

Integrating YUI 2in3 offered many advantages compared to sticking with YUI PHP loader. For one, it streamlines using the YUI environment, setting up a general usage pattern for using both versions of YUI. It also drops 2 external library dependencies: YUI PHP Loader, and Lissa (ties YUI PHP Loader together with minify).

With these changes, however, you stand a good chance of breaking existing views making use of YUI 2 code. We've corrected the themes shipping with Exponent that previously made use of this, like cool waters override for YUI Top Nav.

To help alleviate some migration pains, we've added some helper mechanisms to the {script} plugin, looking for the yui2mods or yuimodules parameter, parsing out whichever modules were passed, and plugging them in to yui3 wrapper code for you. This helps keep 90% of code from breaking, but isn't bullet-proof. Any custom views should definitely be adjusted.

Here's a gist of the old vs new pattern:


A good read that helped me integrate YUI2in3:
http://blog.endpoint.com/2011/02/locally-served-yui3.html