Not a Vaadin developer, yet? Try to guess what this code is doing …
Tags: java, springboot, vaadin, spring
Published: 2023-02-16 07:30:00

---
title: Not a Vaadin developer, yet? Try to guess what this code is doing …
published: true
description: Not a Vaadin developer, yet? Try to guess what this code is doing …
tags: Java, SpringBoot, Vaadin, Spring
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-02-16 07:30 +0000
---
Are you a long-time Java developer using Spring-related tech stack? [Vaadin](https://vaadin.com/) can bring a [fresh brief of the air](https://medium.com/@dmarko484/5-areas-where-vaadin-shines-as-liveview-implementation-for-java-47e430740803) into your daily development routines.

If you are not a Vaadin developer yet, take this as a quick exercise to understand, how Vaadin code is organized in a very efficient way.

1) Our simple web browser UI contains label, text field, and button for submitting data to the backend.

![Image1](https://miro.medium.com/v2/resize:fit:624/format:webp/1*wckZM4mI3_GwOLoDK3luYQ.png)

2) And here we go with implementation in pure Java code. Our Vaadin page is integrated into the SpringBoot project.

![Image2](https://miro.medium.com/v2/resize:fit:640/format:webp/1*WTnQvjZdhhxYe97z9i0Qiw.png)

**What the code above says:**

**ad 1) We have a simple Java class that extends Vaadin** Div() object. It becomes Div (HTML) on the screen then.

**ad 2) By using ‘Route’ annotation**, we make this page accessible from the browser by specifying this routing URL.

**ad 3) We are in the SpringBoot project**, and we can inject other stuff here using Spring DI.

**ad 4) We create TextField**, and set a name, autofocus, and width. All this in plain java. Vaadin makes an HTML representation based on that.

**ad 5) Button is defined here with many specific properties**. Again, Vaadin will make an HTML representation for our page.

**ad 6) Some action is needed for our button**. So we defined a click listener. When the button is clicked in the browser, Vaadin makes sure, that this bubble-up to the backend and the correct listener is triggered for us. We are not doing that, Vaadin does.

**ad 7) Click listener pulls the value from TextField**. How does the value get from the browser to Java TextField object? Vaadin has done that for us when the button was clicked. Frontend and backend are in sync.

**ad 8) When information is saved into a database**, we display a nice confirmation popup. Vaadin communicates this back to the browser and makes a small notification popup appear on the screen.

**ad 9) We defined all around our TextField and Button**, let's add both to the Div() we started with.

And that's all. Really, just one Java class. No HTML, no JavaScript, no endpoints, no custom Ajax calls, no DTOs. Just plain Java and the magic of Vaadin.

Are you using [https://start.spring.io/](https://start.spring.io/) ? You can add Vaadin as a dependency here directly. It's fully supported by SpringBoot.

![SpringStarter](https://miro.medium.com/v2/resize:fit:640/format:webp/1*dXUpKFdcDYkAWCRyVxXCow.png)

Are you still with me? Nice. If you are interested in details and can get a whole idea of how you can use Vaadin in your new or existing projects, you are welcome to take part in this Udemy Course: “[FullStack Vaadin (14–23+) — Practical Solutions](https://www.udemy.com/course/fullstack-vaadin-14-23-practical-solutions/?referralCode=86634EA8983DEA9AB198)”

![Udemy course](https://miro.medium.com/proxy/1*xOYuYidbmzpTTkk3j3nTlw.webp)