Web 2.0: Moving to Rich-Client Applications

Scott Wasserman, e-brilliance Chief Technology Officer

A lot of buzz has been created recently surrounding the next generation of web site applications, coined Web 2.0 by the online community. These applications promise to deliver more application-like experiences, with more fluid interactions, less delay, improved functionality, and less overall navigation than traditional web sites. But why, suddenly, has the push to rich-client applications on the web arisen? For that, we need to take a look back…

The Bad-Old Days: Type, Submit, Type

Remember, one of the key goals of hypertext and the World-Wide-Web was information exchange. A web page was perfect for displaying static information but lacked the control that users had become accustomed to in desktop applications. Over time, HTML became more robust and allowed for more sophisticated user controls and page layout. Unfortunately, even with the improvements, the basic user interaction with a webpage was the same, and html content on the page was static until the entire page or frame was reloaded from the server. JavaScript allowed developers to make web pages behave more like applications but it was difficult, because of different implementations of JavaScript in browsers, to create a consistent cross-browser user experience. Developers continued to struggle to provide a more application-like experience but were still stuck in the archaic framework of displaying html and posting data back to a server.

Steps Forward

One of the first innovations, Cascading Style Sheets (CSS), was created to separate HTML markup from visual style. Now, with small tweaks, developers can make extensive visual or behavioral changes to the entire site. Adoption of CSS has made it possible to roll out sites with a consistent look and feel and to make changes to those sites within the blink of an eye.

Dynamic HTML (DHTML) defined a representation of the content within a given page as a tree of objects. Any item in the page, such as a field or table cell, can now be tagged with an identification value such as a placeholder representing that item. Using Javascript, developers can change content on the page by looking up the field by the identification value. The entire page can be changed this way.

The community adoption of the Firefox browser also caused other vendors such as Microsoft to clean up their act and adhere to standards such as CSS, ECMA Scripting, XHTML, and more. There are now few, if any, differences between the rendering of web sites across the big three vendors: Microsoft, Mozilla, and Opera.

AJAX – A New Web Paradigm

First introduced by Microsoft, the XMLHttpRequest API allows for transmission and receipt of asynchronously from a web page using JavaScript. XMLHttpRequest object in the major browser vendors, as well as adherence to JavaScript as a standard client-side programming language, has made it possible for programmers to submit requests from the click of a button and have the result populated somewhere else on the same page, all while still not waiting for a web page refresh.

This process is known by the industry by Asynchronous JavaScript and Xml (or far more commonly, AJAX). Using JavaScript, CSS, and XMLHttpRequest, data can be transferred between the browser and the application server without waiting for the synchronous POST -> process -> download -> render step. Data can be transferred in XML, or in other data conventions such as HTML or plain text. There are other simple data exchange formats such as JavaScript Object Notation (JSON), Representational State Transfer (REST), and Extensible Binary Meta Language (EBML), tailor-made for asynchronous data and object transfer asynchronously.

Sample Web 2.0 Sites

So, enough technical talk. A good way to gain an understanding of Web 2.0 is to play around with various sites. Here are some examples below.

Base Camp

Written using the Ruby on Rails web framework invented at 37 Signals, Base Camp helps track project milestones. This web site uses AJAX to make it easy to change tasks on-the-fly. Once the user clicks on the To-Do tab, the web browser stays at that location, only refreshing when navigation is absolutely required. Everything on the web page is manipulated dynamically. Adding a To-Do list? No big deal, it pops up above the current To-Do list and can be created on-the-fly.

What is the benefit of AJAX to Base Camp? The end-users forget that they are working on a web site, with its’ cumbersome round-trip delays for each activity. They can focus on getting work done and not worry about installing a client tool on each desktop to run their application. And they can collaborate with others using an application that has been fully realized using only web protocols and a standard web browser.

Flickr

A business-to-consumer play, Flickr is a web-based photo sharing tool written using AJAX as well as Flash. This tool has replaced traditional desktop photo management tools, allowing the user to store photos online as well as share them with friends, print them, and discuss them at length. Photos can be dragged and dropped to form sets and re-arrange order, and many web-based plugins exist, such as location maps, blog-posting software, uploading tools, and more.

Flickr has relied heavily on the edit-within-the-page approach, allowing access to the entire library using innovative scrolling and just-in-time loading of image thumbnails as they appear on-screen. Even though it is a narrowly targeted application for use in the photo-enthusiast industry, much can be learned about building interactive web sites by just using Flickr.

Key Web 2.0 Features

So, what makes up a Web 2.0 application? Here are a few key things to keep in mind while designing your interactive web site.

Adhere to CSS for ALL content
Use AJAX scripting and application server support to provide seamless interactivity without navigating from page to page.
Allow for and encourage collaborative interactions between users where possible.
Pay attention to visual style; don’t make the site appear too cluttered or difficult to navigate. Assume that users will stay on several highly interactive pages rather than surf a very large array of static content
Think like a desktop developer. What do you like to do when using tools like PowerPoint? Drag and drop? Change layouts on-the-fly? Customize it?
Allow third parties to develop ‘hacks’ or plugins to your site. Consider what Google has done by opening up Google Maps—developers have created applications plotting cheap gasoline station locations, user communities, and more.
Adhere to open standards for extensions such as Web Services and XML data exchange. Many Web 2.0 organizations have gone to great lengths to provide Web Service APIs and encourage sharing of ‘mashup’ applications that create new ways to share information.

Summary

With the advent of the rich-browser platform and simultaneous delivery of a vibrant web-service community, Web 2.0 applications are changing the way we work with information over the web. The web has now become an almost extended desktop—or webtop—where rich, interactive applications have gained wide adoption due to their ease of use and speed. Any new web-based project should consider these trends accordingly. Contact for more information on how we can help you apply this technology.

References