This document discusses how server-side JavaScript is gaining popularity through frameworks like Node.js. It notes JavaScript can now be run on both the client-side through browsers and server-side through engines like V8, SpiderMonkey, and Rhino. Server-side JavaScript allows the same code to run on both client and server. The document also highlights how the YUI framework can be used with Node.js to build full-stack JavaScript applications that leverage YUI modules on both the front-end and back-end.

1. Let’s run JavaScript
Everywhere
Why Server-side JavaScript is Taking Off
@sh1mmer Tom Hughes-Croucher

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

3. !

4. Run times
• V8 (Google), C++
• Spider Monkey (Mozilla), C++
• Rhino (Mozilla), Java

5. V8
Spider
Monkey
JavaScript Performance

6. Runtime != Browser

7. No DOM for you!

8. JavaScript on Server
• Rhino
• JavaScript 1.7
• SpiderMonkey
• JavaScript 1.8
• V8
• ECMAScript 3

9. Huh?

10. JavaScript is
• Proprietary to Netscape (now Mozilla)
• “Ahead” of ECMAScript
• Only really deployed in Mozilla projects
• Only usable on the server

11. ECMAScript is
• A standard
• Implemented in browsers
• ECMAScript-262 3rd ed. ~ JavaScript 1.5
• ECMAScript-262 5th ed. has no JavaScript
equivalent

12. JavaScript 1.6+
• E4X (EcmaScript For XML)
• Let scope blocks
• Generators
• Generator expressions

14. Framew
orks

15. CommonJS

16. CommonJS
• Set of standards for SSJS
• Modules
• File System
• etc
• Cross-implementation API
• Still implementation specific code

18. Application
Frameworks

19. Narwhal

20. Most Complete
Implementation of
CommonJS

21. Works on lots of run-
times

22. JACK/JSGI

24. Node.js
• Server-side JavaScript process
• Uses V8
• Non-blocking
• Event Driven
• Common.js module format

26. YUI and Node.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45. Node/YUI
• 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.

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

47. Resources
• Narwhal: http://narwhaljs.org
• CommonJS: http://commonjs.org
• Rhino: http://www.mozilla.org/rhino/
• SpiderMonkey: http://www.mozilla.org/js/
spidermonkey
• V8: http://code.google.com/p/v8/

48. Tom Hughes-Croucher
• http://speakerrate.com/sh1mmer
• @sh1mmer
• croucher@yahoo-inc.com