Running YUI 3 on Node.js - BayJax


Published on

Overview of running YUI 3 on Node.js, presented at BayJax on 5/5/2010

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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.

  • Each request gets its own window and document

    Takes advantage of YUI’s innate ability to target a window or frame other than where the YUI script include resides
  • 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."

  • Running YUI 3 on Node.js - BayJax

    1. 1. BayJax YUI and NodeJS Running YUI on the Server Adam Moore YUI
    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. YUI 3 • Modular • Sandboxed • Intrinsic component loading • Core team + community • Not just about manipulating the DOM
    4. 4. YUI 3 • Script Loading • Remote i/o • Events and Attributes • Data Manipulation • Language Utilities • Templating
    5. 5. nodejs-yui3 @ github • Replaces stock YUI 3 utilities • Console logger • Script transport • Loader and JSONP • XHR transport
    6. 6. 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'); });'cakeorpie'); });
    7. 7. 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
    8. 8. 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 where (id = "apm")', o = new Y.yql(q); o.on('query', function(r) { //Do something here. sys.puts(sys.inspect(r)); }); });
    9. 9. Accessing Remote Data • Using the YQL module from YUI Gallery [~/src/nodejs-yui3/examples (master)⚡] ➔ ./yql.js [INFO]: (get) URL:* %22)&format=json&callback=YUI.yql.yui_3_1_0_1_12711910026086&env=http%3A%2F { count: '1' , created: '2010-04-13T08:36:47Z' , lang: 'en-US' , results: { user: { 'gravatar-id': 'fd657f26f290d8869901f0eaf3441b97' , name: 'Adam Moore' , login: 'apm' // -snip- } } }
    10. 10. Serving YUI with YUI
    11. 11. Serving YUI with YUI • Using YUI Loader on the server to create a combo service <script src=""></script> <script> YUI({ comboBase: '', combine: true }).use('dd', function(Y) {     var dd = new Y.DD.Drag({         node: '#demo'     }); }); </script>
    12. 12. Serving YUI with YUI • Pre-fetch dependencies when loading YUI <script src=""></script> <script>      YUI().use('dd', function(Y) {     var dd = new Y.DD.Drag({         node: '#demo'     }); });      </script>
    13. 13. Serving YUI with YUI • QuickYUI removes the need for the YUI().use() boilerplate code <script src=""></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>
    14. 14. Serving YUI with YUI • QuickYUI removes the need for the YUI().use() boilerplate code <script src=""></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>
    15. 15. 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. • Iterative fetch • Cache • Also can combine custom resources.
    16. 16. 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.
    17. 17. 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
    18. 18. Rendering HTML - nodejs-dom • DOM element creation and manipulation • Selector API • YUI’s Node API
    19. 19. 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';'body').addClass('yui-skin-sam'); var ln = document.createElement('link'); // ...
    20. 20. Rendering HTML
    21. 21. 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.
    22. 22. Multiple Response Types
    23. 23. 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.
    24. 24. Other Uses • Fast utility layer testing with YUI Test. • Smoke tests for DOM-centric code. • Could emulate some browser quirks. • Validation Code
    25. 25. 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.
    26. 26. Resources • YUI: • NodeJS: • nodejs-yui: • nodejs-yui3loader: yui3loader • Test Loader: •