Что такое Vaadin
Vaadin Flow — фреймворк для веб-интерфейсов, которые целиком пишутся на Java. Кнопки, поля ввода, таблицы и окна — это Java-объекты: вы создаёте их в коде, добавляете на страницу и вешаете обработчики. HTML, JavaScript и REST API писать не нужно — Vaadin сам рисует интерфейс в браузере и передаёт действия пользователя обратно на сервер.
Такой подход удобен для внутренних систем: админок, CRM, панелей учёта. Там важнее быстро собрать формы и таблицы, чем рисовать уникальный дизайн.
Как это работает
Весь интерфейс живёт на сервере. В браузер загружается небольшой клиент, который показывает готовые веб-компоненты и пересылает события.
- Пользователь открывает адрес, например
/posts. - Сервер создаёт Java-объект экрана и его компоненты.
- Клиент в браузере получает описание компонентов и рисует их.
- Пользователь нажимает кнопку — клиент отправляет событие на сервер.
- Ваш обработчик на Java меняет компоненты, а Vaadin отправляет в браузер только изменения.
Состояние каждого открытого экрана хранится в сессии на сервере. Поэтому Vaadin не нужен отдельный API между фронтендом и бэкендом: обработчик кнопки может сразу вызвать сервис и записать данные в базу.
Flow и Hilla
У Vaadin два способа писать интерфейс:
| Вариант | Язык интерфейса | Когда выбирать |
|---|---|---|
| Flow | Java | Вся команда пишет на Java, нужен быстрый результат |
| Hilla | React и TypeScript | Есть фронтенд-разработчики, нужен свой дизайн |
Этот курс — про Flow. Слово «Vaadin» дальше означает именно его.
Версии в этом курсе
| Компонент | Версия |
|---|---|
| Vaadin | 25.3 |
| Spring Boot | 4.1 |
| Java | 25 (Vaadin 25 требует Java 21 или новее) |
| Сборка | Maven |
Vaadin 25 работает поверх Spring Boot: Spring создаёт сервисы и репозитории, Vaadin — экраны. Знать Spring Boot заранее не обязательно — всё нужное объясняется по ходу.
Что мы построим
Сквозной пример курса — админка блога:
- список статей в таблице с сортировкой, поиском и правкой прямо в строках;
- форма создания и редактирования с проверкой полей и загрузкой обложки;
- меню слева и шапка с кнопкой выхода и переключателем языка (русский и английский);
- вход по логину и паролю, права для ролей
ADMINиUSER; - фоновый подсчёт статистики с обновлением экрана;
- тесты экранов и сборка в один JAR-файл.
Частая ошибка
Новички пытаются открыть Vaadin-страницу как обычный HTML и ищут текст в ответе сервера:
curl http://localhost:8080/helloВ ответе будет только заготовка страницы со скриптами — надписей и кнопок там нет. Их рисует клиент Vaadin уже в браузере после загрузки. Проверяйте экраны в браузере или тестами из главы «Готовое приложение», а не через curl.