Introducing YLS

Reid Burke
@reid

Applied Node.js.

The YUI Library is widely used for building awesome websites.

http://yuiblog.com/blog/category/in-the-wild/

  • 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
  • JSONP
  • Resize
  • Sortable
  • Transition
  • Uploader
  • YQL
  • and more

Use only what you need.

Use statement

HTML

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

JavaScript

YUI().use("yql", function (Y) {
    Y.YQL("SELECT * FROM social.updates.search" +
        " 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:

http://yui.yahooapis.com/combo?
    3.3.0/build/oop/oop-min.js
    &3.3.0/build/jsonp/jsonp-min.js
    &3.3.0/build/jsonp/jsonp-url-min.js
    &3.3.0/build/yql/yql-min.js

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.

Introducing

YLS

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:

http://yui.yahooapis.com/load?m=yql
    &env=yui&v=3.3.0&tests=0:1;1:0;2:0;3:1

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!

tests=0:1;1:0;2:0;3:1

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.example.com/
    yui-rls-3.3.0-min.js"></script>

<script>
YUI().use("node", function (Y) {
    Y.one("body").append(
        Y.Node.create("It works!"));
});
</script>

Just use the new seed file.

Enabled with a config flag.

<script src="//yui.yahooapis.com/
    3.4.0/build/yui/yui-min.js"></script>

<script>
YUI({
    yls: true
}).use("node", function (Y) {
    Y.one("body").append(
        Y.Node.create("It works!"));
});
</script>

(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.

https://github.com/davglass/nodejs-yui3

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

CDN Hosting

Yahoo! hosts YUI on a public CDN:

http://yui.yahooapis.com/yui/3.3.0/build/yui/yui.js

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.

Thanks.

Node.js and YUI

Hack This Deck

Bayjax at Yahoo! F2E 2011