How does Vaadin work?

Question

Can anybody explain to me how Vaadin's server side Java components work? They seem to do a sync between server-side state with a client-side javascript engine called a "widgetset".

Does anybody have a more detailed explanation of Vaadin's internals? I have been trying to explain it to my coworkers and am at a loss for words.

Answer 1

Basically Vaadin runs your UI code on the server and uses the browser as a "thin client" (the widgetset) to create and update the DOM. All server-client communication is automated and taken care of by Vaadin. The end result in the browser is just a plain HTML5 application as far as the browser is concerned, no plugins are needed and it will work across different devices.

Going a bit deeper, each component in the framework has both a server side and a browser implementation. Both share a state that is maintained and communicated by the framework. As all communication is taken care of by the framework, it is able to optimize the transport quite a bit by only sending diffs and skip sending defaults etc. Also, since the widgetset contains the JS implementation of the browser component, no HTML templates are generated on the server and sent over, only the actual component state which is much more light weight.

Here is a more in-depth explanation from the docs: https://vaadin.com/docs/-/part/framework/introduction/intro-overview.html