All off the source code and slides can be found on Github.com
https://github.com/jamesor/backbone-demo

Was your first reaction to Node.js anything like this one?

Fork this project on Github

A newer version using Socket.io and Redis for multi-user editing and record locking can be forked here on Github.

Technologies Used In This Demo

• Underscore.js – A utility-belt library for JavaScript without extending any of the built-in JavaScript objects.
• Backbone.js – Gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• jQuery – A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.
• Node.js – Event-driven I/O server-side JavaScript environment based on V8.
• Express – High performance, high class web development for node.js.
• Jade – High performance template engine heavily influenced by Haml and implemented with JavaScript for node.js.
• Stylus – Expressive, dynamic, robust CSS for node.js
• Mongoose – A MongoDB object modeling tool designed to work in an asynchronous environment.
• MongoDB – A scalable, high-performance, open source NoSQL database.

Running the Demo

1. Install node.js.
2. Install MongoDB.
3. Start the MongoDB server from a terminal window:

   $ mongod

4. Change the working directory to the project root:

   $ cd <path to todosmvc>/labs/architecture-examples/backbone_node_mongo/

5. Install dependencies using the node package manger (npm).

   $ sudo npm link

6. Start the Todos demo server from a different terminal window:

   $ node app

7. Visit http://localhost:3000 in a web browser.

Interesting Parts

Here are a few interesting parts of the project that I wanted to highlight.

Create the Model Schema

Working with Mongoose is awesome. Simply define a schema that Mongoose will use to proxy the database. I know MongoDB is a schemaless document store but the schema is for Mongoose to use.

var mongoose = require('mongoose'),

  TodoSchema = new mongoose.Schema({
    title: { 'type': String, 'default': 'empty todo...' },
    order: { 'type': Number },
    done: { 'type': Boolean, 'default': false }
  });

module.exports = mongoose.model('Todo', TodoSchema);

Setting Up the Routers

In order for Express to handle requests from the Backbone application routers must be set up to route RESTful URIs to handlers. Backbone has a default URI schema so the Express router is created to match it. The schema is as follow:

POST /todo //CREATE
GET /todo/:id //READ
PUT /todo/:id //UPDATE
DELETE /todo/:id //DELETE

For example the READ handler looks like this in my utils/crudUtils.js file.

(function (exports) {

  "use strict";

  // List, Create, Update and Delete omitted for brevity
  // See full source on Github.

  //------------------------------
  // Read
  //
  // Generate and return a handler with an injected model
  function getReadController(model) {
    // Returning a closure so that the model can be stored
    // in this function's environment
    return function (req, res) {
      // Look in MongoDB for the record
      model.findById(req.params.id, function (err, result) {
        if (err) {
          res.send(409, err);
        } else {
          res.send(result);
        }
      });
    };
  }

  // Export function so it's accessible outside of this module
  exports.initRoutesForModel = function (options) {
    var app = options.app
      , model = options.model
      , path
      , pathWithId;

    // We can only set up routers if we have a reference to the
    // Express app we want to create them on and the model
    // we want to create them for
    if (!app || !model) {
      return;
    }

    // Generate the RESTful URIs we expect to see from Backbone
    path = options.path || '/' + model.modelName.toLowerCase();
    pathWithId = path + '/:id';

    app.get(path, getListController(model));         // List all Todos
    app.post(path, getCreateController(model));      // CREATE
    app.get(pathWithId, getReadController(model));   // READ
    app.put(pathWithId, getUpdateController(model)); // UPDATE
    app.del(pathWithId, getDeleteController(model)); // DELETE
  };

}(exports));

Credit

• Jérôme Gravel-Niquet – Created original demo
• Addy Osmani – Cleanup, edits
• James O’Reilly – Added server-side tech from node.js to MongoDB

Baseline example

Here is a simple example which declares the variable answer and assigns it the value 42. Then, the example alerts a dynamic statement made from the String "The answer is " and the current value of answer. Go ahead and run this example now to see the alert.

<script type="text/javascript">
var answer = 42;
function ex0() {
  alert("The answer is " + answer);
}
</script>

Run Example

Now let’s try and mutate the value of answer. We’ll use the Firebug plugin for Firefox here, but this will also work using similar tools for Safari, Chrome and Internet Explorer.

Open Firebug now and click on the “DOM” tab as highlighted in the image below. Next, scroll though the list looking for the variable answer. Finally, scan over to the second column and edit the value by double-clicking it and changing it to something else. After you’ve completed those steps try running this example again to see the alert message display a different statement than before.

Immediately Run Function Example

In this example, we wrap our code in an immediately ran function. This is simply a normal anonymous (unnamed) function followed immediately by a set of parentheses to call the function immediately after defining it. In this example, the function hasn’t been given a name so it will later be inaccessible by code(¹) because there are no stored references to it’s location in memory.

<script type="text/javascript">
(function (ctx) {
  var answer = 42;
  function ex1() {
    alert("The answer is " + answer);
  }
  ctx.ex1 = ex1;
}(window));
</script>

Run Example

Inside the IRF we can see our previous example of declaring the variable answer and the function ex1(). In order to make the function ex1() accessible outside of the IRF, a context is passed into the IRF to inject data into that we want to expose. In this case, we want to expose the ex1() function so it’s injected into the context (cxt). The context, in this case the window object, is passed into the IRL as an argument. That argument becomes the parameter cxt inside the function. Therefore, ex1() is being injected into the global object window.

Try looking for the variable answer using Firebug. You won’t be able to see it because it’s hidden away inside the IRF. You will be able to see the function ex1() because it was intentionally injected into the global object window.

Syntax

Just for reference, here is the syntax of a JavaScript function.

<script type="text/javascript">
(function name(FormalParameterList) {
  // function body
}(FormalArgumentList));
</script>

* Italic parts are optional

Footnotes

1. Inaccessible by code, does not mean it’s safe from hackers. A simple breakpoint placed inside a function will give a user using development tools like Firebug access to the scope in which the data lives. Inaccessible by code means you need not worry about another JavaScript instruction changing the value because it’s unreachable. This reduces the likelihood of hard to find bugs and a crowed global space.

The game makes use of HTML5′s Web Workers to enable fast two-way communication between the browser and the server which is essential for a massively multiplayer game. This is achieved with HTML5 in the browser and Node.js server using the websocket-server module. HTML5′s localStorage is used to store your character’s progress. The various graphics layers (background, characters, gui) are rendered to individual HTML5 canvases from a 2D engine.

Links:

• Begin Your Quest
• Grab the Source on Github
• Learn More About the Technology

Created by: MBAOnline.com