decorate image
decorate image
ОНЛАЙН-КУРС: РАЗРАБОТКА НА JMIX BPM
Все статьи
Содержание

    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.

    Jmix - это open-source платфора быстрой разработки бизнес-приложений на Java