web analytics

Tag Archives: express

Node/Express/Backbone/Jade/Heroku tutorial update

I’ve completely refactored my NodeJS/Backbone tutorial. The front end code is much cleaner and easier to understand and I’ve removed the server’s reliance on Backbone, which isn’t suitable for server-side use. I’ve buillt a shared client- and server-side validation module; created proper routing, including 302, 404 and 500 responses; rewritten the CSS so it looks pretty and updated the README file to match the dependency and installation instructions. I’ve also included updated package.json and proc files so it’s ready to run on Heroku. Just set up your app, clone the repo from github and push. Oh, and it generates its own documentation using docco. Wow.

It’s quite a lot of stuff for such a tiny application (which does no more than multiply two number together!) but I think it demonstrates many of the features required to build a basic Javascript web app. I’ll be running my department through the client side aspects of it later this month, so I’d really appreciate any feedback in the comments section, below. The source code is available on GitHub and there is also a Heroku demo.

Screenshot of Javascript MVC Lesson 1: Backbone

Javascript MVC Lesson 1: Backbone

Writing MVC Javascript – A Node JS tutorial

I’ve been using Backbone JS daily as part of my day job for about three months. I’ve learned a lot in that time and have found it to be very effective at what it does. Whilst I am now much more comfortable with the framework, I had some false starts and I found the documentation slightly intimidating for a noob! Whilst I appreciate that this is in part due to the philosophy behind the software, I would have loved a structured tutorial with an accompanying “Hello World” example.

The problem with “Hello World” is that being an application that outputs only one string, it’s not really suited to a demonstration of MVC techniques which require slightly more dynamic data sources. Instead, I decided to write a simple calculator web server that multiplies two operands supplied by the client and returns the result. It demonstrates the basic principles of MVC on the client using both JSON and traditional form submits. It also has a script to generate its own documentation web pages from the source code, which are served up as part of the tutorial application.

The frontend is written in Backbone, jQuery and HTML5 and is served by Node JS using Express, Backbone, Jade and Browserify. All the documentation is generated with docco and it comes ready for deployment to Heroku.

Fork the code on github
Check out a live demo on Heroku