Archive for JavaScript

Ajax, JSF and JSON: JSON-RPC-Java

While ajax4jsf is a very nice Ajax framework for JSF, it’s sometimes too expensive to submit an entire form and re-render (parts of) the page just to update some data. For client-side components, like many of Dojo’s UI widgets, JSON is a simple and convenient way to represent data. It is especially useful for components that need to pull data from the server, such as a result table scrolling through thousands of rows. Instead of re-rendering the entire page, the required data is transferred via JSON and then the widget is re-rendered using JavaScript. JSON-RPC-Java provides a convenient wrapper for Java RPC (Remote Procedure Call) through JSON, i.e. both the server request and the response are encoded in JSON (instead of, say, XML).

In JSON-RPC-Java, remote procedure calls are routed through a single servlet. The server-side methods are implemented in POJOs and registered with the user session. Parameter types are determined with reflection and mapped to the corresponding JavaScript types. To get an impression of what this is about, consider this trivial (and somewhat useless) Java class implementing an uppercase service:

class MyObject {
public String toUppercase(String value) {
return value.toUpperCase(Locale.ENGLISH);
}
}

This code runs somewhere on your web server, giving you full access to any business data and methods necessary. A dynamic JavaScript proxy provided by JSON-RPC-Java allows you to call the remote procedure like a local function, e.g. to call MyObject#toUppercase(“sheep”) you would code in Javascript:

new JSONRpcClient("/jsonRpcServlet").MyObject.toUppercase("sheep")
-> "SHEEP"

In this case, the call is synchronous, i.e. the browser blocks until the response arrives. In most cases, this is not what you want for a responsive user interface. To make asynchronous calls, the first parameter to the remote procedure is a function reference. The JSON/RPC call will then proceed immediately, and the callback function will be executed when the server response arrives. For example:

function myCallback(result) { alert(result); };
new JSONRpcClient("/jsonRpcServlet").MyObject.toUppercase(
myCallback, "sheep")

Compared to using ajax4jsf, this is simple and efficient. However, there are two drawbacks: First, the remote procedure call likely returns raw data, not markup ready to be passed to the client. This is not an issue with Dojo widgets since they are pure client-side JavaScript components, but it prevents you from updating parts of the rendered page without writing Ajax-aware components (which is exactly what ajax4jsf allows you to do).

Second, and not so obvious, the servlet completely circumvents the JSF environment. That means no lifecycle, no phase events, and no JSF managed beans. You gain performance but lose access to any JSF-specific data or methods on the server side. However, it is possible to share data between JSF and JSON-RPC-Java objects using the user’s HttpSession. To allow access to the HTTP request and session objects, any HttpServletRequest or HttpSession parameters to a Java method are automatically set by JSON-RPC-Java. To give another entirely useless example, this remote method would return the current user’s session ID:

class MyObject {
public String getSessionId(HttpSession session) {
return session.getId();
}
}

So far, JSON-RPC-Java has worked great for existing JavaScript components that pull their data from JSON structures, like Dojo’s FilteringTable or TreeV3 widgets. It does, however, require some effort and manual programming for communicating with the server and updating the data, and does not integrate with JSF. It depends on the use-case whether this is worth the trouble – for many common uses of Ajax (form validation, partial page rendering) this is possibly not the case, but when dealing with lots of data it might well be.

Advertisements

Comments (6)

Automated Browser Tests: Selenium IDE

Selenium is a collection of cross-browser, cross-system browser testing frameworks. It includes a client-side Javascript/HTML testing application and, for more complex tasks, a remote framework that can be used for automated browser access in a number of programming languages (e.g. Java or Python). Thus it becomes possible to write browser tests like ordinary unit tests in your favourite language, assuming that the targeted browser is available on the host system.

While I haven’t gotten around to using the remote framework yet (I’m really inclined to do this soon), I just discovered the Selenium IDE plugin for Firefox. It’s a macro-based web testing application that captures the user’s input on a webpage and replays it at a later moment. If an user action fails to execute, the test is aborted and an error message is returned. Tests can be exported to remote tests in any supported language, effectively providing people a way to write (read: record) remote tests without actually programming anything.

Unfortunately, my first attempts to record tests for an in-house application heavily dependent on Javascript and DHTML failed, yielding incorrectly captured input (e.g. frame names) or missing actions (e.g. clicks on Dojo tree nodes). However, for 1.0 web pages with little or no Javascript involved, it worked flawlessly.

At first glance, there are still some issues to be solved for testing arbitrary web applications, but the overall concept is promising and works well if Javascript is not critical to the execution of core functionality.

Leave a Comment

Dojo performance and parseWidgets

As much as I like the Dojo toolkit, its out-of-the-box performance leaves something to be desired. While the package system is very capable, the (synchronous) loading of missing widgets and classes via XmlHttpRequest is slow and usually misses the browser cache. This can be fixed by creating a custom Dojo build with all required files included in a single dojo.js file.

On a reasonably complex page another problem becomes obvious: the DOM parser Dojo employs to search for widgets in a HTML page seems to be rather slow. For example, on a page with several nested tables of about 40k this takes seconds on my machine, without a single Dojo widget actually being used on the page.

Apparently, the only feasible solution at this time is to set the parseWidgets init parameter to false and specify all Dojo widget IDs explicitly. For example,


var djConfig = { isDebug: false,
baseRelativePath: "/js/dojo/",
parseWidgets: false,
searchIds: ["dojoWidget1", "dojoWidget2"]
};

While not exactly user-friendly, at least this works without a noticeable impact on performance.

Leave a Comment

Sorting HTML Data in Dojo Tables

We learned the hard way that Dojo‘s SortableTable does not work too well with HTML data in its cells. It’s not sortable, and sometimes markup is discarded or ignored. Googling brought to light the FilteringTable, a clean rewrite with more capabilities and less quirks. It’s available in current 0.4 nightly builds and works pretty well. Its parameters are similar to the SortableTable widget, except that rowClass and alternateRowClass have not been implemented yet – so you have to use td and td.alt of your table class for alternating row styles.

Unfortunately the nightlies made something clear – initialization of a complete Dojo distribution is very slow. Importing a single widget class takes up to 3 seconds on a decent PC. Including all required widgets (about 3 or 4) into a single compressed dojo.js file improves initialization to about 300 ms, but it’s still noticeable and a major issue for a good user experience. I really do hope that Dojo initialization will be tuned considerably before 0.4 is released…

Comments (2)

JSF and Ajax: ajax4jsf

Assuming that the component model of JSF is pretty well suited for Ajax applications, I found it surprisingly hard to find an Ajax framework that

  • has native support for JSF and the JSF lifecycle (unlike generic frameworks like AjaxAnywhere),
  • requires no custom Javascript coding for basic event/update mechanisms, and that
  • supports existing components unaware of Ajax.

There is a proof-of-concept implementation of a very JSF-centric approach proposed by Jacob Hokoom that fully utilizes the JSF component tree in the jsf-extensions project. Very promising, but it seems to be in a very early stage and requires JSF RI 1.2.

An existing alternative is Ajax4jsf, a rather mature and capable Ajax filter created and maintained by the Exadel people. Usage is fool-proof: using the a4j tag library, you either attach Ajax behavior to Javascript events (e.g. onchange) of existing input elements, or you add command buttons that emit Ajax calls when clicked, instead of reloading the whole page. When an Ajax event occurs, the form surrounding the element is submitted, making server-side handling identical to that of a common post-back. Ajax4jsf tags accept a list of component IDs to be re-rendered when the Ajax call was processed, automagically updating independent regions of the page. You don’t even have to identify those regions manually, for example, if a datatable should be updated – pass its ID to a4j and it will be updated when the server response arrives.

My only gripe so far is performance – by default, every request is routed through a Tidy filter, even for non-Ajax pages. This can be disabled by setting the forceparser init parameter to false (in the web.xml filter definition), which will only tidy up Ajax responses.

Oh, and if you’re using Facelets: read the docs ;). Remove the Facelets view handler from your faces-config.xml and set the org.ajax4jsf.VIEW_HANDLERS context parameter in the web.xml instead.

Besides possible performance concerns, I believe ajax4jsf’s interface is pretty much perfect for ajaxifying JSF applications without special needs – that is, wiring client-side events to JSF beans and rendering partial updates of a page. I’m all for simple, straight-forward solutions that just work – which is also the reason I was slightly disappointed of Pro JSF and Ajax with its clumsy (but surely more flexible) mabon. I guess I just don’t want to write more client-side Javascript than absolutely necessary for a pleasing user experience.

Comments (5)

New in JavaScript 1.7

Over the last two years or so, JavaScript got a lot of attention due to the surge of client-side scripting. It turned out that a few tweaks to a previously rather dull-looking, but dynamic language made JavaScript much more attractive, adding (or promoting) concepts like object orientation, function pointers and extension of built-in types.

The success of the Mozilla project probably made a difference, since it provides free and standards-compliant implementations of JavaScript and DOM, making dynamic webapps much less of a hassle than they used to be. Recent builds include support for JavaScript 1.7, and the Mozilla developer center lists some quite interesting additions to the language. Most of them seem pretty familiar to Python or Ruby programmers, but it’s nice to have these features available on web browsers as well. Some of the features are:

  • Generator support: anything generating a list of objects is much nicer to implement using generators if you don’t want to return the whole result at once.
    function x() {
      var i = 0;
      while (true) {
        yield i++;
      }
    }

    yields any number of consecutive numbers that can be consumed via .next():

    var gen = x();
    for (var i = 0; i < 100; i++) {
      document.write(gen.next() + " ");
    }

    produces 100 consecutive numbers – without resorting to arrays for intermediate storage or callbacks.

  • Iterators provide a cleaner solution of the “for…in” construct that breaks when a library like prototype.js adds custom properties to built-in types.
  • Array comprehensions, a favourite Python construct of mine, have been added. They come in handy for generating arrays or projecting objects to arrays. For example, you could write
    var evens = [i for (i in range(0, 21)) if (i % 2 == 0)];

    where range(x, y) is a generator function. I guess it would be easy to provide a generator iterating over an array of objects, allowing to write something like

    var ids = [obj.ids for (obj in iterate(objects))];
  • More functional-style programming using let. Probably the biggest improvement for fans of functional programming, though I’m not exactly sure how useful this turns out to be.
  • Multiple-value returns reduces boilerplate code when a tuple instead of a single value is returned from a function. So it’s possible to write
    function x() {
      return [1,2]
    }
    
    [a, b] = x();

Of course, the real question is when and if the other browser vendors adopt JS 1.7 (or even 1.5) – until then, it’s probably most interesting for Firefox plugin developers.

Leave a Comment