Your SlideShare is downloading. ×
0
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

6,689

Published on

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

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,689
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
148
Comments
0
Likes
16
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&amp;#x2019;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&apos;s worth emphasizing that these aren&apos;t theoretical benefits. Right now, most developers don&apos;t have time to build progressive enhancement into their projects and JS-dependent sites typically fail on devices that don&apos;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: &quot;At Yahoo and on the YUI team, we&apos;re passionate about web development and about JavaScript, and that&apos;s why we&apos;re interested in this and why we&apos;ve taken the time to ensure YUI 3 is there from the early days on Node. I&apos;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.&quot;

  • Transcript of "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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×