了解 Vaadin Flow / Vaadin 10
Understanding Vaadin Flow / Vaadin 10
前言：我是一名高级Vaadin开发者（我用过6、7，现在我所有的项目都迁移到了Vaadin 8）。
我开始研究 Vaadin 10 / Flow，但我发现自己陷入了困境。
我真正挣扎的是 "project" 本身。
我越深入，我越觉得这个框架正在向基于 css / html 的框架发展，这需要比 java 更多的 css/html 知识。
我的意思是，如果你不完全了解 css 和 html 是如何工作的，你就不能再轻松地使用这个框架了。
问题是我不知道我是否完全忽略了这里的要点，我正在失去一杯水，或者这是否真的是一个完全不同的框架。
这里是我向你征求意见的地方，还有一些对抗。
我发现了一些非常好的东西，比如 @Router 以及所有新的导航范例和新的移动优先组件，但例如我真的找不到快速的方法来在不使用 css 和 html.
的情况下构建美观的布局
使用 Vaadin 8 完成的简单工作现在对我来说很难理解...比如模板：使用 Vaadin 10 Designer 真的非常非常奇怪。
我希望我只是忽略了重点，你们中的一些人可以帮助我理清思路。
Vaadin 10 保持与之前版本相同的理念：用 Java 实现 UI。根本不需要使用 HTML 或 Java 脚本。 Vaadin 10 添加了对 HTML 模板的一些支持，但这是一项可选功能。
此视频可以帮助您了解 Vaadin 10：https://www.youtube.com/watch?v=Un8zKzw6twM
Vaadin 的维基百科页面也很有用：https://en.wikipedia.org/wiki/Vaadin
阅读有关 migrating from Vaadin 8 to Vaadin 10 的文档章节。
我同意你对 Vaadin Flow. Here are some impressions I have gathered in learning about Vaadin 6-14, studying the doc, reading the forums, watching the Vaadin Ltd YouTube videos 的担忧。虽然我没有为下面的每一点都引用技术证据，但这可能会帮助您定位 Vaadin Flow 的目的和新现实。
Web 浏览器已经成熟
开发 HTML5 的岁月现在得到了丰厚的回报。
WHATWG was to rewrite the specs from the practical viewpoint of programmers trying to actually build real browsers. As a result, the modern browsers have far more behavior in common than ever before, with far less “quirks” 领导人的主要目标之一。如今，Web 应用程序在主要浏览器中的行为更加可预测。
另外请注意，网络浏览器制造商已经整合了他们对引擎的使用。每个主要浏览器都放弃了自己的引擎，转而使用 Apple WebCore/WebKit or its spin-off Blink/Chromium. Even Microsoft has given up on its own browser engine Trident/EdgeHTML, and has switched to Chromium for their line of Microsoft Edge browsers. So Safari, Edge, Chrome, Opera, Brave, Vivaldi, and so on are all using much the same engine now, for much closer behaviors. Only Mozilla Firefox continues to use its own web browser engine, Gecko（Firefox for iOS 除外，它根据 Apple 政策使用 WebKit）。因此，我们只剩下两个主要的浏览器引擎：WebKit/Chromium 和 Gecko。
这意味着 Vaadin 之前版本 6、7、7 弥补浏览器之间行为差异的主要负担已经大大减轻。 Vaadin 的内部设计现在可以更直接地使用网络自己的 HTML/CSS/DOM 模型，而无需创建它自己的行为干预层。
CSS
CSS has improved radically in recent years with CSS3 终于充实并被广泛采用。
几十年来，专家们一直在说“不要使用 HTML table 进行布局”，但 CSS 中除了贫血的 float 功能外没有提供任何页面布局。 最后，CSS 3 提供了真实的布局，功能丰富且功能强大。更令人惊奇的是，显然浏览器通过非常兼容的实现广泛支持这些功能。这些新的布局技术是 Flex-box 和 Grid-layout.
顺便说一句，不会有“CSS 4”。组成 CSS 3 的每个功能区域现在都是自己的项目，具有自己的开发和版本控制。 Jen Simmons on YouTube channel LayoutLand 在其中一个优秀的视频中对此进行了很好的解释，尽管我现在找不到它。
Flexbox
在一维水平行或垂直列中排列项目。控制拉伸-收缩、中间间距、左居中-右定位和包括基线在内的相对对齐。
参见 this excellent visual guide and tutorial。
听起来很熟悉？ CSS flex-box 提供与 Vaadin HorizontalLayout 和 VerticalLayout class 相同的功能。事实上，在 Vaadin Flow 中，这些 classes 已经被重建以直接使用此 CSS 功能，而不是在 Vaadin 中重新创建该行为。 Vaadin Flow 已更改其术语以匹配 CSS 标准，例如 setExpandRatio 变为 setFlexGrow.
查看 what browsers support Flexbox.
的版本
Grid Layout
在二维的行和列网格中排列项目。功能类似于在 HTML table 中排列单元格中的数据。内容可以在单元格内上下或左右对齐。内容可以选择跨越多个单元格。您可以控制间距和对齐方式。
查看 excellent tutorial 与上述相同的 CSS-Tricks.com 站点。
听起来很熟悉？ CSS 网格布局提供与 Vaadin 早期版本中的 GridLayout 相同的功能。 GridLayout class 不再为 Vaadin Flow 构建，但您可以使用 Vaadin Div 对象结合直接 CSS 命令获得大致相同的行为。
查看 what browsers support CSS Grid.
的版本
自己动手AbsoluteLayout
在相关说明中，CSS 现在提供即时的面向像素的布局。同样，这似乎是 well-supported across browsers in a consistent matter. So in Vaadin Flow, they decided to drop the AbsoluteLayout，它提供了在 x-y 坐标系中布置小部件的能力。
代替 AbsoluteLayout，您可以通过扩展新的 Div 组件来制作自己的简单小布局 class。在该子 class 中，对于任何给定的小部件，您可以提取 Element 对象，该对象代表呈现的网页中该小部件的 HTML 元素。有了 Element ，您可以指定要遵守的左侧和顶部 (x-y) 坐标。
CSS 现在可以动态更新，因此您可以在 运行 时间内在此布局内动态更改 add/drop 小部件的定位。
有关 Div 的 CSS 布局子 class 的示例，请参阅 。
网络组件
新兴Web Components technologies are a game changer, having replaced GWT。它们允许将网页和 Web 应用程序组装成块的集合，每个块都有自己的 HTML、CSS 和 DOM 小世界。这个封装的范围允许添加一个块而不影响其余的块。例如，CSS classes 和标识符的命名没有命名空间冲突。
这意味着对 Vaadin 内部结构进行大量重写。所以我们必须耐心等待（或者继续使用 Vaadin 8），因为我们在以前的 Vaadin 中依赖的一些部分逐渐添加到 Flow 中。有关 v8 与 v10/11/12 组件的比较，请参阅手册中关于 Components in Vaadin 10 的页面。此页面一直保持最新。例如 MenuBar 在 Vaadin 14 中从计划外更改为现在预期。
不利的一面是，以前的 Vaadin 的某些功能可能不会出现。但请仔细阅读该页面并进行研究。 Vaadin 以前自己创建的一些部分现在直接表示为现在可靠的 HTML 或 CSS 功能。
结论
和您一样，我对 Vaadin Flow 也有复杂的感受。
Vaadin Ltd 最近关于“移动优先”的言论令人担忧。这似乎与他们构建严肃的商业应用程序、企业风格 invoice/purchase-order/accruals 类型的应用程序、我称之为“无聊”的软件（并以此为生）的传统无关，而不是本周的初创公司具有严谨设计和古怪界面的网络应用程序。
一些对企业业务应用程序很重要的部分（例如菜单栏）目前缺失，没有好的解决方法。 Web Components 技术在业界相对较新，在接下来的几年中可能会有一些粗糙的边缘和问题。我喜欢的非常安全的 Vaadin-only 泡沫现在是多孔的，应用程序开发可能需要涉及更多 CSS 或其他网络技术。
另一方面，看起来 enterprise/business 功能可能来自 Vaadin 内部或外部作为包装为 Vaadin 对象的 Web 组件。 Web Components 技术和它们的各种 polyfills 并不新鲜，许多人已经认真研究了很多年，现在看来是可行的。至于 CSS 或其他泄漏到 Vaadin 的网络技术，我不介意多了解这些，因为它们现在非常强大和精心设计，这意味着它们可能会带来更多的文档和稳定性，随着Vaadin 无需在 squirrelly 浏览器中重新创建功能。
并且 CSS/HTML 泄漏的一些漏洞可能会在有意义的地方关闭，并为 Vaadin 程序员提供便利。例如，我注意到在 Vaadin-12 Releases 页面中，有一个新的 Java API 用于从 Lumo 或 Material 主题中选择替代的内置组件样式具有变体的组件，以及为命名这些变体而定义的方便 Java 常量。例如：primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;。这减轻了访问内部 Element 和操作 CSS 的需要。
我相信长期运行，Vaadin的未来是光明的。作为服务器端有状态应用程序服务器，能够从（大部分）非 Web 编程自动生成 Web 应用程序客户端，使其成为一个令人惊叹的工具，处于没有直接竞争的位置（保存 Xojo 网络版，使用类似的架构）。
资源
- Should you upgrade to Vaadin 14?
作者：Marcus Hellberg 2019-08-21 Vaadin.com 博客
- V8 vs. V10 - two maintained Vaadin versions, which one to choose?
作者：Matti Tahvonen 2018-06-13 Vaadin.com 博客
前言：我是一名高级Vaadin开发者（我用过6、7，现在我所有的项目都迁移到了Vaadin 8）。
我开始研究 Vaadin 10 / Flow，但我发现自己陷入了困境。
我真正挣扎的是 "project" 本身。 我越深入，我越觉得这个框架正在向基于 css / html 的框架发展，这需要比 java 更多的 css/html 知识。 我的意思是，如果你不完全了解 css 和 html 是如何工作的，你就不能再轻松地使用这个框架了。
问题是我不知道我是否完全忽略了这里的要点，我正在失去一杯水，或者这是否真的是一个完全不同的框架。 这里是我向你征求意见的地方，还有一些对抗。
我发现了一些非常好的东西，比如 @Router 以及所有新的导航范例和新的移动优先组件，但例如我真的找不到快速的方法来在不使用 css 和 html.
的情况下构建美观的布局使用 Vaadin 8 完成的简单工作现在对我来说很难理解...比如模板：使用 Vaadin 10 Designer 真的非常非常奇怪。
我希望我只是忽略了重点，你们中的一些人可以帮助我理清思路。
Vaadin 10 保持与之前版本相同的理念：用 Java 实现 UI。根本不需要使用 HTML 或 Java 脚本。 Vaadin 10 添加了对 HTML 模板的一些支持，但这是一项可选功能。
此视频可以帮助您了解 Vaadin 10：https://www.youtube.com/watch?v=Un8zKzw6twM
Vaadin 的维基百科页面也很有用：https://en.wikipedia.org/wiki/Vaadin
阅读有关 migrating from Vaadin 8 to Vaadin 10 的文档章节。
我同意你对 Vaadin Flow. Here are some impressions I have gathered in learning about Vaadin 6-14, studying the doc, reading the forums, watching the Vaadin Ltd YouTube videos 的担忧。虽然我没有为下面的每一点都引用技术证据，但这可能会帮助您定位 Vaadin Flow 的目的和新现实。
Web 浏览器已经成熟
开发 HTML5 的岁月现在得到了丰厚的回报。
WHATWG was to rewrite the specs from the practical viewpoint of programmers trying to actually build real browsers. As a result, the modern browsers have far more behavior in common than ever before, with far less “quirks” 领导人的主要目标之一。如今，Web 应用程序在主要浏览器中的行为更加可预测。
另外请注意，网络浏览器制造商已经整合了他们对引擎的使用。每个主要浏览器都放弃了自己的引擎，转而使用 Apple WebCore/WebKit or its spin-off Blink/Chromium. Even Microsoft has given up on its own browser engine Trident/EdgeHTML, and has switched to Chromium for their line of Microsoft Edge browsers. So Safari, Edge, Chrome, Opera, Brave, Vivaldi, and so on are all using much the same engine now, for much closer behaviors. Only Mozilla Firefox continues to use its own web browser engine, Gecko（Firefox for iOS 除外，它根据 Apple 政策使用 WebKit）。因此，我们只剩下两个主要的浏览器引擎：WebKit/Chromium 和 Gecko。
这意味着 Vaadin 之前版本 6、7、7 弥补浏览器之间行为差异的主要负担已经大大减轻。 Vaadin 的内部设计现在可以更直接地使用网络自己的 HTML/CSS/DOM 模型，而无需创建它自己的行为干预层。
CSS
CSS has improved radically in recent years with CSS3 终于充实并被广泛采用。
几十年来，专家们一直在说“不要使用 HTML table 进行布局”，但 CSS 中除了贫血的 float 功能外没有提供任何页面布局。 最后，CSS 3 提供了真实的布局，功能丰富且功能强大。更令人惊奇的是，显然浏览器通过非常兼容的实现广泛支持这些功能。这些新的布局技术是 Flex-box 和 Grid-layout.
顺便说一句，不会有“CSS 4”。组成 CSS 3 的每个功能区域现在都是自己的项目，具有自己的开发和版本控制。 Jen Simmons on YouTube channel LayoutLand 在其中一个优秀的视频中对此进行了很好的解释，尽管我现在找不到它。
Flexbox
在一维水平行或垂直列中排列项目。控制拉伸-收缩、中间间距、左居中-右定位和包括基线在内的相对对齐。
参见 this excellent visual guide and tutorial。
听起来很熟悉？ CSS flex-box 提供与 Vaadin HorizontalLayout 和 VerticalLayout class 相同的功能。事实上，在 Vaadin Flow 中，这些 classes 已经被重建以直接使用此 CSS 功能，而不是在 Vaadin 中重新创建该行为。 Vaadin Flow 已更改其术语以匹配 CSS 标准，例如 setExpandRatio 变为 setFlexGrow.
查看 what browsers support Flexbox.
的版本Grid Layout
在二维的行和列网格中排列项目。功能类似于在 HTML table 中排列单元格中的数据。内容可以在单元格内上下或左右对齐。内容可以选择跨越多个单元格。您可以控制间距和对齐方式。
查看 excellent tutorial 与上述相同的 CSS-Tricks.com 站点。
听起来很熟悉？ CSS 网格布局提供与 Vaadin 早期版本中的 GridLayout 相同的功能。 GridLayout class 不再为 Vaadin Flow 构建，但您可以使用 Vaadin Div 对象结合直接 CSS 命令获得大致相同的行为。
查看 what browsers support CSS Grid.
的版本自己动手AbsoluteLayout
在相关说明中，CSS 现在提供即时的面向像素的布局。同样，这似乎是 well-supported across browsers in a consistent matter. So in Vaadin Flow, they decided to drop the AbsoluteLayout，它提供了在 x-y 坐标系中布置小部件的能力。
代替 AbsoluteLayout，您可以通过扩展新的 Div 组件来制作自己的简单小布局 class。在该子 class 中，对于任何给定的小部件，您可以提取 Element 对象，该对象代表呈现的网页中该小部件的 HTML 元素。有了 Element ，您可以指定要遵守的左侧和顶部 (x-y) 坐标。
CSS 现在可以动态更新，因此您可以在 运行 时间内在此布局内动态更改 add/drop 小部件的定位。
有关 Div 的 CSS 布局子 class 的示例，请参阅
网络组件
新兴Web Components technologies are a game changer, having replaced GWT。它们允许将网页和 Web 应用程序组装成块的集合，每个块都有自己的 HTML、CSS 和 DOM 小世界。这个封装的范围允许添加一个块而不影响其余的块。例如，CSS classes 和标识符的命名没有命名空间冲突。
这意味着对 Vaadin 内部结构进行大量重写。所以我们必须耐心等待（或者继续使用 Vaadin 8），因为我们在以前的 Vaadin 中依赖的一些部分逐渐添加到 Flow 中。有关 v8 与 v10/11/12 组件的比较，请参阅手册中关于 Components in Vaadin 10 的页面。此页面一直保持最新。例如 MenuBar 在 Vaadin 14 中从计划外更改为现在预期。
不利的一面是，以前的 Vaadin 的某些功能可能不会出现。但请仔细阅读该页面并进行研究。 Vaadin 以前自己创建的一些部分现在直接表示为现在可靠的 HTML 或 CSS 功能。
结论
和您一样，我对 Vaadin Flow 也有复杂的感受。
Vaadin Ltd 最近关于“移动优先”的言论令人担忧。这似乎与他们构建严肃的商业应用程序、企业风格 invoice/purchase-order/accruals 类型的应用程序、我称之为“无聊”的软件（并以此为生）的传统无关，而不是本周的初创公司具有严谨设计和古怪界面的网络应用程序。
一些对企业业务应用程序很重要的部分（例如菜单栏）目前缺失，没有好的解决方法。 Web Components 技术在业界相对较新，在接下来的几年中可能会有一些粗糙的边缘和问题。我喜欢的非常安全的 Vaadin-only 泡沫现在是多孔的，应用程序开发可能需要涉及更多 CSS 或其他网络技术。
另一方面，看起来 enterprise/business 功能可能来自 Vaadin 内部或外部作为包装为 Vaadin 对象的 Web 组件。 Web Components 技术和它们的各种 polyfills 并不新鲜，许多人已经认真研究了很多年，现在看来是可行的。至于 CSS 或其他泄漏到 Vaadin 的网络技术，我不介意多了解这些，因为它们现在非常强大和精心设计，这意味着它们可能会带来更多的文档和稳定性，随着Vaadin 无需在 squirrelly 浏览器中重新创建功能。
并且 CSS/HTML 泄漏的一些漏洞可能会在有意义的地方关闭，并为 Vaadin 程序员提供便利。例如，我注意到在 Vaadin-12 Releases 页面中，有一个新的 Java API 用于从 Lumo 或 Material 主题中选择替代的内置组件样式具有变体的组件，以及为命名这些变体而定义的方便 Java 常量。例如：primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;。这减轻了访问内部 Element 和操作 CSS 的需要。
我相信长期运行，Vaadin的未来是光明的。作为服务器端有状态应用程序服务器，能够从（大部分）非 Web 编程自动生成 Web 应用程序客户端，使其成为一个令人惊叹的工具，处于没有直接竞争的位置（保存 Xojo 网络版，使用类似的架构）。
资源
- Should you upgrade to Vaadin 14?
作者：Marcus Hellberg 2019-08-21 Vaadin.com 博客 - V8 vs. V10 - two maintained Vaadin versions, which one to choose?
作者：Matti Tahvonen 2018-06-13 Vaadin.com 博客