Channels ▼

Web Development

AJAX: Selecting the Framework that Fits

Source Code Accompanies This Article. Download It Now.

Building the Prototypes

Once we narrowed our field to three pure JavaScript AJAX libraries (Dojo, Prototype/Scriptaculous, and YUI), our next step was to create working prototypes using each of the libraries.

Our primary goal in creating these prototypes was to get hands-on experience with each framework so that we understood how they satisfied our project requirements. A second goal was to have working demos so that we could perform browser and performance tests.

Basically, the new homepage design required two visual components:

  • Hubs, which are dynamic HTML blocks with title bars (Figure 1).
  • Tab Panels, which display multiple view areas through a tab menu (Figure 2).

Figure 1: Typical hub.

[Click image to view at full size]

Figure 2: Typical Tab Panel.

Because none of the three frameworks contained the exact code for a Hub widget, we had to write custom code. Luckily, Dojo does have a TitlePane widget that can be customized to dynamically load content. Also, we only wanted the icon (not the entire title bar) to trigger the expand and collapse. TitlePanel.js and titlePanel.html (available electronically; see "Resource Center," page 5) are customized Dojo code modules that do this.

For YUI, we initially considered extending the Module object, but ultimately decided not to because of the increase in JavaScript file size and complexity. Again, we wrote a custom Hub object; see Hub_YUI.js (available electronically). Finally, Prototype required an update similar to YUI (see Hub_prototype.js).

Dojo's TabContainer widget was close to what we needed and only required updates to style. However, neither YUI nor Prototype had the exact Tab Panel widget we needed. Consequently, we added JavaScript functions to implement the Tab Panel using the Hub. At this point, we had common code between YUI and Prototype, so the code written to support YUI's Tab Panel also supported the Prototype demo.

Other Issues

AJAX technologies let you asynchronously load XML, JSON, or HTML data on a web page. We chose to load HTML (JSP in our environment) partly because it's the easiest way to get started with AJAX.

In all three prototypes, JavaScript was compressed to reduce download size. We used the Dojo compression tool to create a custom build, which included the specific widgets and dependent code. YUI provides a compressed version of JavaScript files ready for deployment. We compressed our Prototype library using Dojo's compressor tool.

Browser testing is an important aspect of overall testing. We chose to complete browser testing early in the process, before making the final decision about which AJAX library to use. To this end, we partnered with our Help Desk to complete browser testing on each of the three prototype pages. Browser testing included a long list of browsers—IE, Netscape, Firefox, and Safari, among them—for both Windows and Mac. It is worth noting that our list included some browsers not on the approved list for each AJAX library. Eventually, we were able to address every issue encountered during browser testing, and the testing process turned into more of a learning activity.

Performance testing is a key ingredient to website success. Clients come to our website to efficiently achieve some goal, not to explore cool technologies. To measure performance, we used a commercial performance-testing system. We often complete website performance testing when a new release first hits quality assurance. However, for this project, we did early performance testing to help select the appropriate AJAX library.

First, we used the performance-testing system to record a user's path through the target website. We defined the primary path as loading the homepage without opening any tabs or clicking any links. Next, we used the performance-testing system to play back the website navigation using various connection speeds. Finally, the average response times were compared.

The smaller the footprint of the framework used, the less likely performance degradation occurs. The total compressed JavaScript file sizes required by YUI (22K) and Prototype (32K) are significantly smaller than the single custom Dojo JavaScript file, which is about 200K. All three libraries performed well with a high-speed connection; however, the YUI and Prototype/Scriptaculous prototypes performed faster with 56K dial-up connections.

The results of this test gave us a rough idea of how AJAX technology affected site performance. In the end, we were hesitant about using Dojo because of the impact on dial-up users. That said, more recent versions of these libraries may produce different results. Furthermore, our results were affected by our widget choices and compression technique.

Later in the software lifecycle, we repeated both browser and performance testing on the release in our quality-assurance process. Given the earlier work we performed, we were pleased not to run across any browser or performance issues during this final round of testing.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.