Rich Internet Apps That Just Work—Writing for the User

AJAX is power. It makes Internet applications look, feel and perform in the eyes of the user like desktop apps, all while run from the server and written in the platform-agnostic languages of HTML and JavaScript. But, it carries a heavy price: breaking the browser.
Declaring Our Paths

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:

  • contacts.html→redirect to contacts.html#/contacts.

  • contacts.html#/contacts→list contacts.

  • contacts.html#/contacts/:id→show details for contact :id.

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:

  1. There are no event handlers here at all. Although we might need some for things like edit buttons or key presses, navigation in the app really happens using URL <a> links. This makes it really easy to manage the app and understand what every change does. Clicking on a contact in the list is clicking on a URL. We just happen to use that URL to control our app.

  2. We could have used a handler just as well. Instead of using an <a> link, we could have put on a handler with $("list td").click(function(e),{...});.

  3. This application is incredibly short and easy to understand. That is the beauty of Sammy.

  4. The browser URL changes, but the page does not reload. We remain in the Rich Internet App world, yet browser semantics simply work: Back, Forward, Reload. Try it!

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

Summary

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).

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Helpful in current software development

MrKunst's picture

thanks for the article, we could just it in a current development project.

http://uws-software-service.com/home.html

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState