Reid Burke
@reid
Applied Node.js.
The YUI Library is widely used for building awesome websites.
http://yuiblog.com/blog/category/in-the-wild/
YUI is modular.
Use only what you need.
<script src="yui.js"></script>
YUI().use("yql", function (Y) {
Y.YQL("SELECT * FROM social.updates.search" +
" WHERE query='bayjax'", updateSite);
});
Loads only YQL and its dependencies.
Figures out the dependencies required by use()
.
Pulls them in automatically.
YUI().use("yql", onComplete);
yql
isn't on the page, calculate its dependencies.yql
and its dependencies in one request.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.
When YUI needs a module:
If we're loading modules, we need dependency information.
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
When YUI needs a module:
YLS makes YUI faster.
YLS makes apps faster!
More benefits? Yes!
YUI Loader already requests different code based on feature tests.
That still works with YLS!
tests=0:1;1:0;2:0;3:1
When serving YLS requests, requests are cached with far-future Expires.
No more client-side calculation.
At the same time:
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.
<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.)
Let's look at the YUI Performance Tool.
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!
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.
We're bringing YLS to Yahoo!'s CDN.
Client-side Loader is still available.
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.
Bayjax at Yahoo! F2E 2011