Overview of running YUI 3 on the server side with NodeJS. Presented at JSConf 2010

1. JSConf 2010
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. NodeJS
• Server-side JavaScript process
• Uses V8
• Non-blocking
• CommonJS module format

4. Why Server-Side JS?
• JavaScript Programmers
• Sophisticated client-side applications.
• Rich APIs provided by YUI and other
JavaScript libraries.
• The same code on the client or server.
• Progressive enhancement is no longer
much more expensive.

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

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

7. Making it work
• YUI exports itself per the CommonJS spec
if (typeof exports == 'object') {
exports.YUI = YUI;
}

8. Making it work
• Configured YUI’s Log System
YUI({
logFn: function(str, t, m) {
if (str instanceof Object || str instanceof Array) {
if (str.toString) {
str = str.toString();
} else {
str = sys.inspect(str);
}
}
// output log messages to stderr
sys.error('[' + t.toUpperCase() + ']: ' + m + str);
}
});

9. Making it work
• A simple program
#!/usr/bin/env node
var YUI = require("../lib/node-yui3").YUI,
Y = YUI();
Y.log('Hello World');

10. Making it work
• A simple program
#!/usr/bin/env node
require("../lib/node-yui3").YUI().log('Hello World');

11. Making it work
• A simple program
[~/examples (master)⚡] ➔ ./hello.js
[INFO]: Hello World

12. Enabling YUI’s Loader
• Replaced the built-in script loader
YUI.add(‘get’, function(Y) {
// reads from file system or creates a httpClient
// for remote data.
Y.Get.script = function(s, cb) {
var urls = Y.Array(s), url, i, l = urls.length;
for (i=0; i<l; i++) {
// doesn't need to be blocking, so don't block.
YUI.include(url, function(err) {
if (err) { Y.log(err, 'error', 'get'); }
pass(cb);
});
// replaced with process.compile so YUI doesn’t
// need to be global
// require.async(url, function (err, mod) {
}
};
});

13. 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');
});

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

15. 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));
});
});

16. 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-
}
}
}

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

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

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

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

21. 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.
• Also can combine custom resources.

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

23. 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
• These are not nodeJS specific implementations

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

25. 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');
// ...

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

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

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

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

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

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

32. 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/