Introduce JSCEX – A powerful Javascript library
To evaluate the possibility of using pure HTML for our next UI, I started to learn Javascript, Jquery and relative technology to build a prototype, which is a HTML single paged application.
There is a test mode for testing purpose in my prototype. Within test mode, all the Ajax requests are mocked with local hardcoded JSON data. The following function is called when the user clicks the status icon to flip the status. If isTestMode is true, the code just sets the instance to the new status, and triggers the finish event. Otherwise, the code sends AJAX request to server, and change the status in the AJAX callback.
this.changeStatus = function (alertInstance, newStatus) {
if (viewModel.isTestMode) {
alertInstance.Status(newStatus);
$(viewModel).trigger("updateStatusFinished", [true, alertInstance, newStatus]);
return;
}
var idarray = new Array(alertInstance.Id);
var idarray_json = JSON.stringify(idarray);
jQuery.ajax({
url: '/Services/AlertServiceRest.svc/SetAlertStatus?newStatus=' + newStatus,
…
success: function () {
alertInstance.Status(newStatus);
$(viewModel).trigger("updateStatusFinished", [true, alertInstance, newStatus]);
},
}
The code works perfectly fine, with only one issue:
In non-test mode, there is a delay caused by the AJAX call. To reflect the delay in UI, my code shows a spin icon. However, if it is in test mode, above code sets the new status immediately. I never have a change to see if the spin icon shows correctly in test mode.
To simulate the delay, the usual way is to register a timer call back. You cannot just add a sleep call between the lines because that just freezes the whole application.
In fact, the tricks with timer callback are used everywhere in Javascript, especially in animations. The tricks are error prone, difficult to read, and harm to code style. There is no simple workaround, until JSCEX comes out.
JSCEX is a powerful Javascript library. With JSCEX, I can just write my code to simulate the delay with the following:
var testAlertChange = function (alertInstance, newStatus) {
$await(Jscex.Async.sleep(1000));
alertInstance.Status(newStatus);
$(viewModel).trigger("updateStatusFinished", [true, alertInstance, newStatus]);
}
this.changeStatus = function (alertInstance, newStatus) {
if (viewModel.isTestMode) {
var testAlertChangeAsync = eval(Jscex.compile("async", testAlertChange));
testAlertChangeAsync(alertInstance,newStatus).start();
return;
}
var idarray = new Array(alertInstance.Id);
var idarray_json = JSON.stringify(idarray);
jQuery.ajax({
url: '/Services/AlertServiceRest.svc/SetAlertStatus?newStatus=' + newStatus,
No callback, no timer, direct sleep call, super clean!
JSCEX is super easy to use. To find out how the magic happens, just click: