Tuesday, April 20th, 2010

Server side rendering with YUI on Node.js

Category: Node, Server, YUI

Dav Glass did some cool work with YUI and the server when he got it running on Node.js and then got the DOM working.

Having the DOM available is important as it allows you to do interesting things. You can take the same code and render on either client OR server side. NoScript turned on? Still works.

Aptana Jaxer pioneered this (running on a headless Firefox, giving them ALL of the APIs of a browser…. including XUL etc). This time around we are on node, with jsdom++:

To support this work, I’ve created a new YUI 3 module called nodejs-dom. This module will include the proper libraries, if available, and set up the YUI instance with a document and window reference. Along with the configuration, it will create a new object on the instance called Browser. Since all YUI 3 module use Node and Node uses Y.config.doc, you shouldn’t need to do anything else to make YUI 3 code work on the server. But if you’re working with older JavaScript and need to access the document, window, location or navigator objects, they’re all available on the Browser object.

Try an example such as this calendar. View source, and it is just HTML. In practice some logic could detect behaviour and enable client side in some situations, server side in others.

Oh, and YUI3 is looking really nice these days. A nice balance between a nice API + really nice looking widgets + a crockfords-worth of security care.


  1. YUI().use('json', 'base', 'io-nodejs', function(Y) {
  2.     var url = 'http:/'+'/yuilibrary.com/gallery/api/user/davglass';
  3.     Y.io(url, {
  4.         xdr: {
  5.             use: 'nodejs'
  6.         },
  7.         on: {
  8.             start: function() {
  9.                 Y.log('Start IO', 'info', 'TEST');
  10.             },
  11.             success: function(id, o) {
  12.                 Y.log(Y.JSON.parse(o.responseText).userinfo);
  13.             }
  14.         }
  15.     });

Posted by Dion Almaer at 6:19 am

3.5 rating from 31 votes


Comments feed TrackBack URI

This is an awesome thing for progressive enhancement using a single codebase and a single language. Maybe someday we won’t have to have separate code for the markup version and the JS-generated version.
Just one more thought: when JS isn’t available, CSS might not be available either. But CSS degrades much better than JS, so you’ll probably still be able to accomplish your task.

Comment by zachleat — April 20, 2010

Not to be a big meanie or anything but sometimes I wonder if the people writing some of these blog post are native English speakers

Comment by Jesse — April 20, 2010

Just a small observation: what’s with the ‘http:/’+’/yuilibrary.com/…’? Why break the string?

Comment by nbr — April 21, 2010

@nbr, That’s just a cut/paste from my source files. The syntax highlighter in my editor assumes the // is a comment and it colors the last part of the string. Out of habit, I break it so it doesn’t ;)

@Jesse, Are you referring to my post? What is wrong with it?

Comment by DavGlass — April 21, 2010

@DavGlass nah I was referring to some of the ajaxian posts. They don’t always seem to be proofread

Comment by Jesse — April 21, 2010

very very interesting…

Comment by webdesignfirenze — May 3, 2010

Leave a comment

You must be logged in to post a comment.