Блог

Vaadin Flow - диковинный олень

Все статьи

Блог 70 месяцев назад

Vaadin Flow - диковинный олень

Юрий Артамонов

Как вы возможно знаете, Vaadin - один из самых популярных web-фреймворков на Java:

Совсем недавно вышел новый релиз этого фреймворка для разработки web UI - Vaadin 10. Про Vaadin 10 и Vaadin Flow пока довольно мало публикаций на русском и этот пост призван восполнить этот пробел.

Создатели позиционируют Vaadin Flow как новый Java web-фреймворк для разработки современных веб-приложений и веб-сайтов (вот тут я им не совсем верю). Это часть Vaadin Platform, которая приходит на замену другому продукту - Vaadin Framework, она позволяет разрабатывать web-приложения (а если быть точным, то web UI) с применением стандарта Web Components на Java.

Тут у читателя в голове скорее всего всё уже смешалось, все эти Vaadin Bla Bla, фреймворк, платформа и прочее. Что происходит?

Мы используем Vaadin в составе своей платформы CUBA для UI back-office систем на протяжении 7 лет и за это время накопили большой опыт работы с ним, поэтому нас не может не волновать его судьба. Под катом вы найдёте мои спекуляции на тему Vaadin 10.

Vaadin Framework

Vaadin - это финская компания, которая разрабатывает инструменты и библиотеки для разработки UI. Они же делают одноимённый фреймворк для web-разработки на Java.

Vaadin Framework - это UI фреймворк с server-side моделью программирования, в которой вся логика UI и его состояние расположены на сервере, а в браузере исполняется только код UI компонентов. По сути, это технология тонкого клиента, где браузер всего лишь отображает то, что скажет сервер, а все события отправляются на сервер.

Server-side подход позволяет забыть про то, что разработка ведется под web, и разрабатывать UI как настольное Java-приложение с непосредственным доступом к данным и сервисам на сервере. При этом Vaadin позаботится и о отображении UI в браузере, и об AJAX-взаимодействии между браузером и сервером. Движок Vaadin осуществляет рендеринг пользовательского интерфейса приложения серверной стороны в браузере и реализует все детали обмена клиента и сервера.

text

У этого подхода есть много плюсов:

Java код проще писать и отлаживать
Можно использовать существующие Java библиотеки и инструменты (IDE, компиляторы, тестирование)
Не требуется разрабатывать веб-сервисы
Лучше обстоят дела с безопасностью

И минусов:

Нужно много памяти на сервере для UI представления
Сложнее масштабировать решение
При разработке виджетов требуется разрабатывать Java API

Исходя из этих минусов и плюсов Vaadin FW плотно поселился именно в enterprise разработке, где нагрузки предсказуемы, а скорость и простота разработки гораздо важнее стоимости железа и памяти.

Что случилось с Google Web Toolkit

Всё то время, что Vaadin знаком широкой публике, клиентская часть Vaadin FW была неразрывно связана с другим известным продуктом - Google Web Toolkit (GWT). Этот тандем позволял писать сами UI компоненты и серверный API для них на одном языке - Java, что было довольно удобно.

Последние годы Google Web Toolkit не развивался и мы с 2015 года всё ждём появления GWT 3.0 / J2CL, анонсированного на GWT.Create 2015:

В этот застойный период (2015-2017) случилось важное событие: появилась спецификация Web Components и другой фреймворк от Google - Polymer. Видимо, это и послужило началом конца GWT.

Стоит отметить, что GWT 3 разрабатывается как внутренний фреймворк Google и его разработка ведется внутри компании. А значит, коммьюнити никак не может влиять на процесс или хотя бы видеть, что процесс идёт.

На фоне этого застоя, команда Vaadin приняла нелёгкое решение полностью отказаться от разработки на GWT и переписать клиентскую часть своего фреймворка. Эти изменения не могли пройти незамеченными и перепугали всех, кто уже разрабатывает на Vaadin.

Web Components

Web Components — это набор стандартов. Его предложили и активно продвигают ребята из Google, но инициативу уже поддержали в Mozilla. По сути, это технологии для создания UI компонентов для web, так, чтобы в них поддерживалась инкапсуляция поведения и представления. А главный плюс - возможность повторного использования.

См. https://www.webcomponents.org

Основные концепции:

Custom Elements - API для создания своих HTML элементов
Shadow DOM - инструмент инкапсуляции HTML компонентов и изоляция их визуального представления от глобальных правил CSS. Если коротко, то вы можете сделать компонент, например, форму заказа и не бояться, что её стили сломаются на какой-то из страниц сайта из-за CSS правил этой страницы.
HTML Templates - возможность размещения в HTML документе пассивных блоков, содержащих DOM элементы-заготовки. Такие блоки парсятся браузером, но не отрисовываются и не исполняют свой код. Их предлагается использовать в качестве шаблонов для рендеринга данных.
HTML Imports - возможность импортировать HTML документ как модуль со всей его версткой, стилями и JS

Например, если сейчас заглянуть в DOM дерево YouTube, то вы обнаружите использование Custom Elements и Shadow DOM:

text

Все эти штуки и позволяют писать новые модные UI компоненты для web.

Тут стоит признаться, что поддержка в браузерах далека от совершенства и все еще требуются полифилы, например для Edge.

Polymer

Polymer - это небольшая библиотека поверх стандартов Web Components, призванная упростить их использование. Пример:

// Import corresponding components
import '@polymer/paper-checkbox/paper-checkbox.js';
import {PolymerElement, html} from '@polymer/polymer';

// Determine new class
class LikeableElement extends PolymerElement {

  // Here will be the component’s public features
  static get properties() { return { liked: Boolean }}

  // That’s how the DOM tree will look inside, CSS influences only the component itself
  static get template() {
    return html`
      <style>
        .response { margin-top: 10px; } 
      </style>
      <paper-checkbox checked="">I like web components.</paper-checkbox>

      <div hidden$="[[!liked]]" class="response">Web components like you, too.</div>
    `;
  }
}

См. https://www.polymer-project.org/

По сути, Polymer делает всё то, что раньше делал GWT, но при этом он совместим с любыми JS компонентами и другими фреймворками, например, React и Angular.

Vaadin Components

Вернёмся к Vaadin. Довольно давно компания Vaadin делает продукт под названием Vaadin Components - UI компоненты для фронтенд разработчиков, которые могут встраиваться в любые JS приложения.

text

Эти компоненты базируются на Web Components и Polymer!

Как мы теперь видим, это был запасной аэродром для Vaadin Framework, позволивший уйти от Google Web Toolkit и разработать новый фреймворк, для которого еще не существовало компонентов. Проблема курицы и яйца решена и Vaadin Components стали фронтендом грядущего Vaadin 10.

Vaadin Flow

Vaadin 8 включал в себя механизм синхронизации состояния UI и поддержку двустороннего RPC протокола (удаленного вызова процедур). Это было возможно благодаря GWT, поскольку общие интерфейсы и классы сервера и клиента писались на Java.

Вместе с отказом от GWT потребовалось реализовать новый механизм, который бы позволил прозрачно интегрироваться с JS фронтендом и Java бэкендом. Этим механизмом стал Vaadin Flow (а ещё это имя долгое время использовали для обозначения всего Vaadin 10).

В документации по Flow есть такая схема:

https://vaadin.com/docs/v10/flow/introduction/introduction-overview.html

text

Основной её смысл в следующем:

поддерживается синхронизация состояния UI с сервера на клиент
серверная часть может подписываться на события UI компонентов, при этом будет выполнен AJAX запрос
бизнес-логика выполняется на сервере, в веб-браузер загружаются только данные, отображающиеся в UI
серверная часть использует Java
клиентская часть может использовать HTML, CSS, JS и шаблоны Polymer

Для меня это означает, что в Vaadin станет больше фронтенд технологий, а теперь одной Java явно недостаточно (для Vaadin 8 вам хватило бы Java и не требовались HTML/CSS). С другой стороны, теперь возможна легкая интеграция JS кода.

Полную документация можно найти по ссылке: https://vaadin.com/docs/v10/flow/Overview.html

Vaadin Platform

Каждый компонент Vaadin 10 разрабатывается отдельно и в лучших традициях JS мира - крошечные модули, максимально независимые друг от друга. При этом клиентская часть компонентов упакована в JAR в формате WebJARs.

Это немного пугает, особенно если заглянуть в зависимости минимального проекта:

text

Чтобы хоть как-то управлять этим хаосом появился проект BOM (bill of materials) под названием Vaadin Platform.

Это не какой то самостоятельный продукт, а всего лишь список совместимых версий компонентов и инструментов оформленный в формате Maven BOM:
https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html

Подключается в Maven он следующим образом: https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.platform.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

Миграция с Vaadin FW 8

Опции миграции с Vaadin 8 описаны в документе:

https://vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

Тут у меня для вас плохая новость: если вы написали огромный проект на Vaadin 8, то вам потребуется его полностью переписать при переходе на Vaadin 10. Пути миграции нет, от слова совсем!

Vaadin 10 и Vaadin 8 похожи в нескольких аспектах:

Server-side подход
Java для разработки логики UI
Одинаковый подход к биндингу данных

В сухом остатке: Vaadin 10 это новый фреймворк написанный с нуля.

Как обещают разработчики, Vaadin 8 будет поддерживаться до 2022 года, возможно появятся подходы к миграции.

Заключение

Считаю важным тот факт, что новый веб-сайт компании Vaadin написан на Vaadin Flow, что становится де-факто стандартом для фронтенд технологий, как в своё время зрелость языка программирования определялась тем, написан ли его компилятор на этом же языке.

Надеюсь, что теперь и вы сможете составить свое мнение о Vaadin 10. В целом, это неплохой фреймворк и огромный задел на будущее. Для меня же, это отличный экспериментальный полигон для новых идей и подходов к построению UI.