WEBGL AND THREE.JS INTRO PART 2

This is a series of tutorials on WebGL using the three.js library – you may also be interested in Part 1 

In my previous post we discussed the history of WebGL and looked at a number of libraries to make working with WebGL as easy as possible.

We will be working with the three.js library so the first thing you will want to do is head over to http://threejs.org/ and download the latest version of three.js.

There is a little download link on the left hand side of the page you want to click on to which will give you a zip file containing the latest three.js library and a heap of examples.

Let me start by saying that Three.js is an awesome project, it has a team of very active developers, a big community and some great examples – there is a big but coming however..

Image

Three.js’s documentation sucks. Really sucks – in fact it sucks more than White house down which is the worst movie I have seen this year. I’d love to help the three.js guys fix up the documentation but just don’t have enough knowledge to assist in this area yet so will just whinge (and warn you) about it right now..

It is worth mentioning that three.js does have an enormous number of examples available which is arguably better than documentation anyway. However I found that its not that obvious how some of them work as there is little in the way of explanation of some of the maths involved. This coupled with bad documentation can make for a frustrating process of trial and error to work out how to use the various features. I found a collection of some more readable examples at http://stemkoski.github.io/Three.js that you may want to check out.

So before we get any further I want to save you a lot of time & effort & recommend a book to you – Chris Storm’s 3D programming for kids.

Don’t worry I wont tell anyone you downloaded a programming book aimed at kids (I do have my doubts how many 10 year old’s will cope with matrix projections but I digress..).

Don’t let the title put you off – this is by far the best introduction I have read of three.js and contains a number of very useful examples that will save you heaps of time working out how to do common tasks such as animating a group of objects, move a character around & collision detection. This book also has a very readable explanation of some of the maths involved in 3D programming – its also apparently used as a university text in an introduction to 3D programming course so don’t feel too bad..

In our first example we will draw a wire frame sphere on the screen.

Why? – well why not and we’re not going to be coding GTA V in our first example.

The end product will look like this:

Image

Start off by creating a new html page – note you don’t need jQuery but it will save some typing later on:

<!DOCTYPE html>
<html>
<head>
<title>Hello three.js</title>
</head>
<body>

<script src="three.js"></script>
<script src="jquery-2.0.2.js"></script>
<script src="helloExample.js"></script>

</body>

</html>

Now create a JavaScript file called helloExample.js and add the following code:

(function() {

"use strict";

var camera,
scene = new THREE.Scene(),
renderer = new THREE.WebGLRenderer(),
aspect = window.innerWidth / window.innerHeight,
container,
light,
sphere,
sphereMaterial;
camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);

camera.position.z = 300;
scene.add(camera);

light = new THREE.PointLight(0xFFFFFF, 1);
light.position.set(0, 0, 200);
scene.add(light);

sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
wireframeLinewidth: 2

});

sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 16, 16), sphereMaterial);
scene.add(sphere);

container = document.createElement('div');
container.id = "container";
document.body.appendChild(container);
container.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

})();

So what’s going on here?

Well before we run through the code let’s recap on how coordinates work. We will need a way of telling three.js where we want objects on the screen.

Three.js’s coordinate system looks like this:

coordinates

So there are 3 axis’s that allow you to position objects on the scene. Three.js also contains some scale methods to make working with different size objects easy that we will use later on.

I think this is fairly straight forward & familiar to most programmers but dont worry this will quickly become complex later on when we want to point the camera at a specific object for example :)

OK now we have this foundation stuff out the way let’s look at the code.

First up we create and initialize a number of objects we will make use of later:

var camera,
scene = new THREE.Scene(),
renderer = new THREE.WebGLRenderer(),
aspect = window.innerWidth / window.innerHeight,
container,
light,
sphere,
sphereMaterial;

We then create a new PerspectiveCamera (there is also another type of camera called OrphographicCamera which doesn’t render perspective but don’t worry about that for now) that tells three.js where we are looking at:

camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000);

The first parameter (75) refers to the vertical field of view of the camera (FOV), the second represents the aspect ratio of the screen and the 3rd and 4th parameter tell three.js we want to see objects between 1 and 1000 z position – this can be important for performance (why render stuff really far away?) and certain effects. Hmm wtf does all that mean? Well Jeff Atwood (coding horror) has a good diagram & explanation of FOV & aspect ratios that you should check out.

Next up we move our camera nearer to us (e.g. back) by changing the z position. We then add it to our scene:

camera.position.z = 300;
scene.add(camera);

It’s important with three.js to remember to add a light to a scene otherwise we won’t see anything so lets do that:

light = new THREE.PointLight(0xFFFFFF, 1);
light.position.set(0, 0, 200);
scene.add(light);

There are a number of other types of lights and you can also play with the colors to create some great effects.

Next up we create a material (kind of what we will paint our object with).

In this example we will indicate that we  want a wire frame version of the object as we are hipster like that:

sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
wireframeLinewidth: 2
});

Now up lets create our sphere by creating a mesh (think of meshes as a scaffold for the object based on a collection of x,y & z points – called Vertices in 3D speak) based on one of three.js’s primitives – SphereGeometry:

sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 16, 16), sphereMaterial);
scene.add(sphere);

The 100 specifies the size of the object and the 16’s how many parts or segments make up the sphere – more parts = smoother sphere but potentially more memory to store object & slower to render.

Finally we need a way of getting this onto the page itself so lets create a div & append our renderer we created earlier to it:

container = document.createElement('div');
container.id = "container";
document.body.appendChild(container);
container.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);

This will all get rendered in a canvas element that three.js will create for us inside the container div.

Finally we need to tell three.js we want to render our content:

renderer.render(scene, camera);

And we are done!

Although there is a fair bit of code most of its around setup and you will need something similar each time so you will quickly get used to it.

Next time we will look at animation!

Intro to RxJS

RxJS is the JavaScript version of a .net library that amongst other things makes it easy to handle, combine and filter events.

I gave a talk about RxJS last week – my slides and code examples are available here.

On a recent project a colleague (Hendry Luk) suggested we utilize RxJS to solve a tricky issue we were having. We were developing a web based calculator to be used by financial consultants. The calculator contained a number of fields the consultants could modify to then see the effect they would have on their clients income. The client wanted the output to be automatically updated when any changes were made. Our initial implementation felt a bit clunky as we bound to every key press, select box change etc. Thus when a user was typing into a textbox a request was made on each key press and the output rebound.

There is obviously a few ways to solve this but RxJS made it very easy. RxJS allowed us to throttle this process and ignore out of date values e.g. if a value was changed before a pending response had returned.

For me I think getting started with Rx is probably the hardest part as there are currently few very basic examples around and it can be a bit confusing whats actually going on.

Let’s create a simple hello world example to demonstrate some of the main concepts.

We will create a simple web page containing a single button that does the following:

  • When the button is clicked we will ignore the first 2 clicks
  • We will display an alert for clicks 3 and 4
  • After clicks 3 and 4 an alert box saying “done” will appear

Let’s get started, first create a new html page called helloRx.htm.

RxJS has many different libraries (see above section) that offer rich functionality such as extensions for working with jQuery, testing & combining events but for our example we just want the core library (rx.js) so let’s import this:

<script src="rx.js"></script>

Now we want something that will trigger an event (an observable in RX terminology) so add a button to the page:

<button id="button">Click me!</button>

Now we need to turn the buttons click event into something RX can work with so we will create a function that wraps the Rx.Observable.create method (note the rx.jquery.js library allows you to do this in one line with methods such as clickAsObservable):

function CreateObservable(element, eventType) {
return Rx.Observable.create(function(observer) {
function eventHandler (eventObj) {
observer.onNext(eventObj);
}
//keep simple for this example and ignore addEventListener/attachEvent browser differences
element.addEventListener(eventType, eventHandler);
return function() {
element.removeEventListener(eventType, eventHandler);
};
});>
};

Now we will use this function to create an observable from our buttons click event. We will also use the methods skip and take on our observable to skip the first 2 clicks and tell rx we are only interested in the next 2 clicks.

var observable= CreateObservable(document.getElementById('button'), 'click')
.skip(2)
.take(2)
.select(function(evt){
return "button was clicked"
});

Next we need to create an observer to monitor our observable:

var observer = Rx.Observer.create(
//onNext
function(evt) {
alert(evt);
},
<p>//onError
function(err) {
alert('error');
},
<p>//onComplete
function() {
alert('done');
}
);

Note how you can (optionally) pass 3 functions into Rx.Observer.create method. The first (onNext) handles an event occurring, the second errors and the third completion of an observable sequence.

Finally we need to link (or subscribe) the observer to our observable with a call to the observables subscribe method:

observable.subscribe(observer);

Now run this in the browser and congratulate yourself for getting started with RxJS!

Whilst this wouldn’t be too hard to accomplish with traditional methods you can start to get an idea of the power and readability offered by Rx.

Thoughts on developing resilient Ajax code (Part 2 – ASP.net MVC)

In my last post we looked at different methods to indicate a call to a service that would return JSON was unsuccessful.

The conclusion was that we really want to be setting the HTTP status code of the response to indicate a request was unsuccessful.

In this post we will look at some possibilities for wrapping this logic up in ASP.net MVC controller methods (and there are many).

We want a way of:

  • Setting the status code of the response
  • Including in the response our errors formatted as JSON
  • Something that’s easy to reuse and maintain

The most obvious (and least reusable) option is probably something like:

Response.StatusCode = (int) HttpStatusCode.InternalServerError;
return Json(new { data = "bad error" });

We could also use the HttpStatusCodeResult class however this only allows us to set the description of the error status code rather than the body of the response:

return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "bad error");

We could remedy this with something like this:

Response.Write("bad error");
return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "bad error");

But we also want to format our response as JSON and set the return content-type to application/json so would then have to do something like this:

var errors = new List<string>() {"Bad error", "Another bad error"};
var serializer = new JavaScriptSerializer();
Response.ContentType = "application/json";
Response.Write(serializer.Serialize(errors));
return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, "bad error");

Yuck!

This is getting a bit messy & we want something easy to use, maintain & test.

ASP.net MVC is very flexible and we have a number of different ways to do this but I reckon inheriting from JsonResult works pretty well for our purposes:

public class JsonErrorResult : JsonResult
{

private readonly HttpStatusCode _statusCode;

public JsonErrorResult(HttpStatusCode statusCode)
{

_statusCode = statusCode;

}

public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.StatusCode = (int)_statusCode;
base.ExecuteResult(context);
}

}

With this new type of ActionResult we get all the functionality of JsonResult and can also set the status code of the response easily:

var errors = new List<string>() {"Bad error", "Another bad error"};
return new JsonErrorResult(HttpStatusCode.InternalServerError) {Data = errors};

If we use browser tools we can see the Http status code was set correctly to 500, the content type is application/json and the response body contains our json encoded messages for later display:

1-12-2012 1-53-19 PM

Another option is to create a custom Action filter (this can be shortened by returning a JsonErrorResult as above):

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = false)]
public class HandleErrorAsJsonResponseAttribute : ActionFilterAttribute, IExceptionFilter
{

public void OnException(ExceptionContext filterContext)
{

if (filterContext.HttpContext.Request.IsAjaxRequest())
{

filterContext.HttpContext.Response.StatusCode = (int) HttpStatusCode.InternalServerError;
filterContext.ExceptionHandled = true;
filterContext.Result = new JsonResult
{
Data = new { errorMessage = filterContext.Exception.Message}
};

}

}
}

This is very easy to apply (and can be done so at method, controller and even application level):

[HandleErrorAsJsonResponse]
public ActionResult ThrowError()
{
throw new Exception("bad exception");
}

I think these serve my purposes pretty well but if anyone’s got better ways of doing this I would love to hear them :)

Next up what’s jQuery actually doing in $.ajax

Thoughts on developing resilient Ajax code (Part 1)

This sunny afternoon I was writing an ASP.net controller method to return JSON data from a calculation service.

As we all know things can always go wrong in code (and not necessarily just because I wrote it!) and this got me thinking about best practice when making and handling Ajax calls.

There are a number of issues we need to think about if we want to avoid the terrible situation of our users not being able to buy 1000’s of those new silver cat widgets we have been flogging because a vital Ajax shopping basket related request failed such as:

  • Errors encoding our request & its body before we have even sent it – maybe the users entered something dumb (did you let them? or are they a hacker and up to no good)
  • Timeout’s & a user’s session ending – e.g. the user felt the need for coffee and got caught up in a discussion about how would win in a chainsaw fight between the neighbours and home & away cast (dodgey Australian tv series)
  • Server side errors (you probably screwed something up)
  • Issues reading/decoding the response (see above)
  • Transient network conditions – those times things fail and no one’s really er sure why as it works if you try again

Mobile web applications in particular are very vulnerable to transient network conditions. I started (and forgot about) building a wrapper to retry requests which ill get round to looking at again sooner or later (https://github.com/alexmackey/retryajax).

Ok so what do we mean by resiliency?

Well to me in this context it means:

  • Having a service that works almost always
  • Something that can recovers from temporary errors such as timeouts without crashing the whole application
  • ..or failing the ability to recover provides sensible information about what might have gone wrong (and if there’s anything a user can do to remedy/help)
  • Handles a decent number of requests
  • Ideally it would also be really really nice if we had some info about what went wrong and if something went wrong so we could fix it

As you can see there are a decent number of issues here and some of these aren’t as straightforward to solve as they  may first appear so I am going to first look at how to return a valid/invalid response at a high level.

I guess there are three main (and combination of) ways to handle this:

  • Set a relevant HTTP status code on the response and potentially populate the body with some details of the error
  • Return a standard HTTP 200 everything’s peachy response and set a status code in the responses (true/false & success/fail seem in pretty common usage)
  • Don’t do anything

A lot of websites actually do the third option and assume that every AJAX call is going to work out fine and dandy (have a look in your browsers network tools & JavaScript console next time you are bored). I think we can all agree isn’t a good idea unless it’s a particularly trivial request.

Anyway since there were a variety of methods in use I wondered if people had a preference for how this was done so put this out to Twitter:

“If you were calling service to get JSON formatted data & error occurred would you prefer http error code to be set or 200 & error in json?”

Of course this being Twitter and the fact that it’s always dangerous to ask for peoples opinion I got a mix of useful and not so useful replies including:

The general consensus was that appropriate Http status code’s should be set before returning the response.

Why?

Well this approach has a number of advantages such as:

  • Http status code integrate nicely with various JavaScript libraries error handling routines like jQuery’s global .ajaxError and error methods
  • Its potentially easier for people to integrate with our service as its nice, descriptive & potentially RESTful in nature
  • Its easy to spot error status codes in Fiddler/browser tools/logs which helps if something goes wrong

And I would agree setting a status code is probably the best approach.

Can this lead to some ambiguity?

Let’s say we had a method that allows the retrieval of an individual entity by Id. We call it and get a  404 Not found – is my requested entity missing or do I have the wrong URI?

Or how about  we get a 401 (Unauthorized) were we unauthorized to call the Api or have we screwed up our security configuration?

Well I don’t think these are going to be too tricky to deal with as we can always include additional information in our response, status codes are a pretty accepted way of doing things and I think the benefits outweigh any confusion so let’s stick with using Http Status codes.

Now let’s look at how to set these codes in ASP.net & ASP.net MVC.

ASP.net MVC & ASP.net offer numerous ways (ASP.net Web API has more) to set the HttpStatusCode of a response (note there is a nice enum of the various codes called HttpStatusCode) including:

Response.StatusCode = 404;

throw new HttpException(404, “Um where’s it gone”);

return HttpNotFound();

return new HttpStatusCodeResult(404);

There are however a couple of potential pitfalls to watch out for when using with ASP.net & ASP.net MVC as certain error codes will trigger behaviour in IIS/ASP.net MVC framework which might not give you what you would expect:

  • Returning 404’s (not found) will kick in IIS’s 404 page without disabling this Response.TrySkipIisCustomErrors = true;
  • Http 401’s (unauthorized) depending on your authentication setup will send you off to the login page (aspnet.suppressformsredirect NuGet package apparently will prevent this)

Well none of these are too tricky to deal with so I am not overly concerned by these and they shouldn’t stop you from using HttpStatusCode to indicate the status of your request.

So in conclusion:

  • Use Http status codes they work well with libaries, help debugging and are an accepted way of doing things
  • Be consistent – a mix of approaches is really bad news

Next up – implementing this in ASP.net MVC..

What is TypeScript?

This week Microsoft released a preview of a language called TypeScript that adds additional features to good old JavaScript (a language I’m sure some of you don’t like that much). TypeScript auguments JavaScript with additional features such as strong typing, classes & interfaces and lambda syntax. These features are aimed at facilitating development and also make possible some interesting IDE features such as intelli-sense and compile time checks.

I was sceptical at first at the idea of TypeScript with my initial reaction being –do we really need such a language when we have the much more mature languages such as coffeescript etc for adding additional functionality?

I guess I am not entirely convinced by the concept of a language that sits on top of another to provide minor enhancements (ignoring the fact many languages could be considered to work this way) such as CoffeeScript for the following reasons:

  • Maintainability – other people have to maintain the code and in the example of CoffeeScript it’s hard enough to find decent JavaScript devs in the Microsoft space let alone one that knows CoffeeScript as well
  • CoffeeScript is another language to learn with quite different syntax and I am unconvinced the benefits are worth the investment from learning it – my understanding is CoffeeScript enables a nicer, terser syntax and prevents you falling into a few traps (learn JS properly I always thought) big woo!
  • Debugging is going to be a pain in the butt as a coffee script file looks pretty different from a JavaScript file

So does TypeScript suffer from some of these issues?

Well the first thing you notice about TypeScript is that its immediately recognizable as JavaScript which isn’t so surprising given that a valid JavaScript file is also a valid TypeScript file.

TypeScript files are compiled into plain old JavaScript so they can be run on anything that JavaScript can. There is also a Node.js package for TypeScript if you’re a hipster – like Aaron Powell who I dreamt a few nights ago was teaching me the electo synth but I digress..

To get the most of TypeScript you want to install the Visual Studio extension which gives you syntax checking, intellisense etc. This allows you to create TypeScript (.ts files) and when you build have TypeScript check for various issues. This will also install the typescript command line compiler tsc

ts_commandline

Note how TSC has some additional options including version of ECMA script to compile to and options to export modules etc.

TypeScript is open source so there is nothing stopping anyone else from developing add ons for other IDEs and apparently there is already basic text editor support for editors such as Sublime & EMACs. The TypeScript compiler source is also available which is interesting to see how this kind of thing works.

So let’s look at some of the features TypeScript gives you.

Typing

It’s probably little surprise that a language called TypeScript includes some stuff to do with Typing. Typing I guess is a little weird in JavaScript and something that can be a bit tricky to understand & predict in its more esoteric cases.

Types in TypeScript can be number, bool, string or any (anything else). Apparently there is also a void type for indicating a function doesn’t return a value but I don’t know much more at this stage.

TypeScript allows you to add information about types so that the compiler can use to spot mistakes and give you intellisense e.g.:

So how do you indicate a variables type? A simple example is shown below:

function doSomething(x: string, y: number) {

}

The type attributes allow the compiler to catch errors such as

doSomething(“hello”, “will fail as im a string”);

It will also catch errors where you don’t supply enough arguments to a function e.g.

doSomething(“blah”);

If you want to declare an argument as optional you can do so by appending a question mark to the variable name:

function doSomething(x: string, y?: number) {}

Interfaces

TypeScript adds interfaces which you can reference which can assist with compile time checks e.g the function below expects an object conforming to ICar:

interface ICar {

type: string;

drive: string;

}

function CreateCar(car : ICar) {}

We can use these interfaces to indicate the type of parameters we are expecting on our methods. This enables Visual Studio to give us more information about the class and also catch any invalid function calls.

Classes

JavaScript has always enabled you to emulate traditional OOP constructs such as classes although they can look a little esoteric and there are some traps to catch you out. TypeScript gives you a nice syntax for declaring a class and its constructor:

class Person {

public name: string;

constructor(name: string) {

this.name = name;

}

whatsMyName(): string {

return this.name;

}

}

var p1=new Person(‘alex’)

This compiles to:

var Person = (function () {

function Person(name) {

this.name = name;

}

Person.prototype.whatsMyName = function () {

return this.name;

};

return Person;

})();

var p1 = new Person(‘alex’);

Which is probably pretty similar to what you would have written in js anyway..

You can also mark properties as private which seems to hide them from intellisense but doesn’t actually seem to change the generated JS as far as I can see at present.

Static modifier

You can declare static methods like so:

class person {

static DoSomething(){

}

}

person.DoSomething();

Inheritence:

TypeScript has a great syntax for inheritance which was always a bit gnarly in pure JavaScript and contained a number of traps if you didn’t call functions in the way they were expecting:

class Person {

public _firstName: string;

constructor(public firstName: string) {

this._firstName = firstName;

}

}

class Employee extends Person {

public _company: string;

constructor(public firstName: string, public company:string) {

super(firstName);

this._company=company;

}

}

var alex=new Employee(“alex”, “kiandra”)

Generates:

var __extends = this.__extends || function (d, b) {

function __() { this.constructor = d; }

__.prototype = b.prototype;

d.prototype = new __();

}

var Person = (function () {

function Person(firstName) {

this.firstName = firstName;

this._firstName = firstName;

}

return Person;

})();

var Employee = (function (_super) {

__extends(Employee, _super);

function Employee(firstName, company) {

_super.call(this, firstName);

this.firstName = firstName;

this.company = company;

this._company = company;

}

return Employee;

})(Person);

var alex = new Employee(“alex”, “kiandra”);

Eek! you probably didn’t want to write that stuff yourself!

You can even downcast types and have them checked for type safety:

var alexAsPerson = <Person> alex;

Lambda syntax

As a C# dev I love the lambda syntax that TypeScript gives me (this syntax is also a proposal in ECMA6)

var calculator={

addTowNumbers: (x,y) => {return x+y}

}

This compiles to:

var calculator = {

addTowNumbers: function (x, y) {

return x + y;

}

};

Nice!

Modules

One of the harder aspects of JavaScript is keeping everything organized and reusable.  TypeScript gives you a nice syntax to declare modules and exports to keep your code organized:

module Utilities {

export class AddTwoNumbers {

private _x:number;

private _y:number;

constructor (x: number, y: number) {

this._x=x;

this._y=y;

}

add():number {

return this._x + this._y;

}

}

}

var calc = new Utilities.AddTwoNumbers(1,2);

calc.add();

So what next?  

Well there is a little documentation & tutorial on the main site at http://www.typescriptlang.org and a test page that allows you to enter TypeScript and see the JavaScript it compiles to. But for a more detailed look head over to Channel 9 at http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript, Anders discusses a number of features not on the mains site such as exporting functions and the interface files.

However to really get into TypeScript at the moment you are going to have to look at the source code as there isn’t too much doco around yet but im sure this will change :)

Conclusion

Things I like:

  • TypeScript was easy to pick-up and still felt like I was writing JavaScript
  • It still looks like JavaScript and would be easy to maintain
  • It offers additional intelli-sense and syntax checking
  • The generated script follows existing & proposed standards. Microsoft say they are keen to keep in line with these standards as they develop
  • The syntax for class generation is much nicer than writing it yourself
  • Everything is open source & you can even see how the compiler works – which is also written in TypeScript which hurts my head :)

Things I don’t like:

  • Not much actually

But…I guess I have never really been burned by JS’s typing system or lack of compile time checks so I do wonder how useful some of these features will be.

Having said that on one of my previous consultancy engagements the client complained of a dev making a syntax error and breaking all the JS on the site so maybe something like TypeScript could avoid these types of issues (or possibly a better code structure or deployment/testing process!). Having constructs such as interfaces & modules available I guess could be important in larger environments for large teams working together.

Anyway I suggest you give it a go – I liked what I saw so far & it will be interesting to see how this project develops.

Node.js er what’s it supposed to be used for?

<Disclaimer I am new to Node.js so this represents my current thoughts and additionally much of my development is on a Microsoft platform so I come from this perspective>

There is a lot of fuss in the web development community at the moment about Node.js and how it’s going to be the next big thing.

Node.js provides an environment to run JavaScript in and has been used successfully on a number of high traffic sites such as LinkedIn so I decided to investigate further. Now I really like JavaScript (although it has both the irritation and bonus that I discover something new about it every week) so I was keen to look into this technology and what I could potentially use it for.

The main arguments I have heard for using Node are:

  • It’s great for service type stuff as it’s more scalable because of its eventing model, no locks etc
  • A JavaScript runtime environment outside the web browser

Superior Scalability

One of the biggest claims you will hear from Node advocates is its superior scalability due to its use of call-backs (async) and no locking. The jury seems to be out on whether Node applications do actually scale better than other alternatives and there are countless blog posts arguing both ways. I don’t know enough about the low level detail to argue either way but let’s assume it’s pretty quick for certain scenarios (basically anything that’s IO bound is a potential candidate).

It’s important to also note that you can develop a similar scalable async model with .net although it certainly wasn’t as easy or intuitive as Node.js (especially without C#5’s Async features).

One thing I will say however in that my consultancy experience it is rarely the technology that is at fault when it comes to performance and let’s face it most of us don’t need our applications to be as scalable as something like LinkedIn or Facebook. More often than not performance issues are due to many calls being made to a database (usually multiple times) and the returning unnecessary data so I am not convinced as to this being a good enough reason to try out Node.

A way to run JavaScript outside the web browser

Node.js is pretty cool for playing around with JavaScript providing an environment for running your JavaScript applications and even a RPL interface. I came across an example of this last week when playing with the excellent CSSLint that used Node.js to tell me all the stuff I had screwed up when writing my CSS.

I was however left with the question of why I would actually want to write an application in JavaScript as there are so many existing (and easier?) ways of writing applications. If I want to knock off a quick prog to automate a tedious task or do something similar to CSSLint I am probably going to do it in C# with a mature set of well documented & maintained APIs and Visual Studio’s nice debugging environment. Of course JavaScript’s functional qualities make it very elegant for certain tasks and I can see there might be developers who only know JavaScript who now have another platform to develop on.

The issue however is that the very experienced JavaScript developers tend to have gained this experience from front end work so may not be the sort of people you want developing your services. But I guess its pretty cool that it opens up another option for JavaScript developers.

The second issue that bothered me was due to Node’s immaturity – would it have many libraries for tasks such as querying a database? Well I need not have worried as Node.js has a large community and a number of extensions (node packages) have been developed for performing common tasks so this shouldn’t be that much of an issue. I’m not sure I would trust a community developed interface to a product such as SQL Server to be as mature & up to date as Microsoft’s versions through.

Below are the main advantages I can see Node.js offers

Advantages:

  • Potentially more scalable for certain tasks
  • Developing certain types of services could be more intuitive
  • Node.js servuces are light weight and easy to modify
  • Anything has to be better than WCF (sorry Himanshu but WCF was written by the devil)
  • JavaScript is becoming a universal language & you can potentially run your code on multiple platforms
  • IISNode makes Node.js very easy to setup on Microsoft platform and benefit from IIS features such as logging, connections etc
  • Large number of packages/extensions available
  • Node.js apps can be hosted very cheaply compared to an MS based app e.g. Heroku
  • For the MS devs Node.js can be hosted on Azure (although its apparently a bit of a pain)
  • Could help progress JavaScripts development and standards e.g. common.js

Disadvantages:

  • How many apps actually need Nodes much touted scalability?
  • When used for Service development the devs that are experienced in writing service type code probably aren’t also those experienced in JavaScript (not always of course!)
  • How can a wrapper for something like SQL server be more efficient and feature rich than Microsofts implementations so any perf gains may be negated by usage of poor performing extensions
  • Packages may not be maintained aren’t as mature as traditional vendor options
  • Poor debugging experience (I understand there is a debugger browser extension available)
  • Immature technology – potential bugs and lack of devs skilled in this area
  • Can same “perf/scalability gains” be experienced with existing async functionality?

I’d love to have a really good solid reason to use Node.js but having spoken to a number of colleagues no one is yet to give me one.

Sure its cool but I am left with the question what are you actually going to use it for? Er..

I remain open minded and I’d love for someone to give me a good answer to this question :)

Setting up Node on Windows

There is a lot of fuss at the moment in the web development community about a framework called Node.js that allows you to run JavaScript server side. A number of claims about fantastic scalability and lack of locking have been made regarding Node – whether these are actually true and if the advantages outweigh the disadvantages is another question..

Let’s assume however you are a Windows user who wants to see what all the fuss is about and get up and running with Node.js..

Previously getting Node.js running on Windows was a little painful and involved some manual compilation, patching of libaries and an application called Cygwin that emulated a *nix environment.

But no more! getting Node.js running on Windows is now very easy and it can be hosted within IIS by installing IISNode. This is actually pretty important as allows you to take advantage of a number of IIS features thus answering the question of how Node should be managed/hosted on a Windows machine. It’s worth noting as well that Node.js is even supported on Windows Azure.

Below are instructions on how to install Node.js on Windows:

First you are going to need a Windows OS that is at least as new as Vista with the IIS URL Rewriter module installed (add/remove programs).

If this is all good then go download & install Node.js from http://nodejs.org/. At the time of writing the most recent version is held at: http://nodejs.org/dist/v0.6.10/node-v0.6.10.ms.

Next you want to get hold of IIS Node by going to https://github.com/tjanczuk/iisnode.

IIS node has its own installer at (src/setup/iisnode-msi/) run the installer. Once you have run the IIS node installer if you look under the Modules section in IIS you will see a new module has been created:

New Node module in IIS

The next step is to create a directory for your node application (note you can also incorporate a node endpoint into an existing application by adding an entry to web.config but let’s keep it simple).

Create a site or application to map through to this directory in IIS (to create an application right click on default website and select Add Application). I am calling my virtual directory AlexNode.

Now create 2 files within your directory:

  • test.js
  • web.config

Open test.js up in a text editor and enter the following hello world node code (this is from the IISNode example):

var http = require(‘http’);

http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type': ‘text/html’});
res.end(‘Hello, world! [helloworld sample; iisnode version is '
+ process.env.IISNODE_VERSION + ', node version is ' + process.version + ']‘);
}).listen(process.env.PORT);

In web.config enter the following to tell ASP.net to use the Node module we have just installed:

<configuration>
<system.webServer>

<handlers>
<add name=”iisnode” path=”test.js” verb=”*” modules=”iisnode” />
</handlers>

</system.webServer>
</configuration>

That’s it you should now be able to view the node server running on your site by going to an address similar to the following:

http://localhost/alexNode/test.js

My site displays the following text:

Hello, world! [helloworld sample; iisnode version is 0.1.14, node version is v0.6.9]

That’s the set-up basics – there are heaps of extension libraries for Node that you should check out at http://search.npmjs.org/ and IISNode contains several samples that can be installed by going to: %programfiles%\iisnode\setupsamples.bat

Next why would you actually want to do this? :)