Performance is a key feature of modern web applications. It is a mountain you have to climb to win your customer’s heart, but sometimes its top remains unreachable due to heavy tasks the application has to perform on the client side.
Take, for instance, Webix Pivot table JS widget. It does a hard job of calculating and aggregating data and may leave the UI unresponsive if the data is too big. Fortunately, from version 4.2 the widget comes supplied with an HTML5 Web Worker, which takes all the data processing into a separate thread.
Why Web Workers?
Javascript single-threaded nature presupposes a step-by-step order of commands’ execution. Like in a supermarket, each new command has to stand in a queue patiently waiting until the preceding tasks are accomplished. If a task takes a long time, other tasks (which may include the ones processing user actions) will not execute until it finishes. At this moment user interface is blocked, which is far from brilliant performance, eh?
HTML5 Web Worker mechanism allows spawning background scripts for such laborious tasks. These scripts, called web workers, run in their own threads, separate from the main execution thread of the application. At the same, time in case of several web workers, their execution threads are separated from each other. Such concurrency means that UI always stays performant, fresh and ready to respond to user actions.
Switching on a web worker for Pivot
Starting from version 4.2 JavaScript framework has added a web worker script for one of its most “hard-working” widgets, Pivot. The script takes all the data aggregation to the background and can be included on demand.
The script code is located in the package in the “codebase” folder. To use it with a widget instance, you need to set a path to it in the the configuration object:
view:"pivot",
webWorker:"../../codebase/pivot.worker.js"
});
From now on, the widget works in the background and is only painted in a browser tab!
Each time users reset the structure of the widget (add filters, arrange columns), the web worker comes into action. You can easily control the moment it starts and ends executing the scripts with the related events: onWebWorkerStart and onWebWorkerEnd.
Within the event handler functions you can add some UI indicators of the operation being handled:
$$("pivot").attachEvent("onWebWorkerStart", function(){
this.showProgress();
});
$$("pivot").attachEvent("onWebWorkerEnd", function(){
this.hideProgress();
});
In the code above, the event handlers are responsible for showing and hiding the progress icon respectively.
Save your app from freezing up
It’s a little bit out of scope of this article, but together with a web worker in version 4.2 library added another handy feature to the Pivot widget. If the processing takes too much time with the current configuration, your users no longer need to wait until the browser crashes.
You can switch off the heavy operation if its execution takes more time than you accept by throwing an error within the related ping property function:
view:"pivot"
ping:function(start){
var now = (new Date()).valueOf();
//break if processing is longer than 3 seconds
if (now - start > 3*1000){
alert("Too complex parameters, aborting");
throw new Error("Aborting...");
}
}
});
This option can be used regardless of whether a web worker is included into this Pivot object or not.
Conclusion
As you can see, HTML5 Web Workers opens a way to a multi-threaded architecture of the application, which enhances user experience by clearing the main application thread from heavy-weight tasks.
In general, developing web applications is like a breathtaking game where you have to constantly pursue a better solution, and our team is always eager to help you. For instance, we have recently discussed a Webix way to overcome Javascript loose variable typing. To learn about strict types for library widgets, follow the related Using Webix with TypeScript article in our blog.
Pivot is a complex widget of the UI library, which is distributed under the commercial license and can be included into Webix package. You can download Pivot to evaluate the widget.
