Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JSConf 2010




              YUI and NodeJS
                Running YUI on the Server


                               Ad...
yaypie... “For the last few days @davglass has been blowing my
mind roughly hourly with what he's doing with node.js and Y...
NodeJS
• Server-side JavaScript process
• Uses V8
• Non-blocking
• CommonJS module format
Why Server-Side JS?
• JavaScript Programmers
• Sophisticated client-side applications.
• Rich APIs provided by YUI and oth...
YUI 3
• Modular
• Sandboxed
• Intrinsic component loading
• Core team + community
• Not just about manipulating the DOM
YUI 3
• Script Loading
• Remote i/o
• Events and Attributes
• Data Manipulation
• Language Utilities
• Templating
Making it work

• YUI exports itself per the CommonJS spec
 if (typeof exports == 'object') {
     exports.YUI = YUI;
 }
Making it work
   • Configured YUI’s Log System
YUI({
    logFn: function(str, t, m) {
        if (str instanceof Object ||...
Making it work
   • A simple program
#!/usr/bin/env node
var YUI = require("../lib/node-yui3").YUI,
    Y = YUI();

Y.log(...
Making it work
   • A simple program
#!/usr/bin/env node
require("../lib/node-yui3").YUI().log('Hello World');
Making it work
   • A simple program
[~/examples (master)⚡] ➔ ./hello.js
[INFO]: Hello World
Enabling YUI’s Loader
   • Replaced the built-in script loader
YUI.add(‘get’, function(Y) {
    // reads from file system ...
Enabling YUI’s Loader
      • Testing loader
#!/usr/bin/env node
var YUI = require('../lib/node-yui3').YUI;

YUI({
    fil...
Enabling YUI’s Loader
    • Testing loader
[~/examples (master)⚡] ➔ ./loader.js
[INFO]: (yui) Module requirements: event-c...
Accessing Remote Data
    • Using the YQL module from YUI Gallery
#!/usr/bin/env node

var sys = require('sys'),
    YUI =...
Accessing Remote Data
      • Using the YQL module from YUI Gallery
[~/src/nodejs-yui3/examples (master)⚡] ➔ ./yql.js
[INF...
Serving YUI with YUI
    • Using YUI Loader on the server to create a
        combo service
<script src="http://yuiloader....
Serving YUI with YUI
    • Pre-fetch dependencies when loading YUI
<script src="http://yuiloader.davglass.com/?dd&io-base"...
Serving YUI with YUI
    • QuickYUI removes the need for the
        YUI.use() boilerplate code
<script src="http://yuiloa...
Serving YUI with YUI
    • QuickYUI removes the need for the
        YUI().use() boilerplate code
<script src="http://yuil...
Serving YUI with YUI
• YUI Loader is used on the server to
  expand the dependency tree, fetch, and
  combine YUI resource...
What about the DOM?
• YUI isn’t all about the DOM
• But YUI has many DOM-centric modules.
• Being able to use these compon...
Rendering HTML -
           nodejs-dom
•   Dav pulled together two open source
    projects to do it:
    •   jsdom - DOM ...
Rendering HTML -
        nodejs-dom

•   DOM element creation and manipulation

•   Selector API

•   YUI’s Node API
Rendering HTML -
            nodejs-dom
• YUI HTML Service
#!/usr/bin/env node
var sys = require('sys'), http = require('h...
Rendering HTML



http://yuiloader.davglass.com/calendar/
Progressive Enhancement
•   YUI 2 calendar control is loaded via the YUI 2
    in 3 project

•   The calendar control is f...
Multiple Response Types




http://yuiloader.davglass.com/template/
Multiple Response Types
•   First response will render the entire page.

•   A client without script can request the fully...
Other Uses


•   Fast utility layer testing with YUI Test.

•   Smoke tests for DOM-centric code.

    •   Could emulate s...
Summary
•   YUI 3’s design made it easy to get running on
    NodeJS.

•   The core utilities have value on their own on
 ...
Resources
•   YUI: http://developer.yahoo.com/yui/

•   NodeJS: http://nodejs.org/

•   nodejs-yui: http://github.com/davg...
Upcoming SlideShare
Loading in …5
×

Running YUI 3 on Node.js - JSConf 2010

7,420 views

Published on

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

Published in: Technology
  • Be the first to comment

Running YUI 3 on Node.js - JSConf 2010

  1. 1. JSConf 2010 YUI and NodeJS Running YUI on the Server Adam Moore YUI http://developer.yahoo.com/yui/ adamoore@yahoo-inc.com
  2. 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. 3. NodeJS • Server-side JavaScript process • Uses V8 • Non-blocking • CommonJS module format
  4. 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. 5. YUI 3 • Modular • Sandboxed • Intrinsic component loading • Core team + community • Not just about manipulating the DOM
  6. 6. YUI 3 • Script Loading • Remote i/o • Events and Attributes • Data Manipulation • Language Utilities • Templating
  7. 7. Making it work • YUI exports itself per the CommonJS spec if (typeof exports == 'object') { exports.YUI = YUI; }
  8. 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. 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. 10. Making it work • A simple program #!/usr/bin/env node require("../lib/node-yui3").YUI().log('Hello World');
  11. 11. Making it work • A simple program [~/examples (master)⚡] ➔ ./hello.js [INFO]: Hello World
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Rendering HTML - nodejs-dom • DOM element creation and manipulation • Selector API • YUI’s Node API
  25. 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. 26. Rendering HTML http://yuiloader.davglass.com/calendar/
  27. 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. 28. Multiple Response Types http://yuiloader.davglass.com/template/
  29. 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. 30. Other Uses • Fast utility layer testing with YUI Test. • Smoke tests for DOM-centric code. • Could emulate some browser quirks. • Validation Code
  31. 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. 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/

×