How to start with new Layout/How to speed things up with Vaadin


I’m a developer with a problem :wink: Currently we’re close to an end on our project (using Vaadin) however…

we’re getting some trouble with displaying simple data in one of our views. (over 500 KB of data to display, and over 15K DOM elements after Vaadin is done with generating it… + lots, and lots and LOTS seconds before it’s done).

My task is to find out how i can make this as small and as fast as possible, so my first guess was to use some other layouts than those avaliable in standar Vaadin.

I used WeeLayout, DashLayout and CssLayout(default), compare is below:

- page size: 			990 KB
- DOM elements (SMALL): 1454
- DOM elements (BIG): 	15423
- page size: 			886 KB
- DOM elements (SMALL): 1434
- DOM elements (BIG): 	13799
- page size: 			938 KB
- DOM elements (SMALL): 1408 
- DOM elements (BIG): 	12163  

It didn’t work. So my other guess is to write my own Layout, can someone help me with this ? I even don’t know from what should i start.



Your case sounds rather exceptional. I don’t know what your data is like, but are you sure that you can’t break the display down using Table, paging, etc?

Putting data into a Label or CustomLayout as HTML is always the lightest way to render it. Remember that Vaadin is for building user interfaces - if the user doesn’t have to interact with the data, there’s not so much point in using Vaadin components.


My case is rather not usual :wink: i agree.

So here is the data. Entire app is made using Spring + Spring Security + Vaadin + Lucene. I don’t want to use any more frameworks so rewrite some code with Spring MVC is not possible. At least now.

We’ve got 3 views
: form, results and metric.

Form made with vaadin is OK.

Results and Metric are the problem.

  1. We’ve got a lot of data in metric. Generating time is more then 10s. The amount of data is huge and so is the HTML. I wan’t to rewrite it so the generation time would be MUCH faster.
  2. The data is generated in blocks, every one is made using Vaadin.

So the best way (from what i see) is to use CustomLayout as HTML, but how ? where can i find info/example (i’m starting googling it now ;])

You can create a CustomLayout
from a stream
. The example uses a ByteArrayInputStream, but you could use a more dynamic stream as well.

Hi Lukasz,

why don’t you try the Vaadin’s Table ? It’s lazy load feature is designed right to display very huge lists (tens thousands or rows) with no browser overhead. It seems, your metric data seems to be good candidate for this (but I might be wrong, of course).

this is exactly what i wanted ! Thank you !

Table isn’t an option here. We’ve got quite complicated metric layout…