Javascript, javascript, javascript!! Node, Express, Backbone, Underscore & jQuery integration sample

A couple of days ago I’ve been reading and learning about MVC frameworks in Javascript. I’ve started playing with Ember.js first (as it was one of the newest MVC frameworks that I wanted to learn for further comparison with other Javascript-MVC implementations). So I implemented a sample and wrote a post with the features that I liked most. Ember.js has a lot of very good features like the bindings and how the MVC architecture is implemented, but I didn’t like to much how intrusive it is with the HTML markup (using its handlebars). After researching a little more on the web, it came up Backbone.js as one of the most used MVC frameworks; so I’ve continued with it and wrote another post creating the same sample that I did with Ember.js. Backbone.js has a interesting model synchronization (very flexible and overrideable). So I took advantage of this overrideable sync feature by implementing a local repository to store model updates (there is also a particular framework called Backbone.localStorage to achieve that without the need to implement your own repository functions).

Finally, I’ve decided to take advantage of the default Backbone.sync (that hits RESTful endpoints using JSON) with a Node.js server implementation to have a full working sample just coded exclusively in Javascript. To make my life easier I used Express.js to create the REST endpoints in Node.js as it very simple to do it with it. The client implementation is based on Backbone.js as I mentioned.

Server implementation

As you can see in the node_server.js file the server implementation is pretty simple. There are endpoints at /people to retrieve, create and update persons information in a server variable called peopleServer (it is the repository mock at the server side, real life implementation would be using a database or something similar). As you can see Express.js simplifies the work of defining the endpoints. You start by creating a ‘server’:

Creating an Express.js server

And then declaring the valid endpoints:

Declaring valid endpoints

As you can see each one of these functions are logging request made to them to the console (so you can see client’s requests on the standard output):

Node server running and logging requests to the standard output

And you may noticed a particular generic endpoint (*) that sets the response with particular headers and then call the next() function to match the endpoint that the client really wanted to call:

Generic endpoint that sets headers on the response

And if you pay attention to what it does you can see that basically it sets the headers for allowing cross domain calls as the index.html sample file will be calling the server hosted at localhost:3000:

Server accepts requests at port 3000

Client implementation

The client implementation is located in the client.js file and the code is mainly using the Backbone.js framework (for further details about how the sample is implemented you can see this post as its very similar). But the code is someway reorganized in this sample as I decided to take advantage of Underscore.js templates and make strictly use of the MVC pattern the framework provides. The page-js interaction happens mainly through the controller instantiated at MyApp.peopleController and its activeView:

Instancing the PeopleController router

And one interesting thing that you can see in the sample is how to set defaults for the hxr calls Backbone.js does in the background. In this case we’re disabling the cache for all calls and allowing cross-domain requests:

Setting default for all $.ajax() calls

Summary

With this simple sample you can see how easily is to write an application that gets/sets data to a server, all written in JavaScript by just integrating Node.js, Express.js, Backbone.js, Underscore.js and jQuery.js frameworks and their sets of features. It’s pretty amazing how you can set up a client/server application by just using the default model synchronization provided by Backbone.js and create a RESTful server using Express.js running on Node.js!!

Tags: Backbone.js, Express.js, Javascript, jQuery, MVC, NodeJs, Underscore.js