Home ›

Rich Internet Apps That Just Work—Writing for the User

Issue 204

From Issue #204
April 2011

Jun 30, 2011  By Avi Deitcher
 in
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.
Technology-User Harmony

What we needed, then, was a way to use AJAX apps and modify the URL bar in a way that it would not reload the page, yet still give fairly complete indication of where we were. Thus, Back and Forward, not to mention Refresh, would work just fine.

The magic is in one little character, the hash (#). In the HTML specification RFC 1866, you can give a name to an anchor, as follows: 


<a name="myname"/>

If you do so, a browser should be able to go to the named section on the page by appending # and the anchor name to the URL. For example, if you have an HTML page named mypage.html: 


<html>
<head>
<!-- lots of stuff -->
</head>
<body>
<div>Lots of content</div>
<a name="part2"/>
<div>Even more content</div>
</body>
</html>

To get to the above page, you would go to http://example.com/mypage.html. But, if you wanted to go to that page and directly to part2, you would go to http://example.com/mypage.html#part2.

The most interesting part is that if the browser is already on mypage.html and you go to mypage.html#part2, the browser should, and will, go directly to part2 without reloading the Web page. Even further, if the browser cannot find an anchor named part2, it will fail silently and graciously. Last, but not least, JavaScript events can capture this change and process it.

With the above, we have the making of a system that uses AJAX for Rich Internet Application dynamism, yet can change the URL to indicate where we are, and thus work with, rather than against, the user. As a matter of fact, if you use Gmail and look closely, you will see that this is exactly how it works.

Of course, remembering to manage the URLs can be difficult and changes the way you work. Wouldn't someone have developed a framework to manage all of this?

Enter Sammy

Sammy is an amazing Web framework developed by Aaron Quint. Not only does it provide the framework for managing the URLs, as well as lots of additional functionality to boot, but it also actually dramatically improves how it writes your client-side apps. You move from programmatically driven to declarative. You return to the ease of use of the early Web 1.0 days, when the URL defined exactly where you were, but without giving up the dynamism of AJAX. Once again, the URL becomes the declarer of location in your app, and you can leverage its full power.

Getting Started

Let's explore a basic Sammy app. For our purposes, let's use a contact application. To keep things simple, let's not do any data updating in this article, although Sammy's semantics fully support it. Let's stick with simple GETs. In the contact application, we have ten contacts, each with the ID of 1 through 10 (complicated!), and each with properties of First Name, Last Name and Email. Our application view has a left pane, wherein contacts are listed, and a right pane, wherein contact details are shown. Remember, we want this to be a Rich Internet Application, all running in a single page.

Word of warning: the code in this article may be incomplete. If you want to download and run it, get the sample app off the Web (see Resources).

First, let's define our single HTML page contacts.html: 

<html>
<head>
<script type="text/javascript" charset="utf-8" 
 ↪src="jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" 
 ↪src="sammy.min.js"></script>
<script type="text/javascript" charset="utf-8" 
 ↪src="contactapp.js"></script>
<style type="text/css">
  #list {float: left; width: 48%;}
  #details {float: left; width: 48%;}
</style>
</head>
<body>
<h2>Contact Application</h2>
<p>Click on a contact to view the details</p>
<div id="list">
  <table></table>
</div>
<div id="details">
<table>
  <tr><td>First Name:</td><td id="firstName"></td></tr>
  <tr><td>Last Name:</td><td id="lastName"></td></tr>
  <tr><td>Email:</td><td id="email"></td></tr>
</table>
</div>
</body>
</html>

Notice several elements:

  • Installation: we included jQuery, a prerequisite for Sammy (and a really great library to boot).

  • Installation: we included Sammy, after jQuery.

  • HTML: the page is really simple. There are two blank divs, one with the ID list, the other with the ID details. They are floated.

______________________

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
Submitted by MrKunst on Tue, 08/30/2011 - 09:53.

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

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

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
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