UMN Code People - Thu, Oct 4, 2012

Material to Cover

Intro to node.js
Why care / What it can do
Node.js project boilerplate
NPM - Node Package Manager
Integration/Automation of node.js tools
- Useful for browser-based JS projects, too
Static and templated web server examples
Client-Server code sharing tips
Realtime, WebSockets example

Installing is really easy...

Installers for Mac/Windows
But also packages for Homebrew, APT, ...
$ sudo apt-get install nodejs
$ node file.js

So what? Well, Node.js offers...

Tools to improve your current browser-based JS dev environment
- For any/all projects using JS...
- Automatically lint your JS code
- Automatically run your JS unit tests
Easy path to realtime, WebSocket client-server apps
Write complex apps in a single language
Share code (like your models) between client and server

Quick Example

HTTP server, bare node.js code:

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');

$ node server.js

Node.js is not mod_javascript for Apache
Yes, stand alone server processes
NO, you don't always have write your own HTTP headers :p

What exactly is Node.js?

A language and an interpreter, not a framework
Node.js uses Chrome's V8 engine
JavaScript flavor is ECMA-262, 5th edition
nodemanual.org/latest/js_doc/index.html
Native language features like: array.forEach(), JSON, getters/setters, freeze/seal, and more...
Node.js provides global Objects that expose APIs for sockets, TCP/IP, HTTP/HTTPS, file I/O, processes/signals, and more...
nodejs.org/api/
We are not running in a browser so... no DOM / document object. (There are libraries for that though...)

Project Boilerplate

Simple node.js HTTP server starting point
Also useful reference for configuring your browser-based JS dev environment
Automagic NPM dependency handling
Automagic JS linting, JS unit tests
github.com/paularmstrong/node-web-boilerplate
Fork: github.com/zachstronaut/node-web-boilerplate
Please Note: Many node.js frameworks have their own boilerplate / sample projects

`./node-web-boilerplate/`

node_modules/ - automatically managed by NPM
package.json - tells NPM what to do
config/ - .js files that configure things
scripts/ - place for helper scripts, githook scripts
Makefile - automates much for us

public/ - static files, publicly available via HTTP
views/ - dynamic template files for HTML views
server.js - main code file for our node.js server
app/ - place for additional server-side .js code

`package.json`

// ...
"dependencies": {
    "express": "2.5.11",    // node.js web application framework
    "underscore": "1.4.1",  // JS helper lib
    "swig": ">= 0.12.0"     // django-like HTML templates
},
"devDependencies": {
    "nodelint": "0.6.2",    // linting
    "nodeunit": "0.7.4"     // unit tests
},
// ...

$ npm install -d
Each project tracks its own package versions in ./node_modules

JS Code Unit Testing

nodeunit - github.com/caolan/nodeunit
mocha - visionmedia.github.com/mocha/
Run raw JS function unit tests automatically, asynchronously
Run unit tests in your browser when you need DOM
Some folks do automatic, asynchronous browser/DOM testing:
- PhantomJS, Headless Webkit - phantomjs.org/
- jsdom, DOM lib for node.js - github.com/tmpvar/jsdom

JS Code Linting

nodelint - github.com/tav/nodelint
NPM module for Crockford's JSLint - github.com/douglascrockford/JSLint
Configured via ./config/config-lint.js
Scream, "CROOOOOOCKFOOOOORD!!!!"
But also avoid tons of JS errors and establish a consistent coding style
Totally worth it for front-end JS devs, not just node.js!

Automate NPM, Testing, and Linting

Using ./Makefile, but you could use a shell script or whatever
After cloning the github repo, run $ make all
- Runs npm install -d for us
- Sets up githooks for post-merge and pre-commit
Pre-commit hook will lint JS code and run unit tests and force you to fix problems before you can commit them. (Zach, show a demo!)
Post-merge hook runs make all again, coming full circle...
Keeps NPM modules and githooks up to date if they changed during the last merge!

Node.js Web Server with Express

Time to get down and dirty with code! (Hey Zach, that means open Terminal)

Static HTTP server:

var express = require('express'),
    config = require('./config/config-app'),
    app = express.createServer();

app.use(express.static(config.public));

app.listen(3000);

Import NPM modules with require('module-name')
Import your files with require('./path/file-name')
Your file needs to set module.exports
Example of dynamic HTTP with swig templates and some custom routing in ./server.js
Swig, Django-like templates for Node.js - paularmstrong.github.com/swig/

Client-Server Code Sharing

Client = Browser
Client-only code can go in ./public/js/
Server-only code can go in ./app/
Shared JS code goes in ./public/shared/
Client side, for security reasons, can only get scripts from ./public/

Including shared code:

// Node.js server code
var MyObject = require('./public/shared/MyObject');

// Browser code
<script src="/shared/MyObject.js"></script>

Client-Compatible Node.js Code Files

Browser does not understand require() or module.exports

MyObject.js

(function () {
    var nodejs = (typeof module !== 'undefined'
            && module.hasOwnProperty('exports')),
        _ = nodejs ? require('underscore') : window._;
        // Browser code will need to load underscore.js
    
    function MyObject() {
        this.hello = 'world';
    }

    if (nodejs) {
        module.exports = MyObject;
    } else {
        window.MyObject = MyObject;
    }
}());

Or use RequireJS: requirejs.org/docs/node.html

Realtime, WebSockets

socket.io NPM package - http://socket.io/
Provides both client and server via same NPM package
Cross-browser - tries WebSockets or finds a shim like COMET, etc.
Persistent, realtime connection... skip overhead of many HTTP requests
Node.js server is stateful with a persistent process handling the websockets
- Memory caching!
- Don't have to rebuild sessions or model from a database with every user request
- Fast, efficient!

WebSockets Example Server

Delightfully easy to integrate into a node.js HTTP server:

var express = require('express'),
    config = require('./config/config-app'),
    app = express.createServer(),
    io = require('socket.io').listen(app);

app.use(express.static(config.public));
app.listen(3000);

// Socket.io code uncoupled from HTTP server!!
io.sockets.on('connection', function (socket) {
    socket.emit('news', {hello: 'world'});
});

WebSockets Example Client

Client-side socket.io JS files are automatically made accessible via URL with .listen(app) command on server

HTML:

<html>
<body>
<p>news.hello = <span id="test"></span></p>

<!-- This folder is not in ./public/.  The URL is automatic. -->
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
    document.getElementById('test').innerHTML = data.hello;
});
</script>
</body>
</html>

More on socket.io here: http://a.stronaut.com/z1q

JavaScript and Node.js