by James Dueck
It has been said that JavaScript is the world's most misunderstood programming language. Certainly its name doesn't help, as many people falsely see JavaScript as being a lightweight version of Java. Comparisons aside, JavaScript is an excellent language for use in web projects. This article discusses some of the advantages of using JavaScript libraries in embedded web applications. By this, we are referring to web applications that are served from embedded devices.
Usability guru Jakob Nielsen insists that web pages are unusable if the click-response time is more than one second. In the real world, single-second page delivery is usually a pipe dream. Either web designers and operators don't take Nielsen seriously, or they don't know how to lower downloading and rendering times.
Many Art & Logic clients want their embedded web applications to have the responsiveness of desktop applications, but within a web browser. Macromedia Flash(tm) allows us to create rich, dynamic UI elements such as graphs and performance meters. But is it possible to improve the responsiveness of traditional HTML-based pages?
The fact is that most web pages (embedded or otherwise) could be approximately 25% smaller (not including images) if JavaScript libraries were used to their full potential. It should be noted that the decrease in file size and download time isn't directly proportional. Nevertheless, the proper use of JavaScript libraries yields a significant UI performance improvement.
An important benefit of using JavaScript libraries is that they get cached on the client-side, the same way images do. The following tag tells the browser to download the JavaScript file library.js:
<script language="text/javascript" src="library.js">
Once library.js has been cached, it can be referenced from other pages.
This isn't a very big deal to most people, aside from the benefit of easier code maintenance for their client-side logic. The trick is in what you put in the library. Including repeated layout information in the library is an excellent way to improve performance, decrease memory footprint, and increase consistency across an embedded web application.
Consider the following example. A fictional web interface for an embedded product contains a common header and footer on every page. It also contains essentially the same navigation on every page, using visuals to show where the user is within the application. The UI design is significantly complex, with many well-compressed graphics and exact alignments.
Many web applications use server-side includes to attach common elements to pages as they are served. This technique addresses basic web publishing issues, but not the performance issue. The server still serves out very large pages full of repeated data. Instead of serving out 20K for the header, footer, and navigation every time the user clicks on something, a much lighter file can be served:
<script language="text/javascript">
displayHeader();
displayNavigation('3');
</script>
...
<script language="text/javascript">
displayFooter();
</script>
The details of each function reside in the cached library.js.
On some devices, memory is so scarce that maintainability becomes a lower priority than memory. In such cases, it makes sense to put more of a page's content into a JavaScript library. The above technique, combined with experience and a little ingenuity, can create entire applications that require as little as 15K for the web code. This is really small, considering that the average public web page weighs in at around 50K. It should be noted that in addition to UI performance gains, smaller page size is less taxing on the server CPU.
This leads to my favorite thing about embedded web application development: the lack of memory in an embedded device forces Art & Logic to write unusually high-performance web code. Using the above technique and others, UI performance is improved. Surely any usability guru would be happy about that!