HierMenus CENTRAL: HierMenus In Progress. HierMenus 5.1 Release Notes (1/4)

[next]

HierMenus 5.1: Release Notes

D.M Ragle, July 17, 2003

"Smaller and better" is the motto for our latest HM release, HierMenus version 5.1. A number of minor adjustments and bug fixes made their way into this release, and we are pleased to introduce a new, space-optimized code set that is nearly half the size of our full length HierMenus scripts. Those of you who rely on the verbose, full length code set for developmental purposes, don't worry: our distribution packages from now on will include both the new space-optimized code and the full length verbose code versions that you are already accustomed to, allowing you to choose which version you would rather work with and deploy on your own sites.

As a reminder, though our release articles can be appreciated and may be useful to all DHTML developers and HierMenus fans, the HierMenus script itself is a licensed product and its use on your site requires a paid license agreement. Contact John Maher at [email protected] or call him at (203) 662-2889 for further information (be sure to let him know how you plan to use HierMenus and tell him a bit about your organization, as well).

Sample Pages

Our sample pages demonstrate both frames and non-frames HierMenus displays. Each sample page opens in a new window.

Sometimes, Smaller is Better

On the Web, the number of bytes a user downloads to their browser can have a significant impact on the overall performance--especially the perceived performance--of the Web site as a whole. This can be especially true with the first few pages downloaded from your site, which of course form the user's critical "first impression."

Previous versions of HM offered you no choice; the user must download the full-length HierMenus script when viewing an HM enabled page. Of course, once the user downloaded the script it was typically cached in their browser and subsequent "download" times for the same script aren't a factor. Caching is generally not available, however, for the first hit to an HM site; and of course it's possible the user is running with caching disabled in their browser for some other reason. While the script is divided by browser (separate versions of the script are downloaded to Netscape 4, IE 4, and DOM-Enabled browsers) the continuous adding of new features to the script over the years has necessitated an increase in script size. Additionally, our developer-friendly "verbose" coding style, which seeks to use descriptive variable and function names such as TreeIsHorizontal and HM_f_SetItemProperties as well as ample white space for both indenting and spacing code segments and functions, adds to the overall space utilization of the script.

Beginning with version 5.1 of HM, we now offer both the standard full length verbose HM code set and a shorter, space-optimized HM code set that requires only about half the bytes as the full length version. A smaller code set means less bytes need to be delivered to the browser, and therefore the user can get the content of the page faster than they would with the full sized code set.

For those unfamiliar with the concept of "space-optimization," a quick crash course and example should serve to illustrate the technique. Most code, including JavaScript, is written by developers such that it can be readily examined and utilized by other developers. Thus, a typical function (and an example of a function in our verbose HM Code set) might look this:

function HM_f_HideParents() {
   var TempMenu = this;
   while(TempMenu.hasParent) {
      TempMenu.showIt(false);
      TempMenu.parentMenu.isOn = false;        
// 5.02
      TempMenu.parentMenu.hasChildVisible=false;
      TempMenu = TempMenu.parentMenu;
   }
   TempMenu.hideTop();
}

This method purposely makes use of longer, descriptive variable and property names, such as "TempMenu" and "parentMenu"; white space for both the indenting/grouping of commands and the line breaks between them; and special "comment" lines (// 5.02) which serve no purpose to the code but merely note something of importance to the developers themselves. However, the verbose nature of this function is completely irrelevant to JavaScript processors (i.e., primarily Web browsers). Browsers don't care how nice the code looks; they care only that the code itself conforms to the syntactical rules of the language. Thus, the above JavaScript function could be reduced to the following. This is the same function as above, as it appears in our space-optimized HM version (some line wrapping was added here for clarity):

function HWr(){var eh=this;
while(eh.cv){
eh.HXb(false);eh.ct.isOn=false;eh.ct.bm=false;eh=eh.ct;}
eh.HXe();}

As you can see, the second function is much more difficult to read than the first, which is why many developers avoid this type of coding (and rightly so, since the next developer who must maintain the code will have great difficulty in deciphering the second function). However, it's a much smaller download, and for the reasons we discussed above, the size reduction, in some scenarios, will outweigh the developmental considerations. This argument is admittedly somewhat unique to JavaScript coding, where the size of the resulting code has a direct impact on the overall download time of the site it appears on.

Which code set you deploy on your own site is entirely up to you--the HM distribution package will continue to include both the standard verbose code, as well as the new space-optimized code. And the good news is that the Web browser will happily execute both of the above functions equally well. We suspect that intranet users (where download times aren't a major factor) and developers who like to tinker with the HM code will continue to work with and deploy the verbose code, while Webmasters of public Web sites and those who typically use the code as is (without modification) will use the optimized code set.

On the next page, we explain some of the deployment and technical considerations involved with using the optimized code set. If you've already decided that the optimized code set isn't for you, then skip ahead to page 3 where we'll begin discussing some of the other adjustments and fixes incorporated into HM 5.1.

[next]