Category: "RIA"

No More Flat Pages

Building a complex application requires creative use of the page space. At a certain point the page is full, and additional content/options/functionality must be integrated with innovative approaches.

  • Dialog or popup boxes are extremely effective for displaying search results. Integrated carefully into the form functions, it allows a user to review the search results without closing the box
  • Tabbed navigation is good for hierarchical content displays
  • Accordian panes are good for compressing a stack of content into a small area, opening them on refresh is helpful for the user

Half JAX

AJAX can be implemented in many different ways.

Options:

  • Place all the interface logic on the client side, and have the server act only as backend functionality. For a complex application, this method may be prohibitively difficult. The overhead of placing all the logic on the client side, and managing its delivery and execution is probably not worth the performance gains.
  • Segmenting the pages and populating them with HTML and related logic from the server. This would be using something similar to dojo content panes, which are HTML content. Similar to iframes.
  • Half JAX. Run the pages as HTML templates, augmented with AJAX navigation/population. Thus, the HTML remains static for the page, but the AJAX is used to fill the fields and provide advance features. With an efficient template engine and a sophisticated architecture, this is an excellent approach.
  • Use straight HTML pages, with a template engine. There is no law that AJAX must be used. :)

Delivering the HTML, with AJAX for form population and rich interface features is a nice compromise. The pages remain fairly fast, the rich features are available, and the complexity is limited. This is best implemented with a good architecture of reusable/common components.

Choosing javascript Libraries and Toolkits

If you want to add sophisticated client side functionality to a site, and are considering a javascript library like jQuery, dojo, scriptac….us, etc, remember:

  • Powerful tooks often add significant overhead. It isn’t worth using a library to support a single pull-down menu.
  • Try to find on-demand loading, where only the code required is downloaded.
  • Consider themes offered by the toolkits before designing the site. They can greatly improve your design and will work better with the library functions.
  • If you’re using AJAX, definitely use a library.
  • Remember that you can limit the library’s impact by placing it only on those pages which truly require the functionality.
  • Set up caching headers for the library code and CSS. They will probably never change (you shouldn’t change them).
  • Try the libraries out before choosing one. Use more than one if you feel it is worthwhile.
  • Use a CDN.
  • Be prepared to invest a significant amount of time in learning curve.

Reduce your 'net print

Bandwidth reduction will soon be a priority. The proliferation of RIAs exponentially increases the bandwidth requirements of initial page loads, while potentially reducing that of subsequent requests.

  • Use public CDNs - both to access and distribute libraries. Public CDNs are built for this purpose and often compres content. If you have your own CDN, use it.
  • Use and allow the use of logo images from their original sources. For example, the logo for your product could be displayed, from your server, on many sites. This allows headers to be set for browser caching, such that subsequent requests for the images will be served from the client, not the server.
  • Use compression where appropriate. Optimize images and ensure text is text, not images.
  • Examine your file and page architecture. Strive to deliver only that content required for each page.
  • Check the stats to find where the bandwidth is being used and focus on improving page performance for those pages. Use http://websiteoptimization.com
  • Use AJAX.
  • Develop locally, use XAMPP or VMWare.

dojo - ContentPanes - compression

To compress the content delivered to a dojo ContentPane, you can compress the content and cache it with the Zlib functions of PHP, then open it with the filesystem functions and deliver it with the Content-Type header set to “text/html” (or other appropriate setting), and Content-Encoding set to “gzip“.

The compress and cache should be performed if the file is likely to be reused. If reuse is unlikely, or the file is relatively small, use gzencode or gzdeflate.

This should work with other libraries as well.

1 2 4 5