Vaadin Client Side Application Understanding

Question

I'm new to vaadin framework and was going through the Vaadin Book but was not to able understand the flow of client side Vaadin application. Would be very thankful if anyone explains the working of the Vaadin Client side application. As vaadin offers two development models i.e. Client side and Server Side.

Answer 1

The other answer is not exactly accurate or thorough. So I'll add my own take on the subject.

Client-Side, Schmlient-Side

The main point of Vaadin is that as a programmer we think in terms similar to building a desktop app. We do not really worry about client-side versus server-side of the app. We think in terms of a window being open (a UI instance), with forms (Layouts) and fields & buttons (Components).

Pure Java

We write all those UI, Layout, and Component objects using pure Java. The underlying Vaadin framework leverages the Google Web Toolkit (GWT) to convert the user-interface portions of your Java code into JavaScript. That JavaScript code is transparently delivered to the web browser at runtime. So JavaScript is used to draw a button and field on the screen and used to detect when the user clicks that button or types in that field.

App Lives On The Server

Meanwhile, your business logic remains in pure Java on the server side. The fact that the user clicked a button causes some of your Java code to execute on the server. Same with typing in the field; the typed text is automatically forwarded to your Java code on the server. From the perspective of us, the Java Vaadin app developer, the entire app seems to be running in pure Java. The Vaadin framework automatically handles this back-and-forth communication of:

[ JavaScript/client-side ⇆ Java/server-side ].

So, doing a web app with Vaadin is not like doing a web app at all. For the most part, the Vaadin developer need not concern herself with HTTP, HTML, CSS, DOM, JavaScript/ECMAScript, Servlet/JSP, and such. All of those web technologies are indeed in play with a Vaadin app, but Vaadin handles all that for us transparently, almost magically. We write only in pure Java to build very nice "desktop"-style apps in Vaadin.

All your business logic, Java business objects, SQL and database connections, and such live only on the server. The web browser contains only enough data and JavaScript to show the currently intended user interface. I think of this as modern reincarnation of the old X Window System. (Ignore that last comment is you are too young to remember when MTV played music videos.)

On the web browser, we execute only JavaScript. Our users need not install Java on their computer. No Java Applet involved.

Vaadin Is Not "Yet Another Web App Framework"

This may sound hard-to-believe or difficult to grasp. That is because the architecture of Vaadin is brilliantly different. Vaadin is certainly not "yet another HTML-templating web app framework". Vaadin is nearly unique in its approach; the only similarly architected web-app development framework I know of is Xojo Web Edition.

Ignore "client-side" Talk When Learning Vaadin

The Vaadin team has been working on allowing a Vaadin app to work offline, not connected to the Java server. But this is bleeding-edge R&D work, and not the main purpose or use case of Vaadin. When you read of "client-side Vaadin" it may be in that context.

Another context that may have prompted your Question is the Client-Side Applications chapter of the Book of Vaadin. Basically this about the newest versions of Vaadin adding support for advanced developers that want to take more control of what is happening in JavaScript on the client’s web browser. But I consider that a distraction from the main purpose that attracts people to Vaadin in the first place: Not caring about JavaScript on the client’s web browser. So I suggest skipping that chapter when learning Vaadin.

Or the context may refer to the use of GWT to render the JavaScript-based representation of your user-interface on the web browser. You can ignore this context when learning Vaadin as it only applies if building your own user-interface widgets to be an add-on to Vaadin’s built-in stock of widgets.

Many many of the classes listed in the Vaadin API doc are these GWT-related client-side classes that you should ignore while learning Vaadin. For many tools, browsing the API doc is a good way to learn. But for Vaadin, not the case. In day-to-day work, we use only a tiny fraction of the classes listed. I suggest instead focusing on the Book of Vaadin, the Demo site, the Tutorial, the Forums, and StackOverflow.

Answer 2

The client-side application is nothing but a JavaScript application that the browser downloads & executes. This JavaScript application is written in Java and compiled to JavaScript by the Google Web Toolkit (GWT) compiler that is built into the Vaadin libraries used by your IDE.

This application may or may not interact with a Java application that is running on the server. If it does not, then its a Client-side application. If it does, its a Server-side application.

I hope it helps.