Replacing nano.js in Gyroscope May 20, 2014

Yes you are reading it right. This article discusses the technical steps necessary to replace the default JavaScript library – nano.js, with another, say jQuery.

Why would anyone want to replace nano.js? Well, nobody would. Not by a far stretch of imagination. However, the thought process benefits our readers in three ways:

1. A well-built system should have replaceable components. Replacing one critical component should be viable. Let's see if Gyroscope passes the test.

2. In what ways are nano.js more suitable than other JavaScript libraries? What do we need to add for the replacement to work?

3. What are the differences between Gyroscope-bundled nano.js and the stand-alone download?

Basic LCHH

Gyroscope uses the LCHH architecture – a AJAX pattern that is optimized for execution and maintenance. The pathway from client-side Handler to server-side Handler is an XMLHTTPRequest call. The server response then replaces the Content of a designated Loader.

The technical requirement is low in this case. Any adequate JavaScript library with AJAX capability can do the job. For example, ajxpgn in nano.js can be written as the following in jQuery:



The ajxpgn calls in Gyroscope tab functions can be replaced with the above code.

POST or GET

"POST" can be the HTTP method for most of the AJAX requests, with or without data payload. There is one exception: Gyroscope loads JavaScript modules on demand, via the ajax function, which in turn calls ajxb, a synchronous variant of ajxpgn. The JavaScript file is a static file. POSTing to a static file would fail on a default NGINX configuration. nano.js automatically switches to GET when there is no data payload.

Reload Params

The Gyroscope version of nano.js has the extra reajxpgn, which reloads the container with previously set parameters. When ajxpgn sends a request, the call parameters are stored on the loader's DOM node. This feature is necessary for the List View to remember the lookup context.

Slow Loading Indicator

When a request takes too long, nano.js displays a waiting animation. This is different from standard wait indicators as it only shows after enough time has passed.

In-Flight Cancellation

Parallel AJAX calls do not guarantee in-order delivery. A slow response from an earlier request may override the display of a later, but more promptly returned request. nano.js automatically clears any prior calls that are "in the way" and cancels the in-flight requests on the client side. The server receives and processes the requests in the order of sending; the client displays the response also in the order of requests.

So, for a JavaScript like jQuery to function in Gyroscope, one has to implement the above features, namely automatic HTTP method selection, query parameter replay, deferred load indicator and in-flight callback cancellation.