The demand for AJAX based web applications has been a trend for some time now. To support this trend there are bunch of options available in the market right now. To keep the scope of this post limited, I'll be talking specifically about JSF component libraries which provide AJAX support.
There are quite a few AJAX enabled JSF component libraries available in the market and some of the most popular ones are RichFaces, ICEfaces, and Oracles's ADF. We recently used Rich Faces in one of our projects and as always, there were some challenges and lessons we learnt. I have tried to extract a few of those lessons that everyone else can benefit from while selecting JSF component libraries especially for AJAX behaviour.
Considerations while choosing JSF component libraries and developing AJAX web applications:
- Handling of simultaneous asynchronous events – If you are dealing with a lot of asynchronous events being generated, sequence in which the events are processed at the server side can be very important. For example, “onkeyup” event generates events as you type, and if you do not have any mechanism in place to handle simultaneous AJAX events, state on your server side can go out of synch with the state on client side. Some libraries like Rich Faces provide queuing to manage AJAX request traffic.
- Essential extension points – There will always be some extensions you would want to do whether it is to overcome the shortcomings of the libraries or to add some business functionality. Hence, most libraries provide essential extension points which are “pre” and “post” all AJAX events are fired and a particular AJAX event is fired.
- Interoperability – This might not be high on the list if a toolkit provides you everything that you need. But if you have to use the libraries alongside other libraries, then interoperability issues can lead to serious trouble. For example, in Rich Faces uses servlet filters to inject itself in the processing sequence which is known to cause some interoperability issues with Tomahawk file upload features
- Strategy for tabbing – This is one of the areas which we initially thought was a no brainer but eventually became a nightmare. Tabbing through the input fields improves the usability of the web-page a lot whether it is an internal app or public facing, especially, if the webpage has quite a few input components. JSF tags provide tabindex attribute which are provided in AJAX component libraries as well. But pages where AJAX events cause show and hide of new fields, “tabindex” attribute is worthless. Also, hard-coding tabindex value can cause headaches when you want to introduce new fields in a page which invalidate existing tab indices.
- Debugging of AJAX components - As a lot goes on behind the scenes before an AJAX request is handled on client side and after AJAX response in received on client side. Hence, if you get unexpected results debugging facilities provided the libraries can be very useful. Rich Faces provides a “log” tag which can be tuned with log levels to show information.
- Templating of component (JSF 2) - This is another important aspect to look out for if your UI designs are not flexible. Templated components will allow developers to change existing component provided by a libraries to fit their needs.
- Finally, good documentation with working examples can accelerate the development process. I found Rich Faces live demo web site quite useful as it lets you play around with different working examples so you can decide which design to use before you start coding it.