• Like
Running YUI 3 on Node.js - JSConf 2010
Upcoming SlideShare
Loading in...5

Running YUI 3 on Node.js - JSConf 2010

Uploaded on

Overview of running YUI 3 on the server side with NodeJS. Presented at JSConf 2010

Overview of running YUI 3 on the server side with NodeJS. Presented at JSConf 2010

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide

  • Service behind nginx
  • Service behind nginx
  • 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’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."


  • 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 ...”
  • 3. NodeJS • Server-side JavaScript process • Uses V8 • Non-blocking • CommonJS module format
  • 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) { } }; });
  • 13. 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'); });
  • 14. 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
  • 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)); }); });
  • 16. 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- } } }
  • 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'); // ...
  • 26. Rendering HTML http://yuiloader.davglass.com/calendar/
  • 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.
  • 28. Multiple Response Types http://yuiloader.davglass.com/template/
  • 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.
  • 32. 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/