Vaadin performance with about 100k components

Vaadin 6 / 7 / 8
1

Hi,
there’s the requirement to show a kind of grid containing about 100.000 items / rectangles in a 100x100 rectangle (EDIT: this is the maximun, but not a fixed size and may vary, e.g. it could be also 77x77, 61x53, …). Each of the item should contain some data e.g. such as a tooltip, text, background color. Item data can change “on the fly” and the UI should not need too long to refresh and build up the first time.
Additional nice to have features include zooming and scaling when the browser windows is resized.
Do any of you have experience with so many components? I thought of using CssLayouts with CSS flexbox, but this seems to take very long to render. I so not have much experience with JavaScript but maybe this could bring some advantages regarding performance (using SVG looks promising)?!

Any thoughts/comments are welcome.

Thanks,
Klaus

2

Maybe the Grid is not the best component for the job but rather build the 100x100 cells using plain divs and flexbox in plain HTML and embed it in the Vaadin application with a Custom Layout (
https://vaadin.com/docs/-/part/framework/layout/layout-customlayout.html
)?

3

I forgot to mention that 100x100 is not a fixed but probably the maximum size. The actual size may vary, e.g. it can be 77x77, 61x53, 32x32…

4

The issue with that many components is that the actual data sent from the server is huge, as every component state needs to be sent separately. Then there is the Client-side engine of Vaadin that has to position 100 000 components using JS. If it were me, I’d make this a custom component (layout, even). There really isn’t a good way to do it with base vaadin components.

I’d also look into rendering the internals dynamically when the user scrolls; rendering all components isn’t necessary if they aren’t visible to the user.