One of the costs of working on the web has traditionally been having to work in multiple languages. JavaScript has been the only choice for web front-ends, but as soon as you start back-end work, it can be anything from PHP to Python to Perl to Ruby or even C. Anything, that is, but JavaScript.In the last year server-side JavaScript has leapt forward with a passion, partly due to CommonJS but also due to NodeJS. With these new advances we have an opportunity to enjoy more code re-use, and faster, more efficient pages.
We’ll explore server-side JavaScript and look at how we can use a JavaScript DOM/BOM to run YUI3 on NodeJS, allowing us to reuse the same code on the client and the server, deliver targeted experiences to various classes of client, and smoke test DOM operations during continuous integration.
13. 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
14. 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.
25. ‘ello World Node Style
#!/usr/bin/env node
var YUI = require("../lib/node-yui3").YUI,
Y = YUI();
Y.log('ello World');
26. ‘ello World YUI Style
#!/usr/bin/env node
require("../lib/node-yui3").YUI().log('ello
World');
27. ‘ello World YUI Style
[~/examples (master)⚡] ➔ ./hello.js
[INFO]: ello World
28. 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) {
}
};
});
29. 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');
});
32. 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));
});
});
35. 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.
36. 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
37. Rendering HTML -
nodejs-dom
• DOM element creation and manipulation
• Selector API
• YUI’s Node API
40. 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
• 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.
43. Other Uses
• Fast utility layer testing with YUI Test.
• Smoke tests for DOM-centric code.
• Could emulate some browser quirks.
• Validation Code
44. Summary
• YUI 3’s design made it easy to get
running on Node.js
• JavaScript libraries are awesomely
valuable on the server side
• Server side DOM shows crazy potential
for a single code base
46. 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.