Rich Internet Apps That Just Work—Writing for the User

Next, we need to declare what all the states are in which the application can exist. These will determine what paths we want. In our contacts app, we really have only two states: 1) listing the contacts and 2) viewing one particular contact (while the main list remains open).

In keeping with RESTful style, let's declare our URLs as follows:

1) Listing the contacts: contacts.html#/contacts.

2) Viewing one particular contact: contacts.html#/contacts/:id (where :id is replaced by the ID of the viewed contact).

In addition, we want a default path. What happens if the user just opens contacts.html?

3) Default path: contacts.html, re-routed to contacts.html#/contacts.

Notice something interesting. We are defining various declarative paths. When each of these paths is encountered, we want to take a certain action. Essentially, these are routes. Most Ruby-based frameworks (Sinatra, Rails, Merb/Rails3 and so on) use this exact language, as does Sammy.

So, we have three routes and their actions:

In our included JavaScript file contactapp.js, we declare each of the routes:

var app = $.sammy(function(){
  // for the verb GET with the path #/, go to #/contacts
  this.get("#/",function(context){
    this.redirect("#/contacts");
  });

  // for the verb GET with the path #/contacts, render the contacts
  this.get("#/contacts",function(context){
    // get our contact list from the server
    $.get("/contacts",function(res,status) {
      // render the results - should include 
      // status-checking for safety

      // jQuery already parsed the response to JSON for us
      var list = res, tr, td, table = $("#list table"), a;
      
      // clear the existing list
      table.empty();

      // use jQuery to go through each result
      $.each(list,function(i,elm) {
        tr = $("<tr></tr>").appendTo(table);
        td = $("<td></td>").appendTo(tr);
        // the key part: make it a URL
        a = $("<a></a>").attr("href","#/contacts/"+elm.id).text
        ↪(elm.lastName + " " + elm.firstName).appendTo(td);
      });
    },"json");

    // hide the details
    $("#details table").hide();
  });

  // for the verb GET with a specific path #/contacts/:id, 
  // render that one contact
  this.get("#/contacts/:id",function(context){
    // get our contact list from the server - access 
    // param :id as this.params.id
    $.get("/contacts/"+this.params.id,function(res,status) {
      // render the results - should include 
      // status-checking for safety
      // jQuery already parsed the response to JSON for us
      var contact = res, table = $("#details table");

      // find the elements in the table, and fill them with the data
      $("#firstName",table).text(contact.firstName);
      $("#lastName",table).text(contact.lastName);
      $("#email",table).text(contact.email);

      // make sure the table is shown
      table.show();
    },"json");
  });

});

// set up a default route for contacts.html
$(function(){
  app.run("#/");
});

Notice several key elements:

The full sample, without minified JS, is available on-line (see Resources).

Sammy gives us the power to provide Rich Internet Applications simultaneously, work with the user's mindset rather than against it, and program our apps using routes declaratively, making it much simpler to build yet richer Internet applications.

The Sammy library is open source under the MIT license and available on-line (see Resources).