Tuesday 4 October 2011

Conway's Game of Life in JavaScript with Cloud9

As a small project to learn about a few new technologies I was interested in I built Conway's Game of Life using JavaScript and HTML5's canvas element.

Server Side
The server side is written in node.js, using the express framework with jade as the templating engine.

Client Side
The client side uses jQuery and the jQuery UI.

The most interesting aspect of the development for me was the use of the Cloud9 IDE, a browser based development environment. Cloud9 provides an editor, file browser, debugging tools, and easy access to Github projects. In addition, as I was useing node.js I could even run and test the application all from the browser without requiring any local environment setup. Cloud9 provides a shell with which you can install node.js dependencies (using 'npm' the node.js package manager) and perform git commands.

The Cloud9 shell, showing the auto-complete coolness.

The editor is much better than you'd expect from a browser based IDE and does provide many useful features such as syntax error-checking as you type. I ran into a few bugs with the IDE as I was using it but on the whole it was surprisingly good.

An example of the real-time code analysis, picking up coding errors as you type.

The very best thing about the whole setup was that I could switch to my laptop, open a browser, and continue working on it without the need for ANY local changes.

Cloud9 also provides an easy deployment mechanism if you use online hosting services Heroku or Joyent.

Cloud9 deployment setup

I signed up for Heroku and tested the deployment. So you can now see the app at http://blooming-mist-4344.herokuapp.com/.

Game of Life in action on Heroku

All in all, I would definitely recommend Cloud9 for node.js development. I'm hoping to add a few more features at some point to the app, such as saving and reloading Game of Life boards. The code is on my GitHub page for anyone interested - https://github.com/ewen/game_of_life.

No comments:

Post a Comment