Currently, I am in the process of developing a straightforward Vaadin Extension using javascript where I subclass AbstractJavaScriptExtension. The main objective is to trigger a method call on the server side that will involve tasks such as loading data and updating the UI of the component. My aim is to have individual asynchronous requests for each component so that potentially lengthy database or webservice calls can run concurrently at the server side.
Given that continuous component updates are not required, employing Vaadin Push seems unnecessary. Instead, I prefer utilizing traditional XHR methods.
To achieve this, I have incorporated a javascript trigger function within my extension class as follows:
addFunction("trigger", jsonArray -> command.trigger());
(expressed in Java 8 syntax, where trigger() represents a method in a Functional Interface)
In testing, I initiated this trigger immediately in my javascript connector like so:
window.com_example_AsyncTrigger = function () {
this.trigger();
}
I created a mock component that mimics slow loading by using Thread.sleep(), crafting three instances with varying delays (10 seconds, 6 seconds, and 2 seconds), while also logging the start and end timestamps of the loading process.
Subsequently, I expanded three layouts with my extension to integrate each component when its respective trigger is activated.
Although all three triggers were successfully triggered, they operated within a unified request framework (indicated by the fact that they were executed on a single server thread). Consequently, after approximately 18 seconds, all three components were updated simultaneously, contrasting my expectation of a sequential display (2-second component first, followed by the 6-second component, and lastly the 10-second component) within roughly 10 seconds.
This led me to deduce that Vaadin condensed the function calls made during the creation of connection wrappers and issued the server side methods under a singular request. Thus, I decided to modify my javascript connector implementation to asynchronously invoke the client-side trigger() function:
window.com_example_AsyncTrigger = function () {
var self = this;
setTimeout(function() { self.trigger();}, 0);
}
Consequently, these triggers commenced firing in separate requests, evident from distinct worker thread names in the logs. However, they continued to execute sequentially as opposed to in parallel. Although the calls to self.trigger() occurred rapidly one after another, the actual XHR requests did not operate simultaneously. Each subsequent request only began once the prior one concluded.
Why is this occurring, and what steps can I take to overcome this limitation?