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.

Let's run JavaScript Everywhere

6,951 views

Published on

Serverside JavaScript

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×