Vaadin Flow –奇妙的鹿

您可能知道，Vaadin是Java上最受欢迎的Web框架之一：

https://zeroturnaround.com/rebellabs/java-web-frameworks-index-by-rebellabs/
https://javapipe.com/hosting/blog/best-java-web-frameworks/

最近发布了该Web UI开发框架的新版本– Vaadin 10。

创作者称Vaadin Flow为现代Web应用程序和网站开发的新Java Web框架（我在这里不太相信它们）。它是Vaadin平台的一部分，该平台替代了另一种产品– Vaadin Framework，它使您可以使用Java上的Web组件标准来开发Web应用程序（更准确地说是Web UI）。

在这一点上，所有这些东西，包括Vaadin Bla Bla，框架，平台等等，都必须在读者的脑海中融合在一起。这是怎么回事？

我们已经将Vaadin用作UI Back-office系统的CUBA平台的一部分，并且在此期间已经积累了很多工作经验，这就是为什么我们不禁担心其命运的原因。以下是我对Vaadin 10的推测。

Vaadin框架

Vaadin是一家芬兰公司，创建UI开发工具和库。此外，他们还创建了一个同名的Java Web开发框架。

Vaadin Framework是具有服务器端编程模型的UI框架，其中所有UI逻辑及其状态都存在于服务器上，并且Web浏览器仅执行UI小部件的代码。实际上，这是一种瘦客户端技术，其中的浏览器仅反映服务器的命令，所有事件都发送到服务器。

服务器端方法使我们忘记了开发是针对Web设计的，而是将UI开发为可直接访问服务器上的数据和服务的桌面Java应用程序。同时，Vaadin将同时处理浏览器中的UI反射和浏览器与服务器之间的AJAX交互。 Vaadin引擎在浏览器中提供应用程序服务器端用户界面呈现，并封装客户端和服务器之间交换的所有详细信息。

这种方法有很多优点：

Java代码更易于编写和调试
您可以使用众所周知的Java库和工具（IDE，编译器，测试）
不必开发和公开Web服务
解决方案更安全

缺点：

需要大量服务器上的内存才能进行UI表示
扩展解决方案比较困难
开发小部件时，需要开发Java API

由于这些优点和缺点，Vaadin FW牢固地固定在企业开发中，在这种情况下，负载是可以预测的，并且开发速度和简便性比硬件和内存的成本更为重要。

Google Web Toolkit发生了什么

在Vaadin一直为广大读者所熟悉的时候，Vaadin FW的客户端始终与另一种著名产品Google Web Toolkit（GWT）紧密相连。通过这种串联，用户可以使用相同的语言-Java，来为它们编写UI组件和服务器API。

过去几年Google Web Toolkit并没有发展壮大，自2015年以来，我们一直在等待GWT发布的GWT 3.0 / J2CL.Create 2015：

https://www.youtube.com/watch?v=XJYNCohpxU0
https://groups.google.com/forum/#!topic/google-web-toolkit-contributors/s_kX17Xs1S4
https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/9Zi4-C5gpxQ

在这个停滞时期（2015-2017年），发生了一个重要事件：新的Web组件规范和Google – Polymer的另一个Web框架出现了。显然，这是GWT终结的开始。

应该提到的是，GWT 3是作为内部Google框架开发的，并且其开发保留在公司内部。因此，社区无法以任何方式影响该过程或至少看不到该过程正在进行。

提到这种停滞，Vaadin团队做出了一个艰难的决定，即完全放弃GWT的开发，并重写其框架的客户端。这些变化不能不引起人们的注意，并使已经在Vaadin上进行开发的每个人感到恐惧。

Web组件

Web组件是一组标准。它是由Google提供并积极推广的，但该计划已在Mozilla中得到支持。实际上，这些是用于创建Web UI组件的技术，以便它们可以支持行为和表示形式封装。主要优势是可重用性。

参见https://www.webcomponents.org

基本概念：

自定义元素–用于创建自己HTML元素的API
Shadow DOM – HTML组件封装的工具，其可视化表示与全局CSS规则隔离。一言以蔽之，您可以制作一个组件，例如订单表单，并且不必担心表单样式会由于页面的全局CSS规则而被破坏。
HTML模板–在HTML文档中放置包含DOM草稿元素的被动块的机会。这样的块由浏览器解析，但是不呈现并且不执行其代码。建议将它们用作数据渲染的模板。
HTML导入–一种特殊语法，用于将任何HTML文档作为具有其所有布局，样式和JavaScript代码的模块导入。

例如，如果我们查看YouTube DOM树，则会注意到“自定义元素”和“影子DOM”的用法：

所有这些使您能够编写现代的Web UI组件。

在这里，我应该承认，浏览器的支持还远远不够完美，例如，对于Edge，您仍然需要polyfills 。

聚合物

Polymer是一个超出Web组件标准的很小的库，旨在简化其用法。例：

// 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 featuresstatic get properties() { return { liked: Boolean }}// That’s how the DOM tree will look inside, CSS influences only the component itselfstatic get template() {return html`<style>.response { margin-top: 10px; } </style><paper-checkbox checked="{{liked}}">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成分

让我们回到Vaadin。一段时间以来，Vaadin公司一直在开发一种名为Vaadin Components的产品-用于前端开发人员的UI组件，可以将其集成到任何JS应用程序中。

这些组件基于Web组件和Polymer！

正如我们现在所看到的，这是Vaadin框架的备份计划，该计划帮助放弃了Google Web Toolkit，并开发了一个没有任何组件的新框架。解决了鸡肉和鸡蛋的问题，Vaadin组件成为即将到来的Vaadin 10的前端。

Vaadin流

Vaadin 8包括UI状态同步机制和双向RPC协议（远程过程调用）支持。只有由于GWT才有可能，因为服务器和客户端类的共享接口是用Java编写的。

通过放弃GWT，有必要实现一种新的机制，该机制将能够与JS前端和Java后端透明地集成。 Vaadin Flow发挥了这种机制的作用（很长一段时间以来，该名称也被称为Vaadin 10）。

Flow的文档中有以下方案： https : //vaadin.com/docs/v10/flow/introduction/introduction-overview.html

其要点是：

支持从服务器到客户端的UI状态同步
服务器端可以订阅UI组件事件，并执行该AJAX查询
在服务器上执行业务逻辑，仅使用UI中反映的数据加载Web浏览器
服务器端使用Java
客户端可以使用HTML，CSS，JS和Polymer模板

对我而言，这意味着Vaadin将拥有更多的前端技术，而Java远远不够（对于Vaadin 8，您仅需要Java，而HTML / CSS则不是必需的）。另一方面，现在可以进行简单的JS代码集成。

请参阅文档中的完整功能列表： https : //vaadin.com/docs/v10/flow/Overview.html

Vaadin平台

Vaadin 10的每个组件都是按照JS世界的最佳传统分别开发的-微型模块，彼此之间具有最大的独立性。同时，组件的客户端部分以WebJARs格式打包在JAR中。

这有点令人恐惧，尤其是当您查看最小的项目关系时：

2为了以某种方式管理这种混乱，出现了BOM表（物料清单）项目，称为Vaadin平台。

这不是一个自包含的产品，而只是以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>