Top Banner
YUI and Node.js Sitting in a tree S-E-R-V-I-N-G H-T-T-P Tom Hughes-Croucher @sh1mmer
46

JavaScript Everywhere! Creating a 100% JavaScript web stack

Jan 15, 2015

Download

Technology

One of the costs of working on the web has traditionally been having to work in multiple languages. JavaScript has been the only choice for web front-ends, but as soon as you start back-end work, it can be anything from PHP to Python to Perl to Ruby or even C. Anything, that is, but JavaScript.In the last year server-side JavaScript has leapt forward with a passion, partly due to CommonJS but also due to NodeJS. With these new advances we have an opportunity to enjoy more code re-use, and faster, more efficient pages.

We’ll explore server-side JavaScript and look at how we can use a JavaScript DOM/BOM to run YUI3 on NodeJS, allowing us to reuse the same code on the client and the server, deliver targeted experiences to various classes of client, and smoke test DOM operations during continuous integration.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: JavaScript Everywhere! Creating a 100% JavaScript web stack

YUI and Node.jsSitting in a tree

S-E-R-V-I-N-G H-T-T-P

Tom Hughes-Croucher@sh1mmer

Page 2: JavaScript Everywhere! Creating a 100% JavaScript web stack

YUI3 + Node.js IS SO AWESOME

MY ENTIRE PRESENTATION IS IN COMIC SANS

AND YOU WILL STILL LOVE ME AT THE END

Page 3: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 4: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 5: JavaScript Everywhere! Creating a 100% JavaScript web stack

Node.js• Server-side JavaScript process

• Uses V8

• Non-blocking

• Event Driven

• CommonJS module format

Page 6: JavaScript Everywhere! Creating a 100% JavaScript web stack

Node.js• Server-side JavaScript process

• Uses V8

• Non-blocking

• Event Driven

• CommonJS module format

AWESOME!

Page 7: JavaScript Everywhere! Creating a 100% JavaScript web stack

At JSCONF.US 2010Node was ☜⎻⎻⎻⎻⎻☞ this fast

Page 8: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 9: JavaScript Everywhere! Creating a 100% JavaScript web stack

ButRyan doesn’t roll like that. Ryan rolls like this

Page 10: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 11: JavaScript Everywhere! Creating a 100% JavaScript web stack

Why SSJS?

Page 12: JavaScript Everywhere! Creating a 100% JavaScript web stack

JavaScript programmers

3 > 2 > 1

Page 13: JavaScript Everywhere! Creating a 100% JavaScript web stack

Massive Code base of YUI and other JS librariesI heard some people use this thing called jQuery,

but I’m not convinced it’ll catch on

Page 14: JavaScript Everywhere! Creating a 100% JavaScript web stack

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.

Page 15: JavaScript Everywhere! Creating a 100% JavaScript web stack

Progressive Enhancement is free*Remember WWCD (What Would Crockford Do)

*close enough

Page 16: JavaScript Everywhere! Creating a 100% JavaScript web stack

TL;DR:SSJS is Awesome

Like a Unicorn riding a Narwhal

Page 17: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 18: JavaScript Everywhere! Creating a 100% JavaScript web stack

YUI3Awesome like a Narwhal riding a Unicorn

Page 19: JavaScript Everywhere! Creating a 100% JavaScript web stack

YUI 3• Modular

• Sandboxed

• Intrinsic component loading

• Core team + community (50+ extensions)

• Not just about manipulating the DOM

Page 20: JavaScript Everywhere! Creating a 100% JavaScript web stack

YUI 3• Script Loading

• Remote i/o

• Events and Attributes

• Data Manipulation

• Language Utilities

• Templating

Page 21: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 22: JavaScript Everywhere! Creating a 100% JavaScript web stack

Making it work - 1

if (typeof exports == 'object') { exports.YUI = YUI; }

YUI exports itself per the CommonJS spec

Page 23: JavaScript Everywhere! Creating a 100% JavaScript web stack

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); }});

Page 24: JavaScript Everywhere! Creating a 100% JavaScript web stack

Fin.

Page 25: JavaScript Everywhere! Creating a 100% JavaScript web stack

‘ello World Node Style

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

Y.log('ello World');

Page 26: JavaScript Everywhere! Creating a 100% JavaScript web stack

‘ello World YUI Style

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

Page 27: JavaScript Everywhere! Creating a 100% JavaScript web stack

[~/examples (master)⚡] ➔ ./hello.js [INFO]: ello World

‘ello World YUI Style

Page 28: JavaScript Everywhere! Creating a 100% JavaScript web stack

Enabling YUI’s LoaderYUI.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) { } };});

Page 29: JavaScript Everywhere! Creating a 100% JavaScript web stack

Enabling YUI’s Loader#!/usr/bin/env nodevar 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');});

Page 30: JavaScript Everywhere! Creating a 100% JavaScript web stack

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

Page 31: JavaScript Everywhere! Creating a 100% JavaScript web stack
Page 32: JavaScript Everywhere! Creating a 100% JavaScript web stack

Accessing Remote Data

#!/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)); });});

Using the YQL module from YUI Gallery

Page 33: JavaScript Everywhere! Creating a 100% JavaScript web stack

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=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- } }}

Page 34: JavaScript Everywhere! Creating a 100% JavaScript web stack

DOMIt’s BOM.

Page 35: JavaScript Everywhere! Creating a 100% JavaScript web stack

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.

Page 36: JavaScript Everywhere! Creating a 100% JavaScript web stack

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

Page 37: JavaScript Everywhere! Creating a 100% JavaScript web stack

Rendering HTML - nodejs-dom

• DOM element creation and manipulation

• Selector API

• YUI’s Node API

Page 38: JavaScript Everywhere! Creating a 100% JavaScript web stack

Rendering HTML - nodejs-dom

#!/usr/bin/env nodevar 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'); // ...

Page 39: JavaScript Everywhere! Creating a 100% JavaScript web stack

Rendering HTML

http://yuiloader.davglass.com/calendar/

Page 40: JavaScript Everywhere! Creating a 100% JavaScript web stack

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.

Page 41: JavaScript Everywhere! Creating a 100% JavaScript web stack

Multiple Response Types

http://yuiloader.davglass.com/template/

Page 42: JavaScript Everywhere! Creating a 100% JavaScript web stack

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.

Page 43: JavaScript Everywhere! Creating a 100% JavaScript web stack

Other Uses

• Fast utility layer testing with YUI Test.

• Smoke tests for DOM-centric code.

• Could emulate some browser quirks.

• Validation Code

Page 44: JavaScript Everywhere! Creating a 100% JavaScript web stack

Summary• YUI 3’s design made it easy to get

running on Node.js

• JavaScript libraries are awesomely valuable on the server side

• Server side DOM shows crazy potential for a single code base

Page 46: JavaScript Everywhere! Creating a 100% JavaScript web stack

Today presentation wasBrought to you by

the letters:J and S

And the fonts:Comic Sansmonofur

Tom Hughes-Croucher@sh1mmer

[email protected]

Slides, etc --> http://speakerrate.com/sh1mmer

Pls rate me. kthxbai.