Overview• Introduction
• Why Server-Side JavaScript?
• What is Node?
• Using Node
• Understanding Node
• Node Ecosystem
• Programming Style
• More Complex applications
• Deploying Node apps to the cloud
Running order
Introduction
• Tom Hughes-Croucher
• Chief Evangelist at Joyent
• Node.js core contributor
• Author of "Up and Running with Node.js"
Scalable Server-Side Code with JavaScript
Tom Hughes-Croucher
NodeUp and Running
Major update this week
Why Server-SideJavaScript?
JavaScript programmers
3 > 2 > 1
Massive Code base of jQuery and other JS
libraries
I could have said efficiency, but I think we all secretly long to sit around in our underwear.
Laziness or “I’m sick of writing stuff twice”
Remember WWCD (What Would Crockford Do)
*close enough
Progressive Enhancement is free*
Like a Unicorn riding a Narwhal
TL;DR:SSJS is Awesome
If SSJS is so awesome
why is it "new"?
1. Professionalism
“Yahoo!'s corporate motto is: Don't be
eval().“
2. JavaScript Runtimes
Runtimes
•V8 (Google), C++
•Spider Monkey (Mozilla), C++
•Rhino (Mozilla), Java
JavaScript Performance
V8
Spider Monkey
8x
Sep 08! Mar 11!
Anatomy of SSJS
!
{Node
Runtime != Browser
No DOM(By default, anyway)
Summary• Benefits of SSJS
• Lots of JavaScript expertise
• Lots of web code in JS libraries
• Write once, run anywhere
• Progressive Enhancement
• Why SSJS happened now
• Professionalism in JavaScript
• New generation of JavaScript runtimes
What is Node?
Node• JavaScript programming environment
• Uses V8 runtime
• Event Driven
• Non-blocking libraries
• Supports CommonJS module format
• Supports C/C++ based add-ons
Service behind traffic server
Woah! Overload.
1. It's JavaScript
See Above.
2. It's Fast
concurrency=300, Smaller is Better
response size (bytes)
response tim
e (
ms)
100
200
300
400
24
26
28
210
212
214
216
218
server
nginxthintornadonode_buffer
3. It's easy to extend
'Modules' in JS'Add-ons' in C
4. Node is _not_ Rails/Django/etc
Node is bare-bone to the metal
However, the Node community are making
Rails/Django/etc
5. Node is young
Stable is "stable"Unstable moves fast
Using Node
Using Node
• Part 1. Installation
• Part 2. Basics
• Part 3. Getting stuck in
Part 1. Installation
Navea.k.a the easy way
Enki:~ $ wget -q http://github.com/isaacs/nave/raw/master/nave.shEnki:~ $ chmod 755 nave.shEnki:~ $ ./nave.sh install latest
• Installs and versions Node
• Allows Node shells with specific versions
• Allows you to get 'latest' <-- Stable
• May add 'unstable' option in future
Nave
Manual Installation
Go to http://nodejs.org/#download
and get the URL of the current stable release
Enki:~ $ wget -q http://nodejs.org/dist/node-v0.4.10.tar.gzEnki:~ $ tar xzf node-v0.4.10.tar.gzEnki:~ $ cd node-v0.4.10Enki:~/node-v0.4.10 $
Local or system?
Local
Enki:~/node-v0.4.10 $ mkdir ~/localEnki:~/node-v0.4.10 $ ./configure --prefix=~/localChecking for program g++ or c++ : /usr/bin/g++ Checking for program cpp : /usr/bin/cpp...Checking for fdatasync(2) with c++ : no 'configure' finished successfully (3.466s)
Enki:~/node-v0.4.10 $ makeWaf: Entering directory `/Users/sh1mmer/node-v0.4.10/build'DEST_OS: darwinDEST_CPU: x86Parallel Jobs: 1[ 1/69] cc: deps/libeio/eio.c -> build/default/deps/libeio/eio_1.o/usr/bin/gcc -rdynamic -D_GNU_SOURCE -DHAVE_CONFIG_H=1 -DEV_MULTIPLICITY=0 -pthread -g -O3 -DHAVE_OPENSSL=1 -DX_STACKSIZE=65536 -D_LARGEFILE_SOURCE -D_FILE_OFFSET_BITS=64 -DHAVE_FDATASYNC=0 -DPLATFORM="darwin" -DNDEBUG -Idefault/deps/libeio -I../deps/libeio -Idefault -I.. ../deps/libeio/eio.c -c -o default/deps/libeio/eio_1.o...
Enki:~/node-v0.4.10 $ make installWaf: Entering directory `/Users/sh1mmer/node-v0.4.10/build'DEST_OS: darwinDEST_CPU: x86Parallel Jobs: 1* installing build/default/config.h as /Users/sh1mmer/local/include/node/config.h* installing build/default/node as /Users/sh1mmer/local/bin/node* installing build/default/src/node_config.h as /Users/sh1mmer/local/include/node/node_config.hWaf: Leaving directory `/Users/sh1mmer/node-v0.4.10/build''install' finished successfully (0.373s)Enki:~/node-v0.4.7 $
Enki:~/node-v0.4.10 $ echo $PATH/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin:/usr/local/git/bin:/Users/croucher/Code/narwhal/bin:/opt/local/bin:/usr/local/git/bin:/Users/sh1mmer/binEnki:~/node-v0.4.10 $ node -v-bash: node: command not foundEnki:~/node-v0.4.10 $ echo PATH=~/local/bin:\$PATH >> ~/.profileEnki:~/node-v0.4.10 $ node -vv0.4.10
System
Enki:~/node-v0.4.10 $ ./configure...Enki:~/node-v0.4.10 $ make...Enki:~/node-v0.4.10 $ sudo make install...Enki:~/node-v0.4.10 $ node -vv0.4.7Enki:~/node-v0.4.10 $
•Get Node head from Github using Git
• Install to ~/node
Exercise
Part 2. Basics
Interactive JavaScript terminal
node-repl
$Enki:~ $ node
$Enki:~ $ node> 3 > 2 > 1false> true == 1true> true === 1false
> console.log('Hello World');Hello World> .help.clear Break, and also clear the local context..exit Exit the prompt.help Show repl options> .clearClearing context...> .exitEnki:~ $
Enki:~ $ node> var foo = "bar";> foo;'bar'> .clearClearing context...> fooReferenceError: foo is not defined at [object Context]:1:1 at Interface.<anonymous> (repl:98:19) at Interface.emit (events:27:15) at Interface._ttyWrite (readline:295:12) at Interface.write (readline:132:30) at Stream.<anonymous> (repl:79:9) at Stream.emit (events:27:15) at IOWatcher.callback (net:489:16)
var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(8124, "127.0.0.1");console.log('Server running at http://127.0.0.1:8124/');
var http = require('http');
//include the http library
http.createServer(function (req, res) {
}).listen(8124, "127.0.0.1");
//create an http server//when ‘stuff’ happens call this anonymous function//listen on port 8124 of the IP 127.0.0.1
http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');})
//when ‘stuff’ happens my function fires//I get a request object and a response object//I write to the response object header//HTTP status 200 and content-type ‘text/plain’//close the response with the body://Hello World
console.log('Server running at http://127.0.0.1:8124/');
//write Server is running at http://127.0.0.1:8124///to the console
Interactive Debugging
Enki:~/Code/node-examples $ node --debug helloworld.js debugger listening on port 5858Server running at http://127.0.0.1:8124/
Enki:~ $ npm install [email protected] ./node_modules/node-inspector ├── [email protected]└── [email protected]:~ $ node-inspector visit http://0.0.0.0:8080/debug?port=5858 to start debugging
Exercises
• Modify the HTTP server to return the text "I'm learning Node"
• Change the HTTP response to HTML and return your text in an HTML page
• Return the User-Agent string from the browser as part of your HTML page
• Return different textual responses to 2 (or more) browsers
Part 3. Getting Stuck In
HTTP Client
var http = require('http');
var request = http.request({'host': 'www.google.com', 'port': 80, 'path': '/', 'method':'GET'});request.on('response', function (response) { console.log('STATUS: ' + response.statusCode); console.log('HEADERS: ' + JSON.stringify(response.headers)); response.setEncoding('utf8'); response.on('data', function (chunk) { console.log('BODY: ' + chunk); });
Streaming API
write(data)
write(data)
end()
response(headers)
Response
Destination(google.com)Request
data(chunk)data(chunk)data(chunk)
end()
Exercise•Fetch the NYTimes.com and output
the contents to the console
•Create a web server
•Create an HTTP client
•POST data to your web server
•Output the POST data to console
Events
object.on('event', function() { //stuff} );
EventEmitter
EventEmitter
•manage "event handlers"
• list of functions to be called per event
•provide mechanism to trigger events
var util = require('util'), EE = require('events').EventEmitter;
util.inherits(MyClass, EE);
var myObj = new MyClass();
//nb using first class functionsmyObj.on('something', function);
exports.inherits = function (ctor, superCtor) { ctor.super_ = superCtor; ctor.prototype = Object.create(superCtor.prototype, { constructor: { value: ctor, enumerable: false } });};
More than just core
CommonJS Modules
Library format for SSJS
var inc = require('increment').increment;var a = 1;inc(a); // 2
exports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum;};
var add = require('math').add;exports.increment = function(val) { return add(val, 1);};
math.js
increment.js
Protipexports.awesome = function() { //yay my code is awesomesauce};
var exports.fail = function() { //exports is a global //by redeclaring it as //a local variable //your code _will_ fail };
Exercise• Create a CommonJS module called "fish"
• Provide functions to:
• swim
• mouth breath
• flop around
• Import your module into a node project
• Call the various functions
Node Package Manager (NPM)
NPM is written in JavaScript for Node
Enki:~ $ cat `which npm`#!/usr/bin/env node;(function () { // wrapper in case we're in module_context modevar log = require("../lib/utils/log")log.waitForConfig()log.info("ok", "it worked if it ends with")
var fs = require("../lib/utils/graceful-fs") , path = require("path") , sys = require("../lib/utils/sys") , npm = require("../npm") , ini = require("../lib/utils/ini") , rm = require("../lib/utils/rm-rf")
Enki:~/Code/node(master) $ npm install [email protected] ../../node_modules/express ├── [email protected]├── [email protected]└── [email protected]:~/Code/node(master) $
Yay. Easy.
Install instructionshttps://github.com/isaacs/npm
Express.js
Sinatra Style MVC framework
var app = require('express').createServer();
app.get('/', function(req, res){ res.send('hello world');});
app.listen(3000);
HTTP Verb Oriented
Middleware
app.use(express.bodyParser());app.use(express.cookieParser());
app.post('/', function(req, res){ // Perhaps we posted several items with a form // (use the bodyParser() middleware for this) var items = req.body.items; console.log(items); res.send('logging');});
Templating
var express = require("express");
app.configure(function () { var public = __dirname + "/../public/"; public = require("path").normalize(public);
app.set("views", __dirname + "/views"); app.set("view engine", "jade");});
app.get("/", function (req, res) { res.render("index", { locals : { h1: 'Router Stats', scripts : [ "/public/smoothie.js", "/public/raphael.js", "/public/base.js", "/public/gfx.js", "/public/explore.js", "/public/app.js" ] } }});
•Create an Express server
•Serve two different pages based on value of the HTTP Get param "page"
•Create a redirect from /old to /new
•Set a cookie on the client
Exercise
Express in depth
Routes
• Routes are based on verbs
• GET
• POST
• PUT
• DELETE
• ALL (not a real verb, but obvious)
Simple routes
app.get(‘/’, function(req,res) { res.send(‘hello root’);});
Routes with variables
app.get(‘/user/:id’, function(req,res) { res.send(‘hello ‘ + req.params.id);});
Optional flags in routes
app.get(‘/:filename?’, function(req,res) { if(req.params.filename) { res.send(req.params.filename); } else { res.send(‘root’); }});
Regex as routes
app.get(/\//, function(req, res) { //like using ‘/’ ? res.send(‘/’);});
app.get(/^\/\d+\/?$/, function(req,res) { res.send(‘matches a number’);});
app.get(/^\/(.+)\/?$/, function(req,res) { //note translation of %23, etc res.send(‘Got: ’ + req.params[0]); //also captures become an array});
Using regex to define parameters
app.get(‘/index.:format((html|json))’,function(req,res) { res.send('Got: ' + req.params.format);});
app.get('/:id(\d+)', function(req,res) { //only digits, right? res.send(req.params.id);});
app.get('/:id(\\d+)', function(req,res) { //escape your \ in strings res.send(req.params.id);});
function normalizePath(path, keys) { path = path .concat('/?') .replace(/\/\(/g, '(?:/') .replace(/(\/)?(\.)?:(\w+)(?:(\(.*?\)))?(\?)?/g, function(_, slash, format, key, capture, optional){ keys.push(key); slash = slash || ''; return '' + (optional ? '' : slash) + '(?:' + (optional ? slash : '') + (format || '') + (capture || '([^/]+?)') + ')' + (optional || ''); }) .replace(/([\/.])/g, '\\$1') .replace(/\*/g, '(.+)'); return new RegExp('^' + path + '$', 'i');}
Routing magic: Router.js
Routing magic• If . before :variable? then . is also optional
• If ? is not after a variable then only the previous character is affected
• / at the end of URLs automatically optional
• * Can be used as a wildcard in routes
• Includes when end of URL is optional
e.g. '/app/e?'
• Regex can be used any place in a route string
e.g. '/app/(\\d)r?'
Exercises• Create an express app with routes that capture '/'
'/products' and '/services'
• Create a route that captures the product ID after '/product/' e.g. '/product/abc12' and returns it in the response
• Use a regular expression to restrict the ID parameter to 3 letter followed by 3-5 numbers
• Create a route using a regex that matches the entire route
Passing Control
• Routes are actually 'stacked middleware'
• You can pass control between routes
• The next() function calls the next matching route
app.get('/users/:id', function(req, res, next){ var id = req.params.id;
if (checkPermission(id)) { // show private page } else { next(); }});
app.get('/users/:id', function(req, res){ // show public user page });
Passing Control
• next() is a function of router (and defined in the closure containing the route)
• router will grab routes in the order they were declared
• e.g. since'/*' will match everything so it should be the last route!
• router doesn't care about verbs so you can use all() to operate on all verbs/routes and then use next() to pass to get(), put(), etc
Exercises
• Create a simple check for correct product IDs if not pass control to a route showing a custom error page
• Use app.all() to check user permission before showing (mock-up) edit controls on a web site
Middleware
It's a pattern
next()
next()
next()
req, res
next()
next()
next()
Dispatcher
req
res
req, res
req, res, next
var express = require('express'), app = express.createServer();
var middleware = function (req, res, next) { req.foo = 'bar'; next();};
app.use(middleware);
app.get('/', function(req, res) { res.send(req.foo);
var express = require('express'), app = express.createServer();
var middleware = function (req, res, next) { var send = res.send; res.send = function(d) { res.send = send; res.send('hijacked! ' + d); } next();};
app.use(middleware);
app.get('/', function(req, res) { res.send('hi');});
• logger
• bodyParser
• cookieParser
• session
• static
• errorHandler
• profiler
• responseTime
• basicAuth
• favicon
• vhost
Connect middleware(Renamed express.* for convenience)
var express = require('express'), app = express.createServer();
app.use(express.logger());app.use(express.bodyParser());app.use(express.cookieParser());app.use(app.router);app.use(express.static(__dirname + '/images'));app.use(express.errorHandler());
app.get('/', function(req, res) { res.send('<html><img src="/image.png"></html');});
app.listen(9003);
Ordering matters
Router uses "internal
middleware"
var express = require('express'), app = express.createServer();
var middleware = function (req, res, next) { req.foo = 'bar'; next();};
app.get('/', middleware, function(req, res) { res.send(req.foo);});
var a, b, c, d;a = b = c = d = function(req,res,next) { next();}
var set1 = [a,b];var set2 = [c,d];var all = [set1, set2];
app.get('/set1', set1, function(req,res) { res.send('output');});app.get('/set2', [c,d], function(req,res) { res.send('output');});app.get('/all', all, function(req,res) { res.send('output');});
Middleware factories
Middleware are just functions
var a, b, c, d;a = b = c = d = function(req,res,next) { next();}
var set1 = [a,b];var set2 = [c,d];var all = [set1, set2];
app.get('/set1', set1, function(req,res) { res.send('output');});app.get('/set2', [c,d], function(req,res) { res.send('output');});app.get('/all', all, function(req,res) { res.send('output');});
var mFactory = function(letter) { return function(req,res,next) { var send = res.send; res.send = function(d) { res.send = send; res.send(letter + ' ' + d); } next(); }};
var set1 = [mFactory('a'),mFactory('b')];var set2 = [mFactory('c'),mFactory('d')];var all = [set1, set2];
app.get('/set1', set1, function(req,res) { res.send('output');});app.get('/set2', set2, function(req,res) { res.send('output');});app.get('/all', all, function(req,res) { res.send('output');});
• Create a middleware to detect mobile phone browsers and attach a boolean to req
• Create an express app that serves up links to an image using staticProvider
• Modify Profiler to profile your app and write each profile to a log file
• Create a middleware factory that sets the HTTP Expires header based on roles
Exercise
Error handling
function NotFound(msg){ this.name = 'NotFound'; Error.call(this, msg); Error.captureStackTrace(this, arguments.callee);}
NotFound.prototype.__proto__ = Error.prototype;
app.get('/404', function(req, res){ throw new NotFound;});
app.get('/500', function(req, res){ throw new Error('keyboard cat!');});
app.error(function(err, req, res, next){ if (err instanceof NotFound) { res.render('404.jade'); } else { next(err); }});
View Rendering
app.get('/', function(req, res){ res.render('index.ejs', { title: 'Falsy Demo' });});
Enki:~/Code/express-demo $ tree.├── app.js├── lib├── public└── views ├── index.ejs ├── layout.ejs ├── layout1.ejs └── partials └── stylesheet.ejs
4 directories, 5 filesEnki:~/Code/express-demo $
npm install ejsnpm install jade
Don't forget to install
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title><%= title %></title> </head> <body> <%- body %> </body></html>
layout.ejs
• layout is a framework unless you turn it off
•body is a special variable for layout referring to the file specified
app.set('view engine', 'ejs');
app.get('/', function(req,res) { res.render('index', { title:'Falsy Demo'});});
//global
app.set('view options'), { layout: false;});
//or per route
res.render(index, {layout: false});
Partial views
View Partials
•Repeating elements
•Take a collection
• Iterate over the collection
•"Built in" variables for managing collections
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <%- partial('stylesheet', stylesheets) %> <title><%= title %></title> </head> <body> <h1><%= header %></h1> <%- body %> </body></html>
layout.ejs
partials/stylesheet.ejs
<link rel="stylesheet" type="text/css" href="<%- stylesheet %>">
res.render('index', { locals: {'title': title, 'header': header, 'content': content, stylesheets: ['/public/style.css'] }, });
• Create an express server that use jade, haml, ejs to render an index page
• Create a public folder and include file from it (CSS, images, etc) in your layout
• Create a route for '/blog/id' to accept only digits
• Make a 'fake database' (array) of blog posts and use a middleware to validate each id is valid
• Create a view for the '/blog/id' show the correct post
• Use a view partial to a preview of each blog post on the index page
Exercises
Questions