AJAX-based: A Middle-of-the-Road Approach
By:
Adelmar Esplana
“In the past, browser applications have always been about filling out
and submitting forms and getting a whole new page back. There is a lot of boilerplate on each page
that gets retransmitted over and over again,” said Herdener in Seattle, a
spokesperson from Amazon.com (Taft D., 2005). Standard information such as header, footer and navigational menus are
some of the common content that is coming back and forth every time each page
is requested from the server. Before we
dig in a little further, let us discuss first what is a desktop-based versus a
Net-based application.
Desktop
Application (Desktop-based)
Desktop application performs its operations on the client computer, and may access a centrally located database. However, it does not require a web browser or web server, and does not generate HTML pages.
Common reasons for selecting the desktop application include:
· Support for a more sophisticated or rich application user interface
· Improve performance
· Lower application development cost
Web Application
(Net-based)
Web application runs on an Internet web server and generates HTML web pages that are displayed to the user through a web browser. All user interaction takes place through a web browser.
Common reasons for selecting a web-based implementation include:
· Cross platform compatibility
· Lower installation and maintenance costs
·
Ease of use for the novice computer user (and shorter
learning curve)
·
Ability to access the application or database from any
internet-connected computer
Web Applications Performance Issues
According to Schmelzer, senior analyst of ZapThink, “Users today increasingly demand more from
their online user experience.”
If you're running serious business applications online, a slow website
equals lost dollars. This is true either directly--by missed sales if you're
running an e-commerce store--or indirectly--through lost customer trust if
you're providing a web-based solution to clients. The more important a website becomes to your
operation, the less you can afford to have slow performance or downtime. Snap
decisions in crises, however, can lead to greater expenses and more problems
down the road (entrepreneur.com/article/0,4621,327448,00.html).
Challenges and Opportunities
The growing demand of providing
highly available web applications (i.e., shopping cart, online reservations) as
well as the realization of the zero deployment approach in computing is
promising. According to Greg Notess of
Montana State University, “The standard
office applications such as word processing, spreadsheet, presentation and
database have not been readily available online-until now.” The idea behind moving away from
desktop-based software to Net-based applications presents opportunities and
challenges. With only an Internet
connection and a browser, you can use Web-based software for many computing
needs. Since Net-based applications do
not require client-machine installation, the application can be access from
almost any PC anywhere with zero installation and maintenance. Rather than installing a copy of an app in
every desktop in the office, they can deploy it over the Web to anyone who
wants it. Likewise, bug fixes and
software updates can be rolled out to every user automatically.
A report released by ZapThink analyzes the RIA (Rich Internet Application) environment, projecting an increasing demand for such Java, AJAX and Flash-based Web apps. While the market rests just under $100 million today, the report suggests by 2011 companies will invest more than $500 million on RIA. Analyst Ronald Schmelzer attributes the demand to a few sources.
“Users today increasingly demand more from their online user experience,” said Schmelzer, senior analyst, ZapThink. “The convergence of SOA (Service Orient Architecture) and Web 2.0 are leading organizations to retire their static Web pages and inflexible portal applications. Today’s [users] set the bar for user interactivity higher than ever before, and expect their online experiences to behave more like desktop applications they are used to.” (javareport.com/article.aspx? id=18968)
Concerns and Issues
Security
Issues for Ajax Web Applications - While
Ajax can greatly improve the usability of Web applications, it can also create
server opportunities for possible attack in the application if it is not
designed with security in mind. Since
Ajax Web Applications exist on both the client and the server, this include the
following security issues:
(spidynamics.com/assets/documents/AJAXdangers.pdf#search='AJax%20issues')
§
Create a larger attack
surface with many more inputs to secure
§
Expose internal
functions of Web Application server
§
Allow a client-side
script to access third-party resources with no built-in security mechanisms.
Network Downtime - Web-based applications are generally slower and less
powerful than ones that run from a local PC hard drive. They are also subject to network problems
and other downtime (Schofield, 2005).
For instance, frequently travelers will not have access on the plane
ride. For them to be able access the application, open and modify the files,
Internet connection must be available.
Unless they have most recent backup on their desktop or laptop, and the
network is available, so are all the documents and files are accessible (Notess
G., 2006).
Financial
Support - A lot of the Ajax-based
web applications out there are free of use and for the companies providing
these tools, to keep the product going, financial models for long term support
is important. For example, Google buys
Writely, getting bought out by a large company such as Google gives hope for
continuity, but the questions remain as to what Google plans to do with Writely
and how it will be developed over the next few years. As a result, accounts are immediately closed. Given the questionable permanence of the
products, be sure to download copies of any crucial documents to local machine
(Notess G., 2006).
Web-based Applications Development Approach
Building a richer, more interactive and highly personalized cross-browser web application that emulates the traditional Windows application involves a lot of work. In the past few years, developers could choose between screen-based and page-based approaches when building a web application (uie.com/articles/ajax/).
Screen-based - It is an approach to create a screen-based system with very rich interactions using a sophisticated, powerful technology such as Java or Flash. It offers the ability to enter and manipulate information on a small number of screens that instantly update with any submitted changes.
Paged-based - It is
an approach to create a page-based system using easier-to-learn core web
standards like XHTML and CSS, whose more basic capabilities force less-rich
interactions. With this approach, users
who enter and manipulate information must sit through a page refresh in order
for their changes to takes place.
While both approaches have proven successful, each has drawbacks. Screen-based approaches, for example, require significant development time and effort because they are built with difficult to learn and often proprietary programming tools. While easier to build than their screen-based counterparts, page-based approaches provide a less seamless experience (Porter, 2006).
AJAX-based: A Middle-of-the-Road Approach
In today’s Internet economy what we need is an optimized, lightweight
and more responsive web applications to meet the demand of the growing market. A company called Web Performance,
Inc. published an article “Using AJAX to Improve the Bandwidth
Performance of Web Applications” and
demonstrated how AJAX development technique could
impact the performance of the applications.
According to them based on their experience, numerous customers who have
performance problems due primarily to the size of their web pages. Put another
way - the pages are simply too big to achieve the desired performance goals
with the available bandwidth. In some cases, the page consists primarily of
content that is common between many pages. For instance, a header, footer and
navigation menu that changes infrequently, if at all, during the use of the
application. This suggested that if the application was only updating the part
of the page that needed to change, a considerable amount of bandwidth could be
saved.
In order to test their theory, they decided to see if they could cut
the bandwidth use of an application by at least 50%. They selected a rather
simple internal data-analysis application. The application consists of a
typical page layout with a central section containing the changing content. The
header, footer and navigation menu do not change during the application
operation. They modified the application so that it can be accessed in either
traditional (page-refresh) mode or AJAX mode. They then used their measurement
tool (Web Performance Analyzer) to record and analyze the bandwidth utilization
of each application.
The first result of their effort surprised them a little. With all the
talk of AJAX frameworks, they expected to have a difficult time choosing an
appropriate AJAX framework to use in their application. After trying a few
simple experiments with a few popular frameworks, and learning just enough
Javascript to be dangerous, they settled on a simple collection of JavaScript
functions to accomplish their goals. They were able to pull a few code snippets
from various Javascript/AJAX tutorials around the 'net and with less than 100
lines of JavaScript (and some refactoring of their web-app) they converted the
application to use AJAX. No frameworks needed.
The second result confirmed their expectation - they were able to cut
the bandwidth usage of the application by 61%. The chart below shows some
bandwidth statistics for the two versions of the application:
|
Scenario/mode |
First-page size |
Typical page size |
Total bandwidth |
|
Page-refresh |
44k |
10k |
210k |
|
AJAX |
47k |
2.5k |
81k |
TOTAL BANDWIDTH SAVINGS > 61%
Visit the site to
see the entire report.
(webperformanceinc.com/library/reports/AjaxBandwidth/index.html)
What is AJAX?
Jesse James Garrett of Adaptive Path coined the term “Ajax” (Asynchronous JavaScript and XML) in February of 2005 (infoworld.com//3344). The technology behind it is not new as a matter of fact, Ajax leverage the same technologies as page based approaches: XHTML, CSS, XML, XSLT and JavaScript. It is a new approach that marries the benefits of both screen and page-based approaches. It provides a real alternative for creating powerful applications by allowing more sophisticated functionality using easier-to-implement web standards. One of the most wanted functionality that is available on desktop and now feasible with Ajax is the drag-and-drop implementation. “Web pages and applications can be developed by letting the user to drag-and-drop information, folder and documents, as they are able to do on a desktop.” (Mohamed, 2006)
Why AJAX?
The intent is to make web pages feel more responsive by exchanging small
amounts of data with the server behind the scenes, so that the entire web page
does not have to be reloaded each time the user makes a change. This is meant
to increase the web page's interactivity, speed, and usability. Drew Herdener, a spokesperson for Amazon.com
Inc., said Amazon uses AJAX-style development because it provides “much greater
immediacy for the user.”
The term asynchronous refers to the way AJAX applications communicate
with their host servers. Under the old
model, the Web browser refreshes the current window each time a user performs
some action that initiates a request for new data from the server.
Under AJAX’s asynchronous model, the browser doesn’t have to wait for
the user to request an action, nor does it have to refresh the entire window to
show newly retrieved data. Instead, the
JavaScript code running in the browser communicates with the server by passing
XML-formatted data back and forth. The
JavaScript code can also apply style sheets to retrieved data and display it in
one portion of the existing Web page (Asaravala, 2005).
Reduces network traffic
Why should a browser ask a
server to run a simple task when the browser has enough power to do the job
itself? (Asarvala, 2005) AJAX
encourages developers to split Web pages into compartments of data that can be
refreshed independently of the entire page, and to write applications that act
on data within the browser rather than on the server. As a result, less data
and display information has to travel over the network.
Instant field checking & saving/Real-time data
validation
One of the most beneficial features
that we sometimes take for granted in desktop applications is the capability to
instantaneously check the data we type in. In spreadsheet applications, for
example, our name entered in a numeric field will instantly produce an error
that we can fix immediately.
On the Web, it is easy to check fields on the client side using JavaScript. This produces an immediate effect, and mimics the behavior of a desktop application. However, for security reasons it is necessary to check all fields on the server end as well. Fortunately, Ajax allows that to happen, too.
Freedom from the Page Refresh/Refreshing data on the
page
Typically, when users enter information into an
input field on a page-based web application, nothing is done with that
information until they press "submit". After they press
"submit" the information is sent to the server, a response is
returned, notifying the user of success or failure. During this time, which
typically changes based on the speed of the connection and the amount of
processing being done, the user sits and waits while the page refreshes. While the
actual download time doesn't lead to user frustration all by itself (uie.com/articles/download_time/),
users desire (and expect) immediate response to their queries—reloading a page
can result in user confusion. For example, users often find it difficult to
recognize pages containing error messages, particularly if they can't see the
error messages without scrolling.
Ajax applications, on the other hand, don't need to refresh the entire page to update information on it. Instead, Ajax apps can simply update parts of the page at any time, giving users an instantaneous response to their inputs and queries. This allows users to continually see what they're working on and react to any changes, errors, or updates the interface notifies them of (uie.com/articles/ajax/).
AJAX: How it works?
Ajax isn’t a technology. It’s really several
technologies, each flourishing in its own right, coming together in powerful
new ways. Ajax incorporates:
§
standards-based
presentation using XHTML and CSS;
§
dynamic display and
interaction using the Document Object Model;
§
data interchange and
manipulation using XML and XSLT;
§
asynchronous data
retrieval using XMLHttpRequest;
§
and JavaScript binding everything together.
The classic web application model works like this:
Most user actions in the interface trigger an HTTP request back to a web
server. The server does some processing — retrieving data, crunching numbers,
talking to various legacy systems — and then returns an HTML page to the
client.
Figure 1: The traditional model for web
applications (left) compared to the Ajax model (right).
This
approach makes a lot of technical sense, but it doesn’t make for a great user
experience. While the server is doing its thing, what’s the user doing? That’s
right, waiting. And at every step in a task, the user waits some more.
Obviously,
if we were designing the Web from scratch for applications, we wouldn’t make
users wait around. Once an interface is loaded, why should the user interaction
come to a halt every time the application needs something from the server? In
fact, why should the user see the application go to the server at all?
An Ajax
application eliminates the start-stop-start-stop nature of interaction on the
Web by introducing an intermediary — an Ajax engine — between the user and the
server. It seems like adding a layer to the application would make it less
responsive, but the opposite is true.
Instead of
loading a webpage, at the start of the session, the browser loads an Ajax
engine — written in JavaScript and usually tucked away in a hidden frame. This
engine is responsible for both rendering the interface the user sees and
communicating with the server on the user’s behalf. The Ajax engine allows the
user’s interaction with the application to happen asynchronously — independent
of communication with the server. So the user is never staring at a blank
browser window and an hourglass icon, waiting around for the server to do
something.
Figure 2: The synchronous interaction pattern
of a traditional web application (top) compared with the asynchronous pattern
of an Ajax application (bottom).
Every user
action that normally would generate an HTTP request takes the form of a
JavaScript call to the Ajax engine instead. Any response to a user action that
doesn’t require a trip back to the server — such as simple data validation, editing
data in memory, and even some navigation — the engine handles on its own. If
the engine needs something from the server in order to respond — if it’s
submitting data for processing, loading additional interface code, or
retrieving new data — the engine makes those requests asynchronously, usually
using XML, without stalling a user’s interaction with the application. (adaptivepath.com/publications/essays/archives/000385.php)
AJAX-based Available Software
When you start looking for Web-based software, or
what some call the Read/Write Web, it is amazing to see the variety and
sophistication of the many free tools. See the table below, or even find even
more listed online at the Protopage page (protopage.com/websoft).
|
Presentation |
|
|
Thumbstacks |
|
|
Think Free Show |
|
|
Word
Processing |
|
|
Writely |
|
|
ajaxWrite |
|
|
(Firefox
only) Zoho
Writer |
|
|
Think
Free Write |
|
|
Spreadsheets |
|
|
iRows |
|
|
Num
Sum |
|
|
Numbler |
|
|
Zoho
Sheet |
|
|
Think
Free Calc |
|
|
Calendar |
|
|
Kiko |
|
|
30
Boxes |
|
|
Google
Calendar |
|
|
Database |
|
|
Lazybase |
|
|
Calculator |
|
|
Calcr |
|
|
Business
Applications/Project Management |
|
|
Zoho
Planner |
|
|
37
Signals |
|
|
Image
Editor |
|
|
myImager |
|
|
|
|
Source: Notess, G.R. (2006) Montana State University
AJAX-based Development Tools
Coding AJAX applications can be challenging, but developers don’t have to go it alone. Growing lists of vendors offer tools that make building complex Web apps a snap.
|
|
||
Product
|
Description
|
Price
|
Backbase 3.0 Standard Editioninfoworld.com/3336
|
JavaScript
library replaces JavaScript and HTML code with its own BXML language designed
for easy AJAX development
|
$5,760
per CPU
|
JackBe NQ Suiteinfoworld.com/3337
|
An
IDE and set of JavaScript libraries for creating cross-platform AJAX
applications without starting from scratch
|
Starts
at $50,000
|
Microsoft Atlasinfoworld/3338
|
The
Visual Studio 5 “early alpha” release includes an ASP.Net extension for
creating cross-browser AJAX interfaces
|
$299
per seat (expected)
|
Ruby on Railsinfoworld.com/3339
|
Framework
for developing Web applications in the Ruby programming language, with
several functions for accelerating AJAX development
|
Open
source
|
Sun Java Studio Creatorinfoworld.com/3340 |
Early-access
Java IDE containing some AJAX components that can be added to applications
|
$99
per seat (expected)
|
Tibco General Interface 3.0infoworld.com/3341 |
IDE
provides step-through debugging, memory management, and other tools for
developing AJAX applications
|
Starts
at $25,000
|
Source: Asaravala, A. (2005) AJAX
Developer’s Toolkit
For those willing to give AJAX a shot, a number of
development tools are available.
According to Inforworld.com, Backbase (inforworld.com/3208), JackBe NQ
Suite (inforworld.com/3234), and Tibco General Interface (infoworld.com/3328)
are the most advanced commercial products in the space—though each comes with
the hefty price tag (see table, “AJAX Developer’s Toolkit.” above).
No to be left out, both Microsoft
and Sun Microsystems have released early-access version of their own AJAX
development tools (infoworld.com/3329).
The Ruby on Rails development framework is another mature tool, and it
offers the additional attraction for many developers of being completely open
source (infoworld.com/33331).
Conlusions
Garrett echoes that sentiment. "There is no substitute for smart planning in the development and deployment of any application. There are certain complexities of Ajax development that places even more of a burden on development teams to make smart choices."
Bibliography
Notess, G.R. (2006) Web-Based Software and the New Desktops on the Web.
Montana State University, 30(4), 39-41, 3p;(AN 21425623)
Langley, N. (2006) Use of Ajax development grows despite controversy.
Computer Weekly, 54-54, 2/3p (AN 21604425)
Wusteman, J., O’hlceadha, P. (2006) Using Ajax to Empower Dynamic Searching.
Information Technology & Libraries, 25(2), 57-64,8p (AN 21557649)
Bednarz, A. (2006) AJAX offers corporate challenges, chances.
Network World, 23(20), 30-30,1p (AN 20944632)
Taft, D.K. (2006) AJAX: Are you experienced?
eWeek, 23(20), 14,1/2p (AN 20943853)
Mohamed, A. (2006) IBM extends Eclipse functionality to simplify Ajax development.
Computer Weekly, February, 16,1/3p (AN 21026118)
Langley, N. (2006) Take on the Java world as Atlas battles with Ajax.
Computer Weekly, June 56, 1/2p (AN 21524411)
Schofield, J. (2005) Web application development continues to evolve as the Ajax approach catches on.
Computer Weekly, November, 62,1/2p, 1c (AN 19121938)
Taft, Darryl K. (2005) Support for AJAX development rising.
eWeek, October 22(42), 16,1/2p (AN 18740743)
Asaravala, A. (2005) AJAX Puts the Browser to Work. (Cover story)
InfoWorld, October, 2005,27(42), 22-28,5p, 1c (AN 18638306)
Montalbano, E. (2005) Microsoft Readies Atlas Web Development Framework.
InfoWorld, July 27(27), 11,3/4p (AN 17552004)
Wayner, P. (2005) THE BROWSER RELOADED.
InfoWorld, May, 27(21), 38-42,5p, 2d, 2c (AN 17139154)
Merrill C. (2006). Using AJAX to Improve the Bandwidth Performance of
Web Applications
Retrieved April 13,2006, from webperformanceinc.com/library/reports/AjaxBandwidth/index.html
Kivlehan C. (2006).
Keep your online customers happy by switching to a faster web host
Retrieved April 13,2006 from entrepreneur.com/article/0,4621,327448,00.html
Porter J. (2005)
Using Ajax for Creating Web Applications
Retrieved April 13,2006 from uie.com/articles/ajax/
Garrett J.J. (2005).
Ajax: A New Approach to Web Applications
Retrieved April 20, 2006 from adaptivepath.com/publications/essays/archives/000385.php
Hoffman B. (2006)
Ajax Security Dangers
Retrieved April 20, 2006 from
spidynamics.com/assets/documents/AJAXdangers.pdf#search='AJax%20issues'
Frye C. (2006). Ajax
alert raises security, scalability issues
Retrieved April 20,2006 from
searchwebservices.techtarget.com/originalContent/0,289142,sid26_gci1162641,00.html