Having confidence in one web development framework, Ruby on Rails, I’ve recently set out to better understand some other established frameworks, particularly JavaScript frameworks. It was difficult to know where to focus my efforts¹, and I eventually decided to learn by doing. I ended up with ExpressChat, a simple real-time chat application built using Node.js, Express, AngularJS, and SockJS.

The Technologies

Node.js

From the documentation: “Node.js a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

Translated: Two key features:²

• “Event-driven”: in contrast to a ‘thread-based’ model, the web server accepts the request, spins it off to be handled, and then goes on to service the next web request. This is faster than the traditional thread-based model of web apps, which holds a connection open until it has performed the request and/or whatever other transaction was sent.
• “Non-blocking”: see “event-driven. Because the web server is always accepting requests instead of waiting for read or write operations, it is a non-blocking I/O (input/output). That’s faster.³

Express

From the documentation: “Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.”

Translated: Express is a Sinatra-inspired (a comparison to a Ruby framework helps make sense of it) web development framework for node.js. It makes building web apps with Node faster and easier.

AngularJS

From the documentation: “AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.”

Translated: Extend HTML’s syntax (Angular is a front end framework) with data binding (it easily and quickly connects the front end interface to the back end database and logic)⁴ and dependency injection (it makes it easy to pass dependency components to other components).

SockJS

From the documentation: “SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.”

[WebSockets: “WebSockets represent a standard for bi-directional realtime communication between servers and clients”⁵]

Translated: WebSockets mean servers/clients can communicate really quickly. As in, in real time. SockJS enables WebSockets or, if that fails, uses other protocols and abstractions to simulate WebSockets. It is one of many WebSocket implementations.⁶

ExpressChat

Inspired by others who have built simple proof-of-concept apps with the above technologies,⁷ I set out to do the same.

It’s easy enough to get started. Once you have Node downloaded, you can install a lot modules with the npm command. npm install -g express-generator, for example, installs the Express generator, after which express app-name will generate an Express app. A key file that will be generated is package.json. Mine looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "name": "Simple-Chat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.11.0",
    "sockjs": "*",
    "ejs": "*"
  }
}

Straightforward enough. It describes some attributes of the application, as well as its dependencies. I added SockJS as a dependency; EJS is embedded JavaScript, the templating language I used. After adding dependencies, npm install is all that’s needed to install those dependencies (basically Ruby’s Bundler for Node).

Beyond that, most of the code is in app.js. There’s a lot more going on to connect SockJS and the front end rendering with Angular (full code on Github), but getting a basic app up and running is very simple. In fact, the 9 lines of code below (which can be refactored to as little as 4 or less)⁸ are all you need for a Node app (this example does not use Express).

1
2
3
4
5
6
7
8
9
10
11
12
13

var http = require('http');

var server = http.createServer();

function handleRequest(req, res) {
  res.writeHead(200, { 'content-type': 'text/plain'});
  res.write('Hello World!');
  res.end();
}

server.on('request', handleRequest);

server.listen(8080);

This only scratches the surface of how Node works, and I hardly touched on how the other technologies showed up in my code, but it’s proof of how powerful Node and Angular can be. I’m looking forward to putting more time into these and other JavaScript frameworks.