Driving Behavioral Change for Information Management through Data-Driven Gree...
Running YUI 3 on Node.js - 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 ...”
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) {
}
};
});
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));
});
});
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');
// ...
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.
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.
Progressive enhancement is no longer much more expensive -- it can be a natural outgrowth of the way your system works.
Core + community -- core team building core platform, as with jQuery, but community extensions (more than 50 in the last release cycle) are first-class citizens
Both NodeJS and YUI support chaining, so this can be done on one line if you like that sort of thing.
The shebang isn&#x2019;t a requirement, it just adds convenience when invoking the program
./hello.js vs node hello.js
Loader manages the YUI dependencies. We can easily replace the transport Loader uses.
Intrinsic gallery support works transparently
Single combo URL for YUI and gallery
YUI can load components on demand. You can keep your initial download to just what the application needs at the start.
YUI can load components on demand. You can keep your initial download to just what the application needs at the start.
show calendar example
show template example
It's worth emphasizing that these aren't theoretical benefits. Right now, most developers don't have time to build progressive enhancement into their projects and JS-dependent sites typically fail on devices that don't support JS (and sometimes fail when an error is introduced anywhere in the page, including by a third party ad). This approach enables things to work on more devices, with less development, and with less brittleness.
I would love for you to say something like: "At Yahoo and on the YUI team, we're passionate about web development and about JavaScript, and that's why we're interested in this and why we've taken the time to ensure YUI 3 is there from the early days on Node. I've worked hard to make sure that YUI 3 is both the most powerful and the most open project of its kind, and both the power -- from our intensely curated core -- and the openness -- from our friction-free gallery -- are available to you today in Node. (The YQL module we looked at earlier was a Gallery contribution, in fact.)
The net result is that you can be writing YUI 3 modules that work on the client and the server and making those available to the world as part of the YUI 3 Gallery with very little effort. The biggest takeaway I want you to leave with is that you can participate in this process starting now, and the combination of YUI 3 and Node will give you unprecedented power and reach for your work."