Introducing YLS

Reid Burke

Applied Node.js.

The YUI Library is widely used for building awesome websites.

  • Mint
  • Target
  • LinkedIn
  • Reuters
  • The Huffington Post
  • Walgreens
  • NFL
  • Ford
  • Harley-Davidson
  • Flickr
  • National Geographic
  • Gatorade
  • Yahoo!
  • This Slideshow

YUI is modular.

  • Async Queue
  • AutoComplete
  • Charts
  • Dial
  • Drag & Drop
  • History
  • Resize
  • Sortable
  • Transition
  • Uploader
  • YQL
  • and more

Use only what you need.

Use statement


<script src="yui.js"></script>


YUI().use("yql", function (Y) {
        " WHERE query='bayjax'", updateSite);

Loads only YQL and its dependencies.

YUI Loader

Figures out the dependencies required by use().

Pulls them in automatically.

Loader Step-By-Step

YUI().use("yql", onComplete);
  1. If yql isn't on the page, calculate its dependencies.
  2. Download yql and its dependencies in one request.
  3. Call onComplete when the dependencies are ready.

The YUI seed makes a request like this:
YUI().use("yql", function (Y) {
    // When this function is called
    // Y.YQL is ready to use!

That works pretty well.

We saw an opportunity to make it better.



The YUI Loader Service

We put YUI Loader on the server.

Client-Side Loader

When YUI needs a module:

  • Download YUI metadata to the client.
  • Calculate dependencies on the client.
  • Download them all from a server.

If we're loading modules, we need dependency information.

Let's Eliminate

  • YUI metadata download.
  • Dependency calculation.

YUI with YLS

The YUI seed makes a request like this:

Server-Side Loader

When YUI needs a module:

  • Download them all from a server.

YLS makes YUI faster.

YLS makes apps faster!

More benefits? Yes!

Capability-based Loading

YUI Loader already requests different code based on feature tests.

That still works with YLS!


Dependency Calculation

When serving YLS requests, requests are cached with far-future Expires.

No more client-side calculation.

YLS Advantage

  • Eliminates metadata download.
  • Eliminates dependency calculation time.

At the same time:

  • Preserves capability-based loading.
  • Uses the battle-tested YUI Loader code.

An interlude for JavaScript Ninjas.

There are still other ways to load YUI modules.

That's okay!

YUI can handle very application-specific requirements.

YLS makes YUI faster with minimal effort.

How Easy?

<script src="//

YUI().use("node", function (Y) {"body").append(
        Y.Node.create("It works!"));

Just use the new seed file.

Enabled with a config flag.

<script src="//

    yls: true
}).use("node", function (Y) {"body").append(
        Y.Node.create("It works!"));

(Obviously subject to change.)

How fast?

Let's look at the YUI Performance Tool.

Server-Side JavaScript

YLS runs on Node.js.

Same YUI Loader used on the client.

Based on Node.js on YUI by Dav Glass.

He's giving a talk tomorrow at 1:30!

CDN Hosting

Yahoo! hosts YUI on a public CDN:

We get a ton of traffic.

Roadmap: YLS CDN

We're bringing YLS to Yahoo!'s CDN.

Client-side Loader is still available.

Roadmap: Open Source

YLS will be released under the BSD license.

Let's recap.

YLS offloads loading YUI modules to a server.

Browsers make fewer requests.

Browsers no longer calculate dependencies in JavaScript.

High-latency, slow browsers? Mobile devices.

YLS makes YUI even better for mobile.

We welcome your feedback.


Node.js and YUI

Hack This Deck

Bayjax at Yahoo! F2E 2011