SlideShare ist ein Scribd-Unternehmen logo
1 von 91
Downloaden Sie, um offline zu lesen
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 THE END
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 convinced it’ll catch on
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.
Progressive
Enhancement is free*
Remember WWCD (What Would Crockford Do)




                             *close enough
TL;DR:
SSJS is Awesome
 Like a Unicorn riding a Narwhal
Server Side JavaScript - You ain't seen nothing yet
Why now?
1. Professionalism
Server Side JavaScript - You ain't seen nothing yet
“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
  projects

• Only useful on the server
ECMAScript is
• A standard
• Implemented in all browsers
• ECMAScript-262 3rd ed. ~
  JavaScript 1.5

• ECMAScript-262 5th ed. has no
  JavaScript equivalent
JavaScript 1.6+

• E4X (EcmaScript For XML)
• Let scope blocks
• Generators
• Generator expressions
Server Side JavaScript - You ain't seen nothing yet
Framew
      orks
CommonJS
CommonJS
• Set of standards for SSJS
 • Modules
 • File System
 • etc
• Cross-implementation API
• Still implementation specific code
Server Side JavaScript - You ain't seen nothing yet
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"},
        body : ["Hello world!"]
    };
}
JSGI Middleware
    function Head(app) {
      return function(env) {
          var result = app(env);
          if (env["REQUEST_METHOD"] === "HEAD")
              result.body = [];
          return result;
      }
}
Fab
Fab
Fab
Fab
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 );
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
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
    CommonJS module format   E!
At JSCONF.US 2010
   Node was   ⎻⎻⎻⎻⎻   this fast
Server Side JavaScript - You ain't seen nothing yet
But
Ryan doesn’t roll like that. Ryan rolls like this
Server Side JavaScript - You ain't seen nothing yet
Community, much?
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
Node.js + YUI3 =
   Awesome
 like a Narwhal riding a Unicorn
Server Side JavaScript - You ain't seen nothing yet
YUI 3
• Modular
• Sandboxed
• Intrinsic component loading
• Core team + community (50+ extensions)
• Not just about manipulating the DOM
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) {
            if (str.toString) {
                str = str.toString();
            } else {
                str = sys.inspect(str);
            }
        }
        // output log messages to stderr
        sys.error('[' + t.toUpperCase() + ']: ' + m + str);
    }
});
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 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) {
        }
    };
});
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');
});
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...
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));
     });
});
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-
        }
     }
}
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 components on
  the server opens up some interesting
  opportunities.
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
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 =
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');
            // ...
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 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.
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
    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.
Other Uses


• Fast utility layer testing with YUI Test.
• Smoke tests for DOM-centric code.
 • Could emulate some browser quirks.
• Validation Code
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/
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
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.

Weitere ähnliche Inhalte

Was ist angesagt?

REST/JSON/CoreData Example Code - A Tour
REST/JSON/CoreData Example Code - A TourREST/JSON/CoreData Example Code - A Tour
REST/JSON/CoreData Example Code - A TourCarl Brown
 
Introduction to Nodejs
Introduction to NodejsIntroduction to Nodejs
Introduction to NodejsGabriele Lana
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJSSylvain Zimmer
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.jsjacekbecela
 
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCar
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCarDo Zero ao Node.js - Especialização em Engenharia de Software - UFSCar
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCarPablo Souza
 
Aplicações assíncronas no Android com Coroutines & Jetpack
Aplicações assíncronas no Android com Coroutines & JetpackAplicações assíncronas no Android com Coroutines & Jetpack
Aplicações assíncronas no Android com Coroutines & JetpackNelson Glauber Leal
 
An Introduction to Tornado
An Introduction to TornadoAn Introduction to Tornado
An Introduction to TornadoGavin Roy
 
Py conkr 20150829_docker-python
Py conkr 20150829_docker-pythonPy conkr 20150829_docker-python
Py conkr 20150829_docker-pythonEric Ahn
 
node.js: Javascript's in your backend
node.js: Javascript's in your backendnode.js: Javascript's in your backend
node.js: Javascript's in your backendDavid Padbury
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js PlatformDomenic Denicola
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developerscacois
 
Comet with node.js and V8
Comet with node.js and V8Comet with node.js and V8
Comet with node.js and V8amix3k
 
Java script at backend nodejs
Java script at backend   nodejsJava script at backend   nodejs
Java script at backend nodejsAmit Thakkar
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applicationsTom Croucher
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)Chris Cowan
 

Was ist angesagt? (20)

REST/JSON/CoreData Example Code - A Tour
REST/JSON/CoreData Example Code - A TourREST/JSON/CoreData Example Code - A Tour
REST/JSON/CoreData Example Code - A Tour
 
The jsdom
The jsdomThe jsdom
The jsdom
 
Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)
 
Node.js - A Quick Tour
Node.js - A Quick TourNode.js - A Quick Tour
Node.js - A Quick Tour
 
Introduction to Nodejs
Introduction to NodejsIntroduction to Nodejs
Introduction to Nodejs
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
 
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCar
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCarDo Zero ao Node.js - Especialização em Engenharia de Software - UFSCar
Do Zero ao Node.js - Especialização em Engenharia de Software - UFSCar
 
Aplicações assíncronas no Android com Coroutines & Jetpack
Aplicações assíncronas no Android com Coroutines & JetpackAplicações assíncronas no Android com Coroutines & Jetpack
Aplicações assíncronas no Android com Coroutines & Jetpack
 
An Introduction to Tornado
An Introduction to TornadoAn Introduction to Tornado
An Introduction to Tornado
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Py conkr 20150829_docker-python
Py conkr 20150829_docker-pythonPy conkr 20150829_docker-python
Py conkr 20150829_docker-python
 
node.js: Javascript's in your backend
node.js: Javascript's in your backendnode.js: Javascript's in your backend
node.js: Javascript's in your backend
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developers
 
Comet with node.js and V8
Comet with node.js and V8Comet with node.js and V8
Comet with node.js and V8
 
Java script at backend nodejs
Java script at backend   nodejsJava script at backend   nodejs
Java script at backend nodejs
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
 
Node.js 0.8 features
Node.js 0.8 featuresNode.js 0.8 features
Node.js 0.8 features
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
 

Ähnlich wie Server Side JavaScript - You ain't seen nothing yet

Let's run JavaScript Everywhere
Let's run JavaScript EverywhereLet's run JavaScript Everywhere
Let's run JavaScript EverywhereTom Croucher
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.jsYoann Gotthilf
 
Node js实践
Node js实践Node js实践
Node js实践jay li
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
Original slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talkOriginal slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talkAarti Parikh
 
Appsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaolaAppsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaoladrewz lin
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patternsStoyan Stefanov
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applicationsdimisec
 
Node.js: The What, The How and The When
Node.js: The What, The How and The WhenNode.js: The What, The How and The When
Node.js: The What, The How and The WhenFITC
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing UpDavid Padbury
 
Basic Understanding and Implement of Node.js
Basic Understanding and Implement of Node.jsBasic Understanding and Implement of Node.js
Basic Understanding and Implement of Node.jsGary Yeh
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
Introduction to node.js GDD
Introduction to node.js GDDIntroduction to node.js GDD
Introduction to node.js GDDSudar Muthu
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...Tom Croucher
 
Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Christian Joudrey
 
JS & NodeJS - An Introduction
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An IntroductionNirvanic Labs
 

Ähnlich wie Server Side JavaScript - You ain't seen nothing yet (20)

Let's run JavaScript Everywhere
Let's run JavaScript EverywhereLet's run JavaScript Everywhere
Let's run JavaScript Everywhere
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.js
 
Node azure
Node azureNode azure
Node azure
 
Node js实践
Node js实践Node js实践
Node js实践
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
Node.js
Node.jsNode.js
Node.js
 
Original slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talkOriginal slides from Ryan Dahl's NodeJs intro talk
Original slides from Ryan Dahl's NodeJs intro talk
 
Appsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaolaAppsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaola
 
YUI 3
YUI 3YUI 3
YUI 3
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
Security testing of YUI powered applications
Security testing of YUI powered applicationsSecurity testing of YUI powered applications
Security testing of YUI powered applications
 
5.node js
5.node js5.node js
5.node js
 
Node.js: The What, The How and The When
Node.js: The What, The How and The WhenNode.js: The What, The How and The When
Node.js: The What, The How and The When
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
Basic Understanding and Implement of Node.js
Basic Understanding and Implement of Node.jsBasic Understanding and Implement of Node.js
Basic Understanding and Implement of Node.js
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
Introduction to node.js GDD
Introduction to node.js GDDIntroduction to node.js GDD
Introduction to node.js GDD
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
 
Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?
 
JS & NodeJS - An Introduction
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An Introduction
 

Mehr von Tom Croucher

Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
Using Node.js to  Build Great  Streaming Services - HTML5 Dev ConfUsing Node.js to  Build Great  Streaming Services - HTML5 Dev Conf
Using Node.js to Build Great Streaming Services - HTML5 Dev ConfTom Croucher
 
Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012 Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012 Tom Croucher
 
Using Node.js to improve the performance of Mobile apps and Mobile web
Using Node.js to improve  the performance of  Mobile apps and Mobile webUsing Node.js to improve  the performance of  Mobile apps and Mobile web
Using Node.js to improve the performance of Mobile apps and Mobile webTom Croucher
 
Creating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent ConfCreating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent ConfTom Croucher
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Tom Croucher
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleTom Croucher
 
OSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js TutorialOSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js TutorialTom Croucher
 
Lessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @MediaLessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @MediaTom Croucher
 
Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011Tom Croucher
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...Tom Croucher
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...Tom Croucher
 
How to stop writing spaghetti code
How to stop writing spaghetti codeHow to stop writing spaghetti code
How to stop writing spaghetti codeTom Croucher
 
Doing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions SouthDoing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions SouthTom Croucher
 
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance MeetupDoing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance MeetupTom Croucher
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010Tom Croucher
 
Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming  Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming Tom Croucher
 
Mobile Data: How to avoid the latency trap - SWDC 2010
Mobile Data: How to avoid the latency trap - SWDC 2010Mobile Data: How to avoid the latency trap - SWDC 2010
Mobile Data: How to avoid the latency trap - SWDC 2010Tom Croucher
 

Mehr von Tom Croucher (20)

Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
Using Node.js to  Build Great  Streaming Services - HTML5 Dev ConfUsing Node.js to  Build Great  Streaming Services - HTML5 Dev Conf
Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
 
Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012 Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012
 
Using Node.js to improve the performance of Mobile apps and Mobile web
Using Node.js to improve  the performance of  Mobile apps and Mobile webUsing Node.js to improve  the performance of  Mobile apps and Mobile web
Using Node.js to improve the performance of Mobile apps and Mobile web
 
Creating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent ConfCreating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent Conf
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
 
OSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js TutorialOSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js Tutorial
 
Lessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @MediaLessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @Media
 
Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
 
How to stop writing spaghetti code
How to stop writing spaghetti codeHow to stop writing spaghetti code
How to stop writing spaghetti code
 
Doing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions SouthDoing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions South
 
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance MeetupDoing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
 
Sf perf
Sf perfSf perf
Sf perf
 
Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming  Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming
 
Mobile Data: How to avoid the latency trap - SWDC 2010
Mobile Data: How to avoid the latency trap - SWDC 2010Mobile Data: How to avoid the latency trap - SWDC 2010
Mobile Data: How to avoid the latency trap - SWDC 2010
 
Pirate yql
Pirate yqlPirate yql
Pirate yql
 
YQL Tutorial
YQL TutorialYQL Tutorial
YQL Tutorial
 

Kürzlich hochgeladen

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Kürzlich hochgeladen (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Server Side JavaScript - You ain't seen nothing yet

  • 1. Server Side JavaScript You ain’t seen nothing yet Tom Hughes-Croucher @sh1mmer
  • 2. Server Side Javascript IS SO AWESOME MY ENTIRE PRESENTATION IS IN COMIC SANS AND YOU WILL STILL LOVE ME AT THE END
  • 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. 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. Progressive Enhancement is free* Remember WWCD (What Would Crockford Do) *close enough
  • 8. TL;DR: SSJS is Awesome Like a Unicorn riding a Narwhal
  • 13. “Yahoo!'s corporate motto is: Don't be eval().“
  • 14. “Doug Crockford's JavaScript is so strict, that uncaught exceptions would trigger global thermonuclear war“
  • 15. 2. JavaScript Runtimes
  • 16. Runtimes • V8 (Google), C++ • Spider Monkey (Mozilla), C++ • Rhino (Mozilla), Java
  • 17. V8 Spider Monkey JavaScript Performance
  • 19. !
  • 21. No DOM for you!
  • 22. JavaScript on Server • Rhino • JavaScript 1.7 • SpiderMonkey • JavaScript 1.8 • V8 • ECMAScript 3
  • 23. Huh?
  • 24. JavaScript is • Proprietary to Netscape (now Mozilla) • “Ahead” of ECMAScript • Only really deployed in Mozilla projects • Only useful on the server
  • 25. ECMAScript is • A standard • Implemented in all browsers • ECMAScript-262 3rd ed. ~ JavaScript 1.5 • ECMAScript-262 5th ed. has no JavaScript equivalent
  • 26. JavaScript 1.6+ • E4X (EcmaScript For XML) • Let scope blocks • Generators • Generator expressions
  • 28. Framew orks
  • 30. CommonJS • Set of standards for SSJS • Modules • File System • etc • Cross-implementation API • Still implementation specific code
  • 35. Works on lots of run-times
  • 37. JSGI Middleware function(env) { return { status : 200, headers : {"Content-Type":"text/plain"}, body : ["Hello world!"] }; }
  • 38. JSGI Middleware function Head(app) { return function(env) { var result = app(env); if (env["REQUEST_METHOD"] === "HEAD") result.body = []; return result; } }
  • 39. Fab
  • 40. Fab
  • 41. Fab
  • 42. Fab
  • 43. 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 );
  • 47. Node.js • Server-side JavaScript process • Uses V8 • Non-blocking • Event Driven • CommonJS module format
  • 48. AW Node.js • ESServer-side JavaScript process OM • Uses V8 • Non-blocking • • Event Driven CommonJS module format E!
  • 49. At JSCONF.US 2010 Node was ⎻⎻⎻⎻⎻ this fast
  • 51. But Ryan doesn’t roll like that. Ryan rolls like this
  • 64. Node.js + YUI3 = Awesome like a Narwhal riding a Unicorn
  • 66. YUI 3 • Modular • Sandboxed • Intrinsic component loading • Core team + community (50+ extensions) • Not just about manipulating the DOM
  • 67. YUI 3 • Script Loading • Remote i/o • Events and Attributes • Data Manipulation • Language Utilities • Templating
  • 68. Making it work - 1 YUI exports itself per the CommonJS spec if (typeof exports == 'object') { exports.YUI = YUI; }
  • 69. 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); } });
  • 70. Fin.
  • 71. ‘ello World Node Style #!/usr/bin/env node var YUI = require("../lib/node-yui3").YUI, Y = YUI(); Y.log('ello World');
  • 72. ‘ello World YUI Style #!/usr/bin/env node require("../lib/node-yui3").YUI().log('ello World');
  • 73. ‘ello World YUI Style [~/examples (master)⚡] ➔ ./hello.js [INFO]: ello World
  • 74. 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) { } }; });
  • 75. 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'); });
  • 76. 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...
  • 77. 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)); }); });
  • 78. 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- } } }
  • 80. 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.
  • 81. 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
  • 82. Rendering HTML - nodejs-dom • DOM element creation and manipulation • Selector API • YUI’s Node API
  • 83. 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'); // ...
  • 85. 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.
  • 87. 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.
  • 88. Other Uses • Fast utility layer testing with YUI Test. • Smoke tests for DOM-centric code. • Could emulate some browser quirks. • Validation Code
  • 89. 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/
  • 90. 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
  • 91. 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.