Developing Ajax Applications That Preserve Standard Browser Functionality
Pages: 1, 2, 3

Case Study: Ajax Forum with Back Button and Deep Linking

The Backbase Ajax engine is a mature and feature-rich Ajax software package. Solid support for all traditional Web usability features is one of the strengths of Backbase. The Backbase DevNet contains information about Backbase and Ajax for developers. A developer forum is part of the DevNet.

The Backbase Web presence including the DevNet and its discussion forum has been built using Backbase. To demonstrate the rich and reach features of this forum, I will take you step by step through a typical use case of the forum:

  1. A developer browses the forum reading threads from different topics.
  2. The developer copies the URI of the thread, pastes it into an e-mail, and sends it to a friend. The friend copies the URI from the e-mail into a browser and opens the same forum thread.
  3. The developer clicks the back button to read a previous thread.

The state of the forum interface after several user interactions

I'm going to take a look at the state of the forum interface as well as the corresponding URI in the address bar after the developer has navigated to the "BXML" forum and then selected the post entitled "Issue with vertical and horizontal menus."

The forum and post are selected and highlighted visually. The discussion thread is displayed for reading. The URI contains all corresponding information in the fragment identifier. After the hash, we see the complete state recorded for bookmarking and deep linking: "forum" indicates that the developer is browsing the forum section of the Web site; "forum=2" indicates that the BXML forum is selected, and "thread=211" records the currently selected thread. Finally, information in brackets, "[5]", indicates the handling of multiple back and forward steps in combination with bookmarks.

Figure 3
Figure 3. Initial state of the forum with Ajax URI (click the image for a full-size screen shot)

If you go to the Backbase forum, you can see how the URI is updated with every state change, even the ones that are handled client side or involve a partial page update through the XMLHttpRequest object.

The state of the forum interface recreated in another browser window

Let's now look at what happens when the developer sends the current URI to a friend. The friend opens the URI in a browser window and expects to see the same interface state. The state needs to be recreated in a new browser from scratch. For my case study, I simulate this scenario by copying the URI from a Firefox window into a newly opened IE window.

Entering the URI in the address bar of the browser will initially result in a server-side request. Using the part before the hash, Backbase.com is loaded, and during that process, the Backbase Ajax engine is initialized. The activated Backbase engine will then read the part of the URI behind the hash. From that information, the Backbase engine creates the corresponding state by going to the section "forum" and selecting forum BXML (id=2) and thread 211. This is done without a page refresh by loading additional content from the server and updating the interface partially client-side.

For continued handling of browser functionality, a new URI has been pushed onto the browser history. The new URI is visible in the address bar and can be used for deep linking. The "[0]" indicates that there is no previous state to go back to using the back button.

Figure 4
Figure 4. Forum state recreated in a new browser window (click the image for a full-size screen shot)

The state of the forum interface after the user has clicked the back button

The first step of the case study showed how the URI was updated in line with state changes of the interface triggered by user interaction. You'll now see the opposite: A new URI is requested and the corresponding state is recreated.

By clicking the back button, users navigate to the post they were reading previously. The browser handles the back button by retrieving the previous URI from its history stack. The Backbase Ajax engine detects the change, reads the new URI from the history and recreates the corresponding state by going to section "forum" and selecting forum "BXML" (id=2) and thread 192. The new URI according to the same syntax as above is visible in the address bar.

This concludes the case study.

Figure 4
Figure 5. Forum state after clicking the back button (click the image for a full-size screen shot)

Ajax Applications Do Require a Back Button!

For the past several years, Web developers have opted to build Web interfaces because the market demanded "reach" and was willing to accept less "rich." However, the current interest in Ajax clearly shows that this willingness was only temporary in nature. The market now emphatically demands Web interfaces with the richness, interactivity, and responsiveness of desktop applications.

At the same time, end users have become accustomed to the interaction style of the Web. It enhances productivity with its common pattern for how to interact with any Web interface. End users expect working back/forward buttons, the ability to create bookmarks, deep linking, a working refresh button, the possibility of viewing the source, searching the page using "find," and search engines that can index Ajax applications.

The Ajax community today must accept the following: The technology is available for providing support for the back/forward button and other traditional browser features in Ajax applications, as this article shows. Although they are not easy to implement and come at an additional cost, success within the community will require traditional browser features built into Ajax applications. I therefore urge Ajax developers to build Ajax applications that support these features!

Conclusion

In this article, I highlighted why Ajax applications need to comply with the traditional interaction style of the Web and provide the traditional Web usability features. I established that these features can be programmed into Ajax applications by creating "Ajax URIs" that contain client-side state information in the fragment identifier.

Looking at the code involved, you saw that a complete and generic solution is quite difficult to achieve, given state handling code in general is not trivial and because of the usual cross-browser inconsistencies. The Backbase Ajax engine provides the solution by providing the required functionality out of the box.

References

Mark Schiefelbein has been the director of product management at Backbase since January 2005. Mark drives the global product rollout of the Backbase Rich Internet Application technology.