After reading the documentation for the very first time and navigating through the forum, one question remains unanswered in my mind. It is related to how Vaadin renders the content. I understand there is, in basically all cases, one server component to each client-side widget. Also, I believe the basis for the Vaadin’s philosophy is that, even if it is possible to use it differently, the way it was first designed focuses on server-side development as the basis. Am I correct?
Then the discussion about server-side vs. client-side rendering arises.
In Vaadin, the UI is always rendered in the server side (similar to JSF, where a component tree is created/updated and managed) or data is sent from server to client and the responsibility of building the interface is delegated to the client side engine?
What I am thinking is that it would be good if the widgets in the client side library are implemented in such a way that, based on what their server-side counterparts send, the engine (or even the widgets themselves, one by one) is smart enough to build the UI entirely in the client side if I want to.
Can you please help me on understanding the rendering mechanism in Vaadin? I thank you all in advance for the attention and, please, just le me know if I may put it more clear here.
The goal of this framework is to facilitiate developers in creating UI elements and controlling everything from server side, The code (JS,CSS,HTML) for widgets is created on server and then sent to client. The client then executes the JS code and renders the UI. For your question Note that whenever a control is created on Server its state is saved in session and whenever a post back occurs (Ajax Request etc) the previously saved stated is loaded into memory again. Then this state is updated with client submitted values (viewstate). Then events are dispatched and state is saved again on server and then incremental javascript code is sent to client. The client browser then executes this code using Eval.
You can create controls dynamically on Server side but not on CLIENT. May be you are thinking of creating a new button without going to server. The server does not know about this button. However this feature can be implemeted but it will be a big effort and also a security risk. Javascript code can be easily compromised.
So if we decide today to implement this feature then first we need to create a Javascript API to create controls on client side. This api will hold information about new controls created on Client browser and this info will be sent to server on next postback.
So it is more a less close to what I was thinking … basically every single action in the client side means client-server communication, components states are controlled in server side, but content is rendered by the client and there is no component tree being kept in the server side, in memory, like JSF operates.
I was asking it because I was initially interested on using GWT Highcharts in a Vaadin application, but I believe it is not possible. I know that Vaadin Charts Add-On is also based on Highcharts (JS), but my idea was to use this powerful API without having to pay for it, and Vaadin approach is based on a commercial license. Then, I was looking for more details on how server and client sides behave in the Vaadin architecture. Now it is clear to me, you somehow confirmed much that I was already thinking of.