This article looks at some of the best of the new breed of Web applications to show what you can learn from them -- the proud tradition of imitating the best. I'm sure the sites won't mind, after all imitation is the most sincere form of flattery.

I won't focus primarily at the technical level, however. Because the technical aspects of these sites -- how data is passed around with Ajax, while important, isn't always what makes a site successful. It's important to consider how the site uses the Ajax features of the browser along with Dynamic HTML (DHTML) to create a compelling user experience. And it's important to consider how the sites allow interaction with their customer community. All these factors, which I delve into, are just as important as technology in making a site successful.

Google Maps

If there were an Oscar or Golden Globe award for "Most Influential Web 2.0 Application," it would have to go to Google Maps. I remember vividly the reactions of some of my coworkers the first time they saw it: A browser can do that? In my mind, Google Maps kick-started the Web 2.0 movement by redefining what customers expected from applications in the browser.

I doubt whether anyone reading this article hasn't used Google Maps, but I'll show the site in Figure 1, anyway.

Panning around the map is as easy as clicking and dragging the map around, just as you would a paper map. When you get directions, they appear as lines on the map without the display blinking or the map moving (unless it needs to). In fact, most of Google Maps' functionality is implemented without ever going back to get a new HTML page from the server.

After Google Maps, the words Ajax and Dynamic HTML were permanently burned into the language of the second Web revolution. But the crazy thing is, Google Maps doesn't run on Ajax, strictly speaking (if you define Ajax as sending and receiving requests using the XMLHTTP object). Google Maps uses dynamically generated <script> tags to transfer data to and from the server. It's a technique that predates the XMLHTTP object.

But why doesn't Google Maps use Ajax? I can't speak for the Google engineers on this, but my hunch is that Google Maps was designed from the get-go to be JavaScript "mashup-able."

Mashups

Back in the beginning of the article, I talked about supporting the customer community. And while I admit that is corporate speak, I think it's important. Mashups are the ultimate in supporting the customer community. A mashup is where I take functionality from one site and merge it with functionality from another site to create something much more interesting. A good example of a mashup is a site that takes rental listings from Craigslist and maps them using Google Maps.

Another example of a Google Map mashup is MapMyRun.com, which uses Google Maps to provide a way for runners (or anyone else) to figure out distances of courses on a map. This functionality is shown in Figure 2.

Here, I input the starting location in the input field in the left pane. I then used the mouse to indicate the way points of my run. As I click, the left pane is dynamically updated to show the distance. I can zoom in to get more detail or switch to satellite mode if my trek takes me off-road.

All the heavy map work is done by Google Maps. The MapMyRun site simply layers some JavaScript code on top of the map to handle the mouse clicks and compute the distances.

So, what have I learned from Google Maps when it comes to building successful Web 2.0 applications?

• Use the browser: Google Maps makes tremendous use of the dynamic nature of today's modern browsers. Use these browser features to make a compelling experience for users in which they come away surprised about how much a browser can do.
• Ajax purity is not important: Few realize that Google Maps is not purely an Ajax application. But of those people, does anyone really care? Google Maps provides great functionality to users. It doesn't matter that the XMLHttp isn't used. Don't get too preoccupied with particular technical approaches.
• JavaScript mashups: Providing the ability to embed functionality from one site into another through the use of JavaScript coding is extremely compelling. It can give you the viral edge that turns you into the primary source for a particular type of functionality.

Back to top

TaDaList

Let's face it: Google Maps sets a pretty high bar for great Web 2.0 applications. But you can add tremendous value to applications quickly with Ajax. An example of such value is TaDaList. TaDaList is a very simple (and free) to-do list manager. To demonstrate the site, I've created an account and a swimming list to remind me of things that I have to do to continue my swimming workouts. The list is shown in Figure 3.

I want to add that I need to buy goggles, so I put that into the text field and click Add to list. The item is then instantly added to the list in place without a page refresh, as shown in Figure 4.

It may not seem like a lot, and it's not difficult to implement using Ajax, but it provides a good end-user feel that's similar to what you expect from a desktop application.

It's important to note that TaDaList is written on the Rails framework. In fact, it's one of the demo applications that people use when learning Rails. And the Rails framework makes this type of Ajax work a real snap.

To demonstrate, I wrote my own very primitive version of TaDaList in a couple of minutes with Rails. The list of to-do items is shown in Figure 5.

I then type Buy earplugs and click Add. The item appears in the list without requiring a page refresh, as shown in Figure 6.

To make this happen, I created a small database to hold the to-do items. I then created the Rails controller shown in Listing 1.

                
class TodoController < ApplicationController
  def list
    @tasks = Todo.find(:all)
  end
  def add
    task = Todo.new
    task.name = params[:task][:name]
    task.save

    @tasks = Todo.find(:all)
  end
end

The code in Listing 1 uses two methods. The list() method shows the page. The add() method adds a new item to the list, then returns the list in HTML.

The RHTML for the list() method is shown in Listing 2.

                
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>

<div id="results">
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>
</div>

<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>
<%= text_field :task, :name %>
<%= submit_tag 'Add' %>
<%= end_form_tag %>

</body>
</html>

This page uses the form_remote_tag to submit the contents of the simple form to the add() method in the controller. The add() method just adds the to-do item to the table, then returns new contents for the results <div> tag. The code for this is shown in Listing 3.

                
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>

So, what have I learned from TaDaLists? First, that a little Ajax goes a long way toward a better desktop feel for Web applications. Second, that choice of Web frameworks -- in particular, those that embrace Ajax -- makes this type of work a breeze.

Back to top

Campfire

Campfire is a companion site to TaDaLists developed by the same group (37signals). In this case, the application is meant to simulate a virtual campfire for remote teams by hosting an online chat and allowing easy file transfer.

I set up a trial account and did some chatting with some image uploads. The result is shown in Figure 7.

On the left-hand side of the display is a simple chat window in which anyone can post a new message at any time. On the right is the display of who's online and a spot for uploading files.

Uploading files is done in-place using JavaScript code to monitor the file upload process. This means that you can add files and images without losing your place in the conversation by having to move to a different page.

Campfire provides some interesting lessons. First, it has the audacity to replace the type of chat service that users formerly expected in desktop applications. But they get away with it by hosting the chat in the context of a group meeting, simultaneously building a system that is both limited in features when compared to its desktop counterpart but more valuable because of its use exclusively in the context of the meeting.

The second lesson is that operations that normally cause page refreshes, such as uploading a file, are handled so that no page load is required. That keeps the user's attention on the task at hand and reinforces the feel of a desktop application.

Back to top

YourMinis

If some of these sites use Web 2.0 in small measures, YourMinis goes far to the other extreme, becoming your widget/gadget site on the Web. With it, you can create and customize pages that host a variety of widgets (or gadgets, if you prefer the Microsoft lingo). The pages act as dashboards, providing you with timely information presented in an appealing manner.

In Figure 8, I show the site after I dropped a Rottentomatoes movie widget on my page.

Rottentomatoes is a movie review site with a twist. It gives an aggregates score from hundreds of movie reviews and provides that number as a percentage. Any movie with a 60% or better is considered fresh (meaning good). In this case, I choose that I want to see Bridge To Terebithia, and I can get movie times in the same widget simply by providing my zip code. This is shown in Figure 9.

The interface is clean and fast and works well on the popular browsers. The widgets are also hostable in a variety of different locations -- for example, the blog of the creators of the site.

In addition to the site, YourMinis has a Firefox extension that watches you as you browse. When it finds something of possible use with YourMinis, such as an RSS feed or MP3s, it pulses to alert you that the resources are available. That kind of integration with the browser, which is relatively easy, is a great way to integrate your site more closely into the user's desktop.

YourMinis has a few more lessons to teach about Web 2.0. First, the minis and the framework are implemented in Macromedia Flash. From the user's perspective, that's not really a problem. Which brings me back around to the point that the choice of a particular technology is not as important as resulting user benefit.

And they encourage developers as the community to take the ride along with them by contributing their own page designs to the community as a whole. Which is another take on working with the customer community to allow them to take your site in directions that you never originally imagined.

Lightbox

While not a site in particular, I'd like to point out the Lightbox technique gets a lot of play on more recent sites. A lightbox is a combination of a user interface technique with some Ajax thrown in. Take the example Web page shown in Figure 10.

If I click an image, the whole page dims and a box appears in the middle of the page with a zoomed-in version of the photograph I selected. This is shown in Figure 11.

This technique has a lot of advantages. It draws the user's attention away from the rest of the page and allows deeper focus on the selection. And because users can click Close and go back to normal browsing, it provides a way of getting more detail without losing a user's place on the page.

This lightboxing technique is not only good for images or video, it also works for textual content. One content site that I visit regularly uses the lightbox technique to provide an in-place synopsis of each article on the home page. But the synopsis is only loaded if the user clicks the lightbox link (through Ajax). So, the user can read several article synopsis items on one page, and the server bandwidth is spared from building huge pages even if the user doesn't read it all. It's the best of both worlds.

Several open source JavaScript libraries are available to make lightboxes. The one shown above is Lightbox JS version 2.

Back to top

Other Web 2.0 sites

In writing this article, I reviewed a huge number of Web 2.0 sites. Most didn't make the cut of those covered above, even though all were deserving. Google in particular has several standout offerings. Google Documents and Spreadsheets demonstrates just how far you can go with WYSIWYG editing within the browser. Google Reader demonstrates how you can take RSS feeds and provide a hosted solution so that users can view their news from any location. Google Mail uses Ajax, JavaScript, and DHTML as well as Google Maps.

Another area where Google excels is mobile accessibility. All their services have trimmed-down versions that work well on phones and other small devices. With a Google account, you can have a customized home page with one version for the Web and another for your phone.

Google isn't the only one doing amazing Ajax work. Meebo is a fantastic example of a hosted chat application with a simple but elegant interface that works over Ajax. Kiko is a calendaring application that makes excellent use of DHTML for editing a calendar as well as Ajax for updating the server with new appointments, contacts, and related information.

Back to top

Conclusion

There's so much to learn from all the sites that I show in this article. In particular, you can learn some great technical tricks. One common element that all these sites share is a deep respect for the power of the combination of HTML and JavaScript code. JavaScript code has received some bad press lately in the programming world. I think it's unfair, because most of the flaws that I heard mentioned are more about browser compatibility with the Document Object Model (DOM) than about the JavaScript language itself. It's clear to me that if you want to make a compelling Web 2.0 application, you need to embrace JavaScript as a language and give it the respect it deserves. The best in the business do.

As I mentioned at the beginning, it's not just about the technology. It's also about creating a compelling user experience. All the sites I chose for this article broke new ground in this area. While some wrapped complexity in a simple form (Google Maps), others brought simple Ajax touches to enhance the interface seamlessly.

Web 2.0 applications also embrace community. Google Maps allows users to mash up their technology for use in their own applications. Sites like Campfire enhance the focused community experience.

Certainly, you can learn a lot. But thankfully, the ease with which you can build JavaScript and DHTML applications makes the whole experience of building Web 2.0 applications pleasanter.

Resources

Learn

• developerWorks XML zone: Learn all about XML at the developerWorks XML zone.
  
  
• Meebo: Learn more about a hosted chat application for instant messaging from nearly anywhere.
  
  
• Google Maps: Plot routes between locations, find businesses, and more with Google's mapping application.
  
  
• GMail: Check out Google's Ajax-enabled e-mail application with built-in Google search technology and megabytes of storage.
  
  
• Campfire: Learn about the group chat and file-exchange application from 37signals.
  
  
• Kiko: Check out this Ajax calendaring application.
  
  
• Map My Run: Plot your run and get accurate distances with one of the author's favorite Google Maps mashups.
  
  
• TaDaList: See what you can get done with a shared to-do list system from 37signals.
  
  
• YourMinis: On a hosted widget/gadget site. Create your own dashboard and contribute your own widgets
  
  
• Ajaxian: Keep up with developments in Ajax and the front-end widgets that use it with this great resource.
  
  
• IBM XML certification: Find out how you can become an IBM-Certified Developer in XML and related technologies.
  
  
• XML technical library: See the developerWorks XML zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.
  
  
• developerWorks technical events and webcasts: Stay current with technology in these sessions.
  
  

Get products and technologies

• IBM trial software: Build your next development project with trial software available for download directly from developerWorks.
  
  

Discuss

• Participate in the discussion forum.
  
  
• XML zone discussion forums: Participate in any of several XML-centered forums.
  
  

About the author

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Google Maps
• TaDaList
• Campfire
• YourMinis
• Other Web 2.0 sites
• Conclusion
• Resources
• About the author
• Comments

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Webcast: Rational software process automation: Real value delivered, real customer stories
• Buy: WebSphere Portal Express

My developerWorks community

Dig deeper into XML on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers