Table of contents

Introduction

Vaadin Architecture

2.1.

🍁 The User Interface

2.2.

🍁 Widgets and User Interface Components

2.3.

🍁 Engine for Clients

2.4.

🍁 Vaadin Servlet

2.5.

🍁 Themes

2.6.

🍁 Events

2.7.

🍁 Server Push

2.8.

🍁 Data Binding

2.9.

🍁 Client-Side Applications

2.10.

🍁 Backend

Client-Side Engine

Listeners and Events

Frequently Asked Quetions

5.1.

Vaadin communicates with the server and the browser in what way?

5.2.

Can the Hilla and Flow Frameworks coexist in the same application?

5.3.

Can I incorporate third-party components into Vaadin apps?

Conclusion

Last Updated: Mar 27, 2024

Vaadin Architecture

Q: Vaadin communicates with the server and the browser in what way?

Vadin Flow The state is saved on the server and is displayed in the browser. Vaadin sends XHR (Ajax) requests between the browser and the server by default. If you require two-way communication or lower latency, you can use a WebSocket instead. Hilla The state is kept on the client. You connect to the server using asynchronous TypeScript methods that wrap a REST call to provide full-stack type information.

Author Prerna Tiwari

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Vaadin is a web development framework that is open source. It includes built-in support for Java scripts and AJAX. You can also use Google Web Toolkit to incorporate external features. Vaadin saves developers time by rendering rich content in the browser without using markup files. The Vaadin framework will generate all markups and supporting files at runtime. Vaadin is a programming language that supports both server and client-side development.

Vaadin Architecture

Vaadin Framework offers two development models for web applications: client-side (browser) and server-side. The server-driven development model is more powerful, allowing application development to take place entirely on the server side by utilizing an AJAX-based Vaadin Client-Side Engine that renders the user interface in the browser.

The client-side model enables the creation of Java widgets and applications, which are then compiled to JavaScript and executed in the browser. The two models can share UI widgets, themes, and backend code and services and can be easily combined.

🔥 In a running situation when the page with the client-side code (engine or application) has been initially loaded in the browser, the Vaadin runtime architecture provides a basic illustration of the client-side and server-side communications.

🔥 Vaadin Framework comprises a server-side API, a client-side API, a slew of user interface components/widgets on both sides, themes for controlling the appearance, and a data model that allows the server-side components to be bound directly to data. It includes the Vaadin Compiler for client-side development, which enables you to compile Java to JavaScript.

🔥 A server-side Vaadin application serves HTTP requests as a servlet in a Java web server. The servlet class is typically VaadinServlet. The servlet receives client requests and interprets them as user session events. Events are associated with UI components and delivered to the application's event listeners.

🔥 If the UI logic modifies the server-side user interface components, the servlet generates a response that renders them in the web browser. The answers are received by the client-side engine running in the browser, which uses them to make necessary changes to the page in the browser.

The following are the major components of the server-driven development architecture and their functions:

🍁 The User Interface

Vaadin applications provide a user interface to interact with the business logic and data. The UI is implemented technically as a UI class that extends com.vaadin.ui.UI. Its primary responsibility is constructing the initial user interface from UI components and configuring event listeners to handle user input. The user interface can then be loaded into the browser via a URL or embedded into any HTML page.

Please remember that the term "UI" refers to both the general UI concept and the technical UI class concept throughout this book.

🍁 Widgets and User Interface Components

A Vaadin application's user interface comprises components that the application creates and arranges. Each server-side component has a client-side counterpart, a widget, with which the user interacts when rendered in the browser. Client-side applications can also make use of the client-side widgets. These events are relayed to the application logic by the server-side components. A data source can be bound to field components with a value the user can view or edit.

🍁 Engine for Clients

Vaadin's Client-Side Engine manages the rendering of the UI in the web browser by utilizing various client-side widgets, which are the server-side counterparts. It sends user interaction to the server and then renders the changes in the UI again. Asynchronous HTTP or HTTPS requests are used for communication.

🍁 Vaadin Servlet

Server-side Vaadin applications use the Java Servlet API. The Vaadin servlet, or the VaadinServlet class, receives requests from various clients and determines which user session they belong to. They do this by tracking the sessions with cookies and delegating the requests to the appropriate sessions. By extending the Vaadin servlet, you can personalize it.

🍁 Themes

Vaadin distinguishes between the user interface's appearance and its component structure. While the UI logic is implemented in Java code, the presentation is defined in CSS or Sass themes. Vaadin comes with several pre-installed themes. In addition to style sheets, user themes can include HTML templates that define custom layouts and other resources, such as fonts and images.

🍁 Events

Interaction with user interface components generates events, which are processed on the client side by the widgets before being routed to the event listeners defined in the application via the HTTP server, Vaadin servlet, and the user interface components.

🍁 Server Push

Along with the event-driven programming model, Vaadin supports server push, in which User Interface changes are pushed from the server to the client directly without needing a client request or an event. This allows other threads and UIs to update UIs immediately without waiting for a request.

🍁 Data Binding

Vaadin provides a data binding API in addition to the user interface model for associating data presented in field components such as selection components, text fields, and checkboxes with a data source. Using data binding, user interface components can directly update application data, often without the need for control code. You can, for example, bind a data grid component to a backend query response.

🍁 Client-Side Applications

Vaadin supports client-side application modules, which run in the browser, and server-side web applications. Client-side modules have access to the same widgets, themes, and backend services as server-side Vaadin applications. They are helpful when you need highly responsive UI logic, such as for games or serving a large number of clients with potentially stateless server-side code, as well as for a variety of other purposes, such as providing an offline mode for server-side applications.

🍁 Backend

Vaadin is designed to build user interfaces, and other application layers are kept separate from the User Interface. The business logic runs in the same servlet as the User Interface code, or it can be separated by a Java API, EJBs, or distributed to a remote backend service. The data is typically distributed to a database management system and accessed via a persistence solution such as JPA.

Client-Side Engine

The Vaadin Client-Side Engine renders the user interface of a server-side Vaadin application in the browser. When the page with the Vaadin User Interface is opened, it is loaded in the browser. On the client side, widgets (as they are known in GWT) are used to render the server-side UI components. Vaadin Client-Side Engine depicts the client-side engine.

There are two types of built-in widgets in the client-side framework:

🔥 GWT widgets

🔥 Vaadin-specific widgets.

The two widget collections overlap significantly, with Vaadin widgets offering slightly different features than GWT widgets. Furthermore, many add-on widgets and their server-side counterparts are available for download and installation. You can even create your widgets.

The ApplicationConnection handles widget rendering as well as communication to the server-side. Connectors are used to connect widgets to their server-side counterparts. There is one connector for each widget that has a server-side counterpart. The framework handles component state serialization transparently and includes an RPC mechanism between the two sides.

Listeners and Events

🔥 For handling user interaction, the Vaadin Framework provides an event-driven programming model. The application must be informed when a user interacts with the user interface, such as clicking a button or selecting an item.

🔥 Many Java-based user interface frameworks use the Event-Listener pattern to communicate user input to the application logic.The Event-Listener pattern is also known as the Observer design pattern) Vaadin Framework does as well.

🔥 The design pattern consists of two types of elements: an object that generates ("fires" or "emits") events and many listeners that detect the events. The object sends a notification to all listeners when such an event happens. In most cases, there is only one listener.

🔥 Events can serve a variety of functions. The specific purpose of events in the Vaadin Framework is to handle user interaction in a user interface.

🔥 Session management may necessitate special events such as time-out, where the event lacks user interaction. A time-out is a timed or scheduled event in which an event occurs at a specific time and date or after a certain amount of time has passed.

🔥 To receive a specific type of event, an application must register a listener object with the event source. The listeners are added to the components using the add*Listener() method (with a method name specific to the listener).

We assign a button click listener in the following code using a lambda expression.

final Button button = new Button("Push it!");


button.addClickListener(event ->
  button.setCaption("You pushed it!"));

A Button Class Diagram Click Listener is an example of an application-specific class that inherits the Button. To listen for button click events, use the ClickListener interface. The listener class must be instantiated and registered with addClickListener in the application (). When an event occurs, an event object, in this case, a Button, is instantiated. ClickEvent. The event object is aware of the associated UI component, in this case, the Button.

Frequently Asked Quetions

Vaadin communicates with the server and the browser in what way?

🔥 Vadin Flow

The state is saved on the server and is displayed in the browser. Vaadin sends XHR (Ajax) requests between the browser and the server by default. If you require two-way communication or lower latency, you can use a WebSocket instead.

🔥 Hilla

The state is kept on the client. You connect to the server using asynchronous TypeScript methods that wrap a REST call to provide full-stack type information.

Can the Hilla and Flow Frameworks coexist in the same application?

Yes. Both the Flow and Hilla views can be used in the same application. You could, for example, use the Flow to create internal, data-heavy admin views and Hilla to create end-user views that must work offline.

Because the frameworks are interoperable, adding offline functionality to existing Flow applications is simple.

Can I incorporate third-party components into Vaadin apps?

Yes, Vaadin is designed to be highly extensible. You can import and embed JavaScript components via npm or a CDN using Flow or Hilla. Java allows you to set and read properties and listen to JavaScript events. You can create a Java API for a component to make it easier to reuse in your project.

Conclusion

In this blog, we have extensively discussed the concept of Vaadin Architecture. We introduced the Vaadin Architecture and then discussed the UI, widgets, themes, events, and data binding in Vaadin Architecture, then concluded with the client-side engine, events, and listeners in Vaadin Architecture.

We hope this blog increases your knowledge regarding the Vaadin-Architecture. We recommend you to visit our articles on different topics of Vaadin, such as

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!