This document discusses using JavaScript on the server side with Node.js and the YUI framework. It begins by explaining why server-side JavaScript is useful and discusses JavaScript runtimes like V8, SpiderMonkey, and Rhino. It then covers Node.js, CommonJS frameworks, and how to use YUI modules on the server by enabling YUI's module loader. Examples are provided for accessing remote data, rendering HTML on the server, and implementing progressive enhancement.

1. Server Side
JavaScript
You ain’t seen nothing yet
Tom Hughes-Croucher @sh1mmer

2. Server Side Javascript
IS SO AWESOME
MY ENTIRE PRESENTATION IS IN
COMIC SANS
AND YOU WILL STILL LOVE ME AT THE END

3. Why SSJS?

4. JavaScript
programmers
3>2>1

5. Massive Code base of YUI
and other JS libraries
I heard some people use this thing called jQuery,
but I’m not convinced it’ll catch on

6. Laziness or “I’m sick
of writing stuff twice”
I could have said efficiency, but I think we all secretly long to
sit around in our y-fronts. Except Higgins, who already does.

7. Progressive
Enhancement is free*
Remember WWCD (What Would Crockford Do)
*close enough

8. TL;DR:
SSJS is Awesome
Like a Unicorn riding a Narwhal

10. Why now?

11. 1. Professionalism

13. “Yahoo!'s corporate
motto is: Don't be
eval().“

14. “Doug Crockford's JavaScript is
so strict, that uncaught
exceptions would trigger global
thermonuclear war“

15. 2. JavaScript
Runtimes

16. Runtimes
• V8 (Google), C++
• Spider Monkey (Mozilla), C++
• Rhino (Mozilla), Java

17. V8
Spider
Monkey
JavaScript Performance

18. An Overview of
SSJS

19. !

20. Runtime != Browser

21. No DOM for you!

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

23. Huh?

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

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

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

28. Framew
orks

29. CommonJS

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

32. Application
Frameworks

33. Narwhal

34. Most Complete
Implementation of
CommonJS

35. Works on lots of
run-times

36. JACK/JSGI

37. JSGI Middleware
function(env) {
return {
status : 200,
headers : {"Content-Type":"text/plain"},
body : ["Hello world!"]
};
}

38. JSGI Middleware
function Head(app) {
return function(env) {
var result = app(env);
if (env["REQUEST_METHOD"] === "HEAD")
result.body = [];
return result;
}
}

39. Fab

40. Fab

41. Fab

42. Fab

43. Fab
• with ( fab = require( "../" ) ) module.exports = fab
( contentLength )
( stringify )
( //date/ )
( tmpl )
( "The date is <%= this.toDateString() %>." )
()
( //time/ )
( tmpl )
( "The time is <%= this.toTimeString() %>." )
()
( new Date );

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

48. AW Node.js
•
ESServer-side JavaScript process
OM
• Uses V8
• Non-blocking
•
•
Event Driven
CommonJS module format E!

49. At JSCONF.US 2010
Node was ⎻⎻⎻⎻⎻ this fast

51. But
Ryan doesn’t roll like that. Ryan rolls like this

53. Community, much?

64. Node.js + YUI3 =
Awesome
like a Narwhal riding a Unicorn

66. YUI 3
• Modular
• Sandboxed
• Intrinsic component loading
• Core team + community (50+ extensions)
• Not just about manipulating the DOM

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

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

69. Making it work - 2
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);
}
});

70. Fin.

71. ‘ello World Node Style
#!/usr/bin/env node
var YUI = require("../lib/node-yui3").YUI,
Y = YUI();
Y.log('ello World');

72. ‘ello World YUI Style
#!/usr/bin/env node
require("../lib/node-yui3").YUI().log('ello
World');

73. ‘ello World YUI Style
[~/examples (master)⚡] ➔ ./hello.js
[INFO]: ello World

74. Enabling YUI’s 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) {
}
};
});

75. Enabling YUI’s Loader
#!/usr/bin/env node
var YUI = require('../lib/node-yui3').YUI;
YUI({
filter: 'debug'
}).use('event-custom', function(Y) {
Y.on('pwnd', function() {
Y.log('Never gonna give you up, never
gonna let you down...');
});
Y.fire('pwnd');
});

76. Enabling YUI’s 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: pwnd->sub:
yui_3_1_0_1_12711895820545
[INFO]: Never gonna give you up, never gonna let you down...

77. 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) {
//sys.inspects serializes objects to text
sys.puts(sys.inspect(r));
});
});

78. Accessing Remote Data
[~/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=ht
tp%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-
}
}
}

79. DOM
It’s BOM.

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

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

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

83. Rendering HTML -
nodejs-dom
#!/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');
// ...

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

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

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

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

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

89. Resources
• YUI: http://developer.yahoo.com/yui/
• Node.js: 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/

90. Summary
• SSJS is awesome because
• We are JavaScript programmers
• Reuse (libraries/code)
• Progressive Enhancement
• Node.js + YUI3 rocks
• YUI 3’s was easy to get running on Node.js
• Server side DOM allows for a single code
base

91. Today presentation was
Brought to you by And the fonts:
the letters: Comic Sans
J and S monofur
Tom Hughes-Croucher Slides, etc --> http://
@sh1mmer speakerrate.com/sh1mmer
croucher@yahoo-inc.com Pls rate me. kthxbai.