I am currently working on implementing a JavaScript-based component for Vaadin that will be responsible for displaying and updating a large data set. To achieve this, I am extending AbstractJavaScriptComponent.
My goal is to keep the JavaScript side as simplistic as possible by delegating user interactions to the server through RPC calls, which then updates the shared state. Subsequently, the onStateChange function of the JS connector wrapper is triggered with the updated state, leading to the necessary DOM updates.
However, I have encountered two main challenges:
- I do not want to transfer the entire data set each time a small portion is modified.
- I aim to avoid completely rebuilding the UI every time an update occurs.
To address the second issue, I am keeping track of the previous state and comparing it to identify changes, allowing me to make targeted DOM updates when needed. However, the first problem still persists.
Should I abandon Vaadin's shared state mechanism in favor of exclusively using RPC for relaying state changes?
Update: After some testing, it seems that Vaadin's shared state approach lacks efficiency:
Whenever the component invokes getState() to update a property within the state object (even without making any actual changes), the entire state object is transmitted. As far as I can tell, the only way to circumvent this is to forego the shared state method and opt for RPC calls to communicate specific state alterations to the client.
The RPC strategy poses its own challenges that must be addressed; for instance, if you modify a value multiple times within one request/response cycle, sending multiple RPC calls is not ideal. Instead, only the final value should be transmitted akin to how the shared state mechanism responds with only the end state. One possible solution is to maintain dirty flags for individual state components or store a copy of the previous state for comparison. Nonetheless, triggering the RPC call at the culmination of request handling remains a concern. How can this be achieved?
Any insights or suggestions on this matter are greatly appreciated!
Update 2:
Vaadin 8 resolves the fundamental issue by transmitting only the altered state properties. Additionally, it no longer triggers onStateChange() on the JS connector when solely executing an RPC call (without modifying any state).