This chapter gives a brief introduction to software development with Vaadin. We also try to give some insight about the design philosophy behind Vaadin and its history.

The core piece of the Vaadin Framework is the Java library that is designed to make creation and maintenance of high quality web-based user interfaces easy. The key idea in the server-driven programming model of Vaadin is that it lets you forget the web and program user interfaces much like you would program any Java desktop application with conventional toolkits such as AWT, Swing, or SWT. But easier.

While traditional web programming is a fun way to spend your time learning new web technologies, you probably want to be productive and concentrate on the application logic. With the server-driven programming model, Vaadin takes care of managing the user interface in the browser and AJAX communications between the browser and the server. With the Vaadin approach, you do not need to learn and debug browser technologies, such as HTML or JavaScript.


Figure 1.1, “General Architecture of Vaadin” illustrates the basic architecture of web applications made with Vaadin. Vaadin consists of the server-side framework and a client-side engine that runs in the browser as a JavaScript program, rendering the user interface and delivering user interaction to the server. The application runs as a Java Servlet session in a Java application server.

Because HTML, JavaScript, and other browser technologies are essentially invisible to the application logic, you can think of the web browser as only a thin client platform. A thin client displays the user interface and communicates user events to the server at a low level. The control logic of the user interface runs on a Java-based web server, together with your business logic. By contrast, a normal client-server architecture with a dedicated client application would include a lot of application specific communications between the client and the server. Essentially removing the user interface tier from the application architecture makes our approach a very effective one.

As the Client-Side Engine is executed as JavaScript in the browser, no browser plugins are needed for using applications made with Vaadin. This gives it a sharp edge over frameworks based on Flash, Java Applets, or other plugins. Vaadin relies on the support of GWT for a wide range of browsers, so that the developer doesn't need to worry about browser support.

Behind the server-driven development model, Vaadin makes the best use of AJAX (Asynchronous JavaScript and XML) techniques that make it possible to create Rich Internet Applications (RIA) that are as responsive and interactive as desktop applications. If you're a newcomer to AJAX, see Section 3.2.1, “AJAX” to find out what it is and how AJAX applications differ from traditional web applications.

Hidden well under the hood, Vaadin uses GWT, the Google Web Toolkit, for rendering the user interface in the browser. GWT programs are written in Java, but compiled into JavaScript, thus freeing the developer from learning JavaScript and other browser technologies. GWT is ideal for implementing advanced user interface components (or widgets in GWT terminology) and interaction logic in the browser, while Vaadin handles the actual application logic in the server. Vaadin is designed to be extensible, and you can indeed use any 3rd-party GWT components easily, in addition to the component repertoire offered in Vaadin. The use of GWT also means that all the code you need to write is pure Java.

Vaadin Framework defines a clear separation between user interface presentation and logic and allows you to develop them separately. Our approach to this is themes, which dictate the visual appearance of applications. Themes control the appearance of the user interfaces using CSS and (optional) HTML page templates. As Vaadin provides excellent default themes, you do not usually need to make much customization, but you can if you need to. For more about themes, see Chapter 8, Themes.

We hope that this is enough about the basic architecture and features of Vaadin for now. You can read more about it later in Chapter 3, Architecture, or jump straight to more practical things in Chapter 4, Writing a Web Application.