Hello,
I am trying to use a DataTable’s DataCollection object along with real-time data updates via web sockets. The data comes in fast, and I would like to update individual datatable cells as fast and as smoothly as possible.
What I am noticing is even a relatively small amount of live data changes will choke the browser and affect scrolling. Even the Chrome tab will not close until the browser catches up processing the data.
What are some tricks I can use to ensure the smoothest possible live-updates in a datatable from a websocket connection?
Thanks!
cells as fast and as smoothly as possible.
Which rate of updates are you expecting? Are you using a web-socket proxy or a custom web-socket handling code? In the second case which code you are using to update the data in the datatable?
Q: Which rate of updates are you expecting?
A: It is undefined. New data comes in as it available.
Q: Are you using a web-socket proxy or a custom web-socket handling code?
I am using Firebase’s websocket implementation:
https://firebase.google.com/docs/firestore/query-data/listen
Q: In the second case which code you are using to update the data in the datatable?
This is where I am not sure what is considered the fastest way to do this. I can update the cell in the DataCollection then sync it to the datatable, or I can directly update the cell in the datatable. Since I do not know the frequency at which new data comes in, I just update the data per cell instead of in any kind of batch.
I look at other real-time sites like https://www.gdax.com/trade/BCH-BTC and their site is super smooth. I want the same performance.
A: It is undefined. New data comes in as it available.
Still, you probably have some rough estimations. For example, if we are talking 1-5 updates per second, then it can be handled with default settings. If we are talking about 10-100 updates per second, you will need to add an extra job batching layer.
Since I do not know the frequency at which new data comes in, I just update the data per cell instead of in any kind of batch.
The sync will be the slowest API probably. The updateItem API is the recommended way. If you are issuing multiple updateCell commands, the component can batch them into single refresh automatically.
I look at other real-time sites like https://www.gdax.com/trade/BCH-BTC
This site uses canvas-grid, which provides the best performance at cost of accessibility
Anyway, I will try to create a demo project with the similar scenario.
Yes this would be an interesting test. To see how much data a DataTable would accept in a live-update scenario and still have a responsive UI.
Typical scenarios for this would be sports scores (like ScoresAndOdds.com) or stock/crypto updates (like GDAX)
Speaking of “job batching layer”… what do you recommend? Are there any good job batching JavaScript libraries? Or I could roll my own.