Early impressions & how to emit clean markup?

Vaadin 6 / 7 / 8
1

I have been using/evaluating Vaadin for about 4 weeks and wanted to provide my feedback/impressions and ask a question.

I stumbled on Vaadin by accident (via GWT): here in Australia almost no one knows about, talks about or uses Vaadin. Ive used Wicket before in two large commercial projects, so the general Vaadin approach was already fairly familiar (and agreeable) to me.

After spending about 4 weeks building a small webapp with a Scala/Vaadin/App-Engine/Objectify stack, I reached following impressions:

Pro: Everyone talks about how the docs are good (because they are!), but what really impressed me about Vaadin was the software quality. Everything basically works as advertised, and that’s a rare attribute in software. In most things, it quickly won my trust and respect, and I think deserves to be more widely known.

Con: There is one thing about Vaadin 6.8 that I just couldn’t stomach, to the point I was going to give up on Vaadin: the amount of noise it emits into the markup. I found my pages were drowning in layers of divs and style tags. Not only I couldn’t understand what their design intent was, but I couldn’t find anyway to prevent their generation, beyond some improvement by using CCSLayout.

In contrast, Wicket can generate very economical, efficient markup, and allows a high degree of control over what is generated and how it is styled.

I read about the Vaadin 7 goals, and I thought, before I walk away, why don’t see if I can get my app ported to Vaadin 7 Alpha 3. and have a look at the markup it emits? That took about an hour to do, and despite being an “alpha” release, again everything basically worked correctly.

I was pleased by the reduction I saw in both markup volume and complexity. As a “Web/CSS- literate” dev, I much prefer the new “hands off” approach to styling that’s possible in Vaadin 7. Well done for seeing where your main problem was, and targeting it in the 7 release.

Now to get to my question: why is there no container in Vaadin that just creates ~one~ simple div?

Even in 7, every CSSLayout container I create ends up creating 3 nested-divs, with different classes on each. Why is this necessary? Sometimes, less is more.

2

I have in fact been talking to the devs about switching CssLayout’s three divs into just one, and it is in the plans for Vaadin 7 as far as I know. Creating the same structure as what CssLayout has now would be easy as you would just put three of them inside each others. I won’t stop bugging them before they make the change. :slight_smile:

Vaadin 7 is more about changing core things than modifying the components. You can see in the wiki articles what the big things. This means however that the DOM won’t be that much leaner when 7.0 is released, but it means that it will be possible to make the changes needed in future versions like 7.1, 7.2. Without the core changes, as well as the drop of IE 6 and 7 support, those future changes wouldn’t be possible.

The “bloated” DOM is pretty much there to make everything “just work”. Vaadin’s key selling point is that you can use it with just Java, and that requires a quite complex DOM and some semi-magic calculations. With the drop of IE6/7, Css2 and 3 can be more leveraged, taking us back to more simple structure and giving us back the control over the CSS used.