Overview of running YUI 3 on Node.js, presented at BayJax on 5/5/2010

1. BayJax
YUI and NodeJS
Running YUI on the Server
Adam Moore
YUI
http://developer.yahoo.com/yui/
adamoore@yahoo-inc.com

2. yaypie... “For the last few days @davglass has been blowing my
mind roughly hourly with what he's doing with node.js and YUI.
about 12 hours ago via Echofon ...”

3. YUI 3
• Modular
• Sandboxed
• Intrinsic component loading
• Core team + community
• Not just about manipulating the DOM

4. YUI 3
• Script Loading
• Remote i/o
• Events and Attributes
• Data Manipulation
• Language Utilities
• Templating

5. nodejs-yui3 @ github
• Replaces stock YUI 3 utilities
• Console logger
• Script transport
• Loader and JSONP
• XHR transport

6. Enabling YUI’s Loader
• Testing loader
#!/usr/bin/env node
var YUI = require('../lib/node-yui3').YUI;
YUI({
filter: 'debug'
}).use('event-custom', function(Y) {
Y.on('cakeorpie', function() {
Y.log('cheesecake');
});
Y.fire('cakeorpie');
});

7. Enabling YUI’s Loader
• Testing loader
[~/examples (master)⚡] ➔ ./loader.js
[INFO]: (yui) Module requirements: event-custom
[INFO]: (yui) Modules missing: event-custom, 1
[INFO]: (yui) Fetching loader: yui_3_1_0_1_12711895820541, ./yui3/build/
loader/loader-debug.js
[INFO]: (get) URL: /lib/yui3/build/loader/loader-debug.js
[INFO]: (yui) Module requirements: yui-base,yui-log,dump,oop,yui-
later,event-custom
[INFO]: (yui) Modules missing: dump,oop,event-custom, 3
[INFO]: (yui) Using Loader
[INFO]: (loader) attempting to load dump, ./yui3/build/
[INFO]: (get) URL: /lib/yui3/build/dump/dump-debug.js
[INFO]: (loader) attempting to load oop, ./yui3/build/
[INFO]: (get) URL: /lib/yui3/build/oop/oop-debug.js
[INFO]: (loader) attempting to load event-custom, ./yui3/build/
[INFO]: (get) URL: /lib/yui3/build/event-custom/event-custom-debug.js
[INFO]: (loader) loader finishing: success, yui_3_1_0_1_12711895820541,
yui-base,yui-log,dump,oop,yui-later,event-custom
[INFO]: (event) yui_3_1_0_1_12711895820544: cakeorpie->sub:
yui_3_1_0_1_12711895820545
[INFO]: cheesecake

8. Accessing Remote Data
• Using the YQL module from YUI Gallery
#!/usr/bin/env node
var sys = require('sys'),
YUI = require('../lib/node-yui3').YUI;
YUI().use('json', 'gallery-yql', function(Y) {
var q = 'select * from github.user.info where (id = "apm")',
o = new Y.yql(q);
o.on('query', function(r) {
//Do something here.
sys.puts(sys.inspect(r));
});
});

9. Accessing Remote Data
• Using the YQL module from YUI Gallery
[~/src/nodejs-yui3/examples (master)⚡] ➔ ./yql.js
[INFO]: (get) URL: http://query.yahooapis.com/v1/public/yql?q=select%20*
%20from%20github.user.info%20where%20(id%20%3D%20%22apm
%22)&format=json&callback=YUI.yql.yui_3_1_0_1_12711910026086&env=http%3A%2F
%2Fdatatables.org%2Falltables.env&
{ count: '1'
, created: '2010-04-13T08:36:47Z'
, lang: 'en-US'
, results:
{ user:
{ 'gravatar-id': 'fd657f26f290d8869901f0eaf3441b97'
, name: 'Adam Moore'
, login: 'apm'
// -snip-
}
}
}

10. Serving YUI with YUI

11. Serving YUI with YUI
• Using YUI Loader on the server to create a
combo service
<script src="http://yuiloader.davglass.com/"></script>
<script>
YUI({
comboBase: 'http://yuiloader.davglass.com/?',
combine: true
}).use('dd', function(Y) {
var dd = new Y.DD.Drag({
node: '#demo'
});
});
</script>
http://yuiloader.davglass.com/demo/pr2.html

12. Serving YUI with YUI
• Pre-fetch dependencies when loading YUI
<script src="http://yuiloader.davglass.com/?dd&io-base"></script>
<script>
YUI().use('dd', function(Y) {
var dd = new Y.DD.Drag({
node: '#demo'
});
});
</script>
http://yuiloader.davglass.com/demo/shorty.html

13. Serving YUI with YUI
• QuickYUI removes the need for the
YUI().use() boilerplate code
<script src="http://yuiloader.davglass.com/quick?dd&widget&io"></script>
<script>
// QuickYUI loads everything you want from a URL and sets up a
// YUI instance assigned to Y
var dd = new Y.DD.Drag({
node: '#demo'
});
</script>
http://yuiloader.davglass.com/demo/quick.html

14. Serving YUI with YUI
• QuickYUI removes the need for the
YUI().use() boilerplate code
<script src="http://yuiloader.davglass.com/quick?dd&widget&io"></script>
<script>
// QuickYUI loads everything you want from a URL and sets up a
// YUI instance assigned to Y
var dd = new Y.DD.Drag({
node: '#demo'
});
Y.use(‘slider’, function() {
// load and instantiate a slider on demand
});
</script>
http://yuiloader.davglass.com/demo/quick.html

15. Serving YUI with YUI
• YUI Loader is used on the server to
expand the dependency tree, fetch, and
combine YUI resources.
• Serves a JavaScript response.
• Iterative fetch
• Cache
• Also can combine custom resources.

16. What about the DOM?
• YUI isn’t all about the DOM
• But YUI has many DOM-centric modules.
• Being able to use these components on the
server opens up some interesting
opportunities.

17. Rendering HTML -
nodejs-dom
• Dav pulled together two open source
projects to do it:
• jsdom - DOM level 1 support, written in
JavaScript
• node-htmlparser - HTML parser written in
JavaScript. Needed for innerHTML

18. Rendering HTML -
nodejs-dom
• DOM element creation and manipulation
• Selector API
• YUI’s Node API

19. Rendering HTML -
nodejs-dom
• YUI HTML Service
#!/usr/bin/env node
var sys = require('sys'), http = require('http'), url = require('url');
var YUI = require("../lib/node-yui3").YUI;
YUI().use('nodejs-dom', 'node', function(Y) {
var document = Y.Browser.document,
navigator = Y.Browser.navigator,
window = Y.Browser.window;
http.createServer(function (req, res) {
var urlInfo = url.parse(req.url, true);
YUI().use('nodejs-dom', 'node', function(Page) {
document = Page.Browser.document;
navigator = Page.Browser.navigator;
window = Page.Browser.window;
document.title = 'Calendar Test';
Page.one('body').addClass('yui-skin-sam');
var ln = document.createElement('link');
// ...

20. Rendering HTML
http://yuiloader.davglass.com/calendar/

21. Progressive Enhancement
• YUI 2 calendar control is loaded via the YUI 2
in 3 project
• The calendar control is fully rendered on the
server.
• No script.
• Page and nav clicks are round trips.
• If script is enabled, we could enhance the links
to pull only the data for each page and render
on the client.

22. Multiple Response Types
http://yuiloader.davglass.com/template/

23. Multiple Response Types
• First response will render the entire page.
• A client without script can request the fully
rendered page.
• A script enabled client can request just the
new content.
• A script enabled client with the source that is
running on the server can request just the
JSON data structure that creates the content.
• It’s the same code.

24. Other Uses
• Fast utility layer testing with YUI Test.
• Smoke tests for DOM-centric code.
• Could emulate some browser quirks.
• Validation Code

25. Summary
• YUI 3’s design made it easy to get running on
NodeJS.
• The core utilities have value on their own on
the server side.
• The addition of a server side DOM shows
potential for creating complete web solutions
from a single code base.

26. Resources
• YUI: http://developer.yahoo.com/yui/
• NodeJS: http://nodejs.org/
• nodejs-yui: http://github.com/davglass/nodejs-yui3/
• nodejs-yui3loader: http://github.com/davglass/nodejs-
yui3loader
• Test Loader: http://yuiloader.davglass.com/demo/
• http://yuiloader.davglass.com/calendar/