Let's run JavaScript Everywhere


Published on

Serverside JavaScript

Published in: Technology
  • Be the first to comment

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

No notes for slide

  • Progressive enhancement is no longer much more expensive -- it can be a natural outgrowth of the way your system works.

  • Service behind traffic server

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

  • Intrinsic gallery support works transparently
    Single combo URL for YUI and gallery

  • 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."

  • Let's run JavaScript Everywhere

    1. Let’s run JavaScript Everywhere Why Server-side JavaScript is Taking Off @sh1mmer Tom Hughes-Croucher
    2. 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.
    3. !
    4. Run times • V8 (Google), C++ • Spider Monkey (Mozilla), C++ • Rhino (Mozilla), Java
    5. V8 Spider Monkey JavaScript Performance
    6. Runtime != Browser
    7. No DOM for you!
    8. JavaScript on Server • Rhino • JavaScript 1.7 • SpiderMonkey • JavaScript 1.8 • V8 • ECMAScript 3
    9. Huh?
    10. JavaScript is • Proprietary to Netscape (now Mozilla) • “Ahead” of ECMAScript • Only really deployed in Mozilla projects • Only usable on the server
    11. ECMAScript is • A standard • Implemented in browsers • ECMAScript-262 3rd ed. ~ JavaScript 1.5 • ECMAScript-262 5th ed. has no JavaScript equivalent
    12. JavaScript 1.6+ • E4X (EcmaScript For XML) • Let scope blocks • Generators • Generator expressions
    13. Framew orks
    14. CommonJS
    15. CommonJS • Set of standards for SSJS • Modules • File System • etc • Cross-implementation API • Still implementation specific code
    16. Application Frameworks
    17. Narwhal
    18. Most Complete Implementation of CommonJS
    19. Works on lots of run- times
    20. JACK/JSGI
    21. Node.js • Server-side JavaScript process • Uses V8 • Non-blocking • Event Driven • Common.js module format
    22. YUI and Node.js
    23. YUI 3 • Modular • Sandboxed • Intrinsic component loading • Core team + community • Not just about manipulating the DOM
    24. Making it work • YUI exports itself per the CommonJS spec if (typeof exports == 'object') { exports.YUI = YUI; }
    25. Making it work • A simple program #!/usr/bin/env node var YUI = require("../lib/node-yui3").YUI, Y = YUI(); Y.log('Hello World');
    26. Making it work • A simple program [~/examples (master)⚡] ➔ ./hello.js [INFO]: Hello World
    27. 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'); });
    28. 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
    29. 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)); }); });
    30. 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- } } }
    31. 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.
    32. 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
    33. Rendering HTML - nodejs-dom • DOM element creation and manipulation • Selector API • YUI’s Node API
    34. 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'); // ...
    35. Rendering HTML http://yuiloader.davglass.com/calendar/
    36. 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.
    37. Multiple Response Types http://yuiloader.davglass.com/template/
    38. 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.
    39. Other Uses • Fast utility layer testing with YUI Test. • Smoke tests for DOM-centric code. • Could emulate some browser quirks. • Validation Code
    40. Node/YUI • 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.
    41. 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/
    42. Resources • Narwhal: http://narwhaljs.org • CommonJS: http://commonjs.org • Rhino: http://www.mozilla.org/rhino/ • SpiderMonkey: http://www.mozilla.org/js/ spidermonkey • V8: http://code.google.com/p/v8/
    43. Tom Hughes-Croucher • http://speakerrate.com/sh1mmer • @sh1mmer • croucher@yahoo-inc.com