Server Side
         JavaScript
          You ain’t seen nothing yet




Tom Hughes-Croucher                    @sh1mmer
Server Side Javascript
  IS SO AWESOME
    MY ENTIRE PRESENTATION IS IN
          COMIC SANS
AND YOU WILL STILL LOVE ME AT...
Why SSJS?
JavaScript
programmers
    3>2>1
Massive Code base of YUI
 and other JS libraries
  I heard some people use this thing called jQuery,
         but I’m not ...
Laziness or “I’m sick
of writing stuff twice”
I could have said efficiency, but I think we all secretly long to
 sit aroun...
Progressive
Enhancement is free*
Remember WWCD (What Would Crockford Do)




                             *close enough
TL;DR:
SSJS is Awesome
 Like a Unicorn riding a Narwhal
Why now?
1. Professionalism
“Yahoo!'s corporate
 motto is: Don't be
      eval().“
“Doug Crockford's JavaScript is
    so strict, that uncaught
 exceptions would trigger global
      thermonuclear war“
2. JavaScript
   Runtimes
Runtimes

• V8 (Google), C++
• Spider Monkey (Mozilla), C++
• Rhino (Mozilla), Java
V8




                    Spider
                    Monkey

JavaScript Performance
An Overview of
    SSJS
!
Runtime != Browser
No DOM for you!
JavaScript on Server
• Rhino
 • JavaScript 1.7
• SpiderMonkey
 • JavaScript 1.8
• V8
 • ECMAScript 3
Huh?
JavaScript is

• Proprietary to Netscape (now Mozilla)
• “Ahead” of ECMAScript
• Only really deployed in Mozilla
  project...
ECMAScript is
• A standard
• Implemented in all browsers
• ECMAScript-262 3rd ed. ~
  JavaScript 1.5

• ECMAScript-262 5th...
JavaScript 1.6+

• E4X (EcmaScript For XML)
• Let scope blocks
• Generators
• Generator expressions
Framew
      orks
CommonJS
CommonJS
• Set of standards for SSJS
 • Modules
 • File System
 • etc
• Cross-implementation API
• Still implementation sp...
Application
Frameworks
Narwhal
Most Complete
Implementation of
   CommonJS
Works on lots of
  run-times
JACK/JSGI
JSGI Middleware
function(env) {
    return {
        status : 200,
        headers : {"Content-Type":"text/plain"},
      ...
JSGI Middleware
    function Head(app) {
      return function(env) {
          var result = app(env);
          if (env["...
Fab
Fab
Fab
Fab
Fab
•  with ( fab = require( "../" ) ) module.exports = fab
  ( contentLength )
  ( stringify ) 
  ( //date/ )
    ( tmpl ...
Node.js
• Server-side JavaScript process
• Uses V8
• Non-blocking
• Event Driven
• CommonJS module format
AW Node.js
•
  ESServer-side JavaScript process



      OM
•   Uses V8

•   Non-blocking

•
•
    Event Driven
    Common...
At JSCONF.US 2010
   Node was   ⎻⎻⎻⎻⎻   this fast
But
Ryan doesn’t roll like that. Ryan rolls like this
Community, much?
Node.js + YUI3 =
   Awesome
 like a Narwhal riding a Unicorn
YUI 3
• Modular
• Sandboxed
• Intrinsic component loading
• Core team + community (50+ extensions)
• Not just about manipu...
YUI 3
• Script Loading
• Remote i/o
• Events and Attributes
• Data Manipulation
• Language Utilities
• Templating
Making it work - 1
YUI exports itself per the CommonJS spec


  if (typeof exports == 'object') {
      exports.YUI = YUI;...
Making it work - 2
YUI({
    logFn: function(str, t, m) {
        if (str instanceof Object || str instanceof Array) {
   ...
Fin.
‘ello World Node Style

#!/usr/bin/env node
var YUI = require("../lib/node-yui3").YUI,
    Y = YUI();

Y.log('ello World');
‘ello World YUI Style

#!/usr/bin/env node
require("../lib/node-yui3").YUI().log('ello
World');
‘ello World YUI Style

[~/examples (master)⚡] ➔ ./hello.js
[INFO]: ello World
Enabling YUI’s Loader
YUI.add(‘get’, function(Y) {
    // reads from file system or creates a httpClient
    // for remote...
Enabling YUI’s Loader
#!/usr/bin/env node
var YUI = require('../lib/node-yui3').YUI;

YUI({
    filter: 'debug'
}).use('ev...
Enabling YUI’s Loader
[~/examples (master)⚡] ➔ ./loader.js
[INFO]: (yui) Module requirements: event-custom
[INFO]: (yui) M...
Accessing Remote Data
  Using the YQL module from YUI Gallery
#!/usr/bin/env node

var sys = require('sys'),
    YUI = req...
Accessing Remote Data
[~/src/nodejs-yui3/examples (master)⚡] ➔ ./yql.js
[INFO]: (get) URL: http://query.yahooapis.com/v1/p...
DOM
It’s BOM.
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 - DO...
Rendering HTML -
        nodejs-dom

• DOM element creation and manipulation
• Selector API
• YUI’s Node API
Rendering HTML -
               nodejs-dom
#!/usr/bin/env node
var sys = require('sys'), http = require('http'), url =
req...
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 some browser...
Resources
•   YUI: http://developer.yahoo.com/yui/

•   Node.js: http://nodejs.org/

•   nodejs-yui: http://github.com/dav...
Summary
•   SSJS is awesome because

    •   We are JavaScript programmers

    •   Reuse (libraries/code)

    •   Progre...
Today presentation was
 Brought to you by         And the fonts:
    the letters:            Comic Sans
      J and S     ...
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Upcoming SlideShare
Loading in …5
×

Server Side JavaScript - You ain't seen nothing yet

7,861
-1

Published on

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

No Downloads
Views
Total Views
7,861
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
182
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Server Side JavaScript - You ain't seen nothing yet

  1. 1. Server Side JavaScript You ain’t seen nothing yet Tom Hughes-Croucher @sh1mmer
  2. 2. Server Side Javascript IS SO AWESOME MY ENTIRE PRESENTATION IS IN COMIC SANS AND YOU WILL STILL LOVE ME AT THE END
  3. 3. Why SSJS?
  4. 4. JavaScript programmers 3>2>1
  5. 5. Massive Code base of YUI and other JS libraries I heard some people use this thing called jQuery, but I’m not convinced it’ll catch on
  6. 6. Laziness or “I’m sick of writing stuff twice” I could have said efficiency, but I think we all secretly long to sit around in our y-fronts. Except Higgins, who already does.
  7. 7. Progressive Enhancement is free* Remember WWCD (What Would Crockford Do) *close enough
  8. 8. TL;DR: SSJS is Awesome Like a Unicorn riding a Narwhal
  9. 9. Why now?
  10. 10. 1. Professionalism
  11. 11. “Yahoo!'s corporate motto is: Don't be eval().“
  12. 12. “Doug Crockford's JavaScript is so strict, that uncaught exceptions would trigger global thermonuclear war“
  13. 13. 2. JavaScript Runtimes
  14. 14. Runtimes • V8 (Google), C++ • Spider Monkey (Mozilla), C++ • Rhino (Mozilla), Java
  15. 15. V8 Spider Monkey JavaScript Performance
  16. 16. An Overview of SSJS
  17. 17. !
  18. 18. Runtime != Browser
  19. 19. No DOM for you!
  20. 20. JavaScript on Server • Rhino • JavaScript 1.7 • SpiderMonkey • JavaScript 1.8 • V8 • ECMAScript 3
  21. 21. Huh?
  22. 22. JavaScript is • Proprietary to Netscape (now Mozilla) • “Ahead” of ECMAScript • Only really deployed in Mozilla projects • Only useful on the server
  23. 23. ECMAScript is • A standard • Implemented in all browsers • ECMAScript-262 3rd ed. ~ JavaScript 1.5 • ECMAScript-262 5th ed. has no JavaScript equivalent
  24. 24. JavaScript 1.6+ • E4X (EcmaScript For XML) • Let scope blocks • Generators • Generator expressions
  25. 25. Framew orks
  26. 26. CommonJS
  27. 27. CommonJS • Set of standards for SSJS • Modules • File System • etc • Cross-implementation API • Still implementation specific code
  28. 28. Application Frameworks
  29. 29. Narwhal
  30. 30. Most Complete Implementation of CommonJS
  31. 31. Works on lots of run-times
  32. 32. JACK/JSGI
  33. 33. JSGI Middleware function(env) { return { status : 200, headers : {"Content-Type":"text/plain"}, body : ["Hello world!"] }; }
  34. 34. JSGI Middleware function Head(app) { return function(env) { var result = app(env); if (env["REQUEST_METHOD"] === "HEAD") result.body = []; return result; } }
  35. 35. Fab
  36. 36. Fab
  37. 37. Fab
  38. 38. Fab
  39. 39. Fab • with ( fab = require( "../" ) ) module.exports = fab   ( contentLength )   ( stringify )    ( //date/ )     ( tmpl )       ( "The date is <%= this.toDateString() %>." )     ()   ( //time/ )     ( tmpl )       ( "The time is <%= this.toTimeString() %>." )     ()   ( new Date );
  40. 40. Node.js • Server-side JavaScript process • Uses V8 • Non-blocking • Event Driven • CommonJS module format
  41. 41. AW Node.js • ESServer-side JavaScript process OM • Uses V8 • Non-blocking • • Event Driven CommonJS module format E!
  42. 42. At JSCONF.US 2010 Node was ⎻⎻⎻⎻⎻ this fast
  43. 43. But Ryan doesn’t roll like that. Ryan rolls like this
  44. 44. Community, much?
  45. 45. Node.js + YUI3 = Awesome like a Narwhal riding a Unicorn
  46. 46. YUI 3 • Modular • Sandboxed • Intrinsic component loading • Core team + community (50+ extensions) • Not just about manipulating the DOM
  47. 47. YUI 3 • Script Loading • Remote i/o • Events and Attributes • Data Manipulation • Language Utilities • Templating
  48. 48. Making it work - 1 YUI exports itself per the CommonJS spec if (typeof exports == 'object') { exports.YUI = YUI; }
  49. 49. Making it work - 2 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); } });
  50. 50. Fin.
  51. 51. ‘ello World Node Style #!/usr/bin/env node var YUI = require("../lib/node-yui3").YUI, Y = YUI(); Y.log('ello World');
  52. 52. ‘ello World YUI Style #!/usr/bin/env node require("../lib/node-yui3").YUI().log('ello World');
  53. 53. ‘ello World YUI Style [~/examples (master)⚡] ➔ ./hello.js [INFO]: ello World
  54. 54. Enabling YUI’s 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) { } }; });
  55. 55. Enabling YUI’s Loader #!/usr/bin/env node var YUI = require('../lib/node-yui3').YUI; YUI({ filter: 'debug' }).use('event-custom', function(Y) { Y.on('pwnd', function() { Y.log('Never gonna give you up, never gonna let you down...'); }); Y.fire('pwnd'); });
  56. 56. Enabling YUI’s 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: pwnd->sub: yui_3_1_0_1_12711895820545 [INFO]: Never gonna give you up, never gonna let you down...
  57. 57. 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) { //sys.inspects serializes objects to text sys.puts(sys.inspect(r)); }); });
  58. 58. Accessing Remote Data [~/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=ht tp%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- } } }
  59. 59. DOM It’s BOM.
  60. 60. 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.
  61. 61. 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
  62. 62. Rendering HTML - nodejs-dom • DOM element creation and manipulation • Selector API • YUI’s Node API
  63. 63. Rendering HTML - nodejs-dom #!/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'); // ...
  64. 64. Rendering HTML http://yuiloader.davglass.com/calendar/
  65. 65. 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.
  66. 66. Multiple Response Types http://yuiloader.davglass.com/template/
  67. 67. 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.
  68. 68. Other Uses • Fast utility layer testing with YUI Test. • Smoke tests for DOM-centric code. • Could emulate some browser quirks. • Validation Code
  69. 69. Resources • YUI: http://developer.yahoo.com/yui/ • Node.js: 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/
  70. 70. Summary • SSJS is awesome because • We are JavaScript programmers • Reuse (libraries/code) • Progressive Enhancement • Node.js + YUI3 rocks • YUI 3’s was easy to get running on Node.js • Server side DOM allows for a single code base
  71. 71. Today presentation was Brought to you by And the fonts: the letters: Comic Sans J and S monofur Tom Hughes-Croucher Slides, etc --> http:// @sh1mmer speakerrate.com/sh1mmer croucher@yahoo-inc.com Pls rate me. kthxbai.
  1. A particular slide catching your eye?

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

×