Building the Prototypes
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).
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.
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.
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 browsersIE, Netscape, Firefox, and Safari, among themfor 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 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.