前言：我是一名高级 Vaadin 开发人员（我用过 6、7，现在我所有的项目都迁移到了 Vaadin 8）。
我开始学习 Vaadin 10 / Flow，但我发现自己陷入了困境。
我真正苦苦挣扎的是“项目”本身。越深入，越觉得这个框架正在走向一个基于 css/html 的框架，这需要比 java 更多的 css/html 知识。我的意思是，如果你不完全了解 css 和 html 是如何工作的，你就不能再轻易地使用这个框架了。
问题是我不知道我是否完全错过了这里的重点并且我正在迷失在一杯水中，或者这是否真的是一个完全不同的框架。在这里我要征求你的意见，以及一些对抗。
我找到了一些非常好的东西，比如@Router以及所有新的导航范例和新的 Mobile First 组件，但在示例中，如果不使用 css 和 html，我真的无法找到一种快速的方法来构建漂亮的外观和感觉布局。
用 Vaadin 8 完成的简单事情现在看起来对我来说很难理解......比如模板：使用 Vaadin 10 Designer 真的非常奇怪。
我希望我只是错过了重点，你们中的一些人可以帮助我理清思路。
我同意您对Vaadin Flow的担忧。以下是我在学习 Vaadin 6-14、研究文档、阅读论坛、观看Vaadin Ltd YouTube 视频时收集到的一些印象。虽然我没有为以下每一点都引用技术证据，但这可能会帮助您了解 Vaadin Flow 的目的和新现实。
开发HTML5的这些年现在已经获得了丰厚的回报。
WHATWG领导者的主要目标之一是从试图构建真正浏览器的程序员的实际角度重写规范。因此，现代浏览器的共同行为比以往任何时候都多，“怪癖”要少得多</a>。如今，Web 应用程序在主要浏览器中的表现更加可预测。
另外，请注意，网络浏览器制造商已经整合了他们对引擎的使用。每个主流浏览器都放弃了自己的引擎，转而使用 Apple WebCore/ WebKit或其衍生产品Blink / Chromium。甚至微软也放弃了自己的浏览器引擎Trident / EdgeHTML，转而使用 Chromium来开发他们的Microsoft Edge浏览器系列。所以Safari , Edge , Chrome , Opera , Brave , Vivaldi，等等现在都在使用几乎相同的引擎，以实现更接近的行为。只有 Mozilla Firefox 继续使用自己的 Web 浏览器引擎Gecko（iOS 版 Firefox 除外，它根据 Apple 政策使用 WebKit）。因此，我们归结为两个主要的浏览器引擎：WebKit/Chromium 和 Gecko。
这意味着 Vaadin 之前版本 6、7 和 7 的主要负担，弥补了浏览器之间的行为差异，大大减轻了。Vaadin 的内部设计现在可以更直接地与 Web 自己的HTML / CSS / DOM模型一起工作，而无需创建它自己的干预行为层。
随着CSS3最终得到充实和广泛采用， CSS近几年有了根本性的改进。
几十年来，专家们一直说“不要使用 HTML进行布局”，但除了乏味功能table之外，没有提供 CSS 中的页面布局。最后，CSS 3 提供了真正的布局，功能丰富且健壮。更令人惊讶的是，显然浏览器已经通过非常兼容的实现广泛支持这些功能。这些新的布局技术是Flex-box和Grid-layout。float
顺便说一句，不会有“CSS 4”。组成 CSS 3 的每个功能领域现在都是自己的项目，具有自己的开发和版本控制。这在 YouTube 频道LayoutLand上Jen Simmons的精彩视频之一中得到了很好的解释，尽管我目前无法找到它。
在一维水平行或垂直列中排列项目。控制拉伸收缩、中间间距、左居中右定位以及包括基线在内的相对对齐。
请参阅此出色的视觉指南和教程。
听起来有点熟？HorizontalLayoutCSS flex-box 提供与 Vaadin和类相同的功能VerticalLayout。事实上，在 Vaadin Flow 中，这些类已被重建以直接使用此 CSS 功能，而不是在 Vaadin 中重新创建该行为。Vaadin Flow 已更改其术语以匹配 CSS 标准的术语，例如setExpandRatiobecome setFlexGrow.
查看哪些浏览器支持 Flexbox的版本。
在行和列的二维网格中排列项目。功能类似于在 HTML 表格的单元格中排列数据。内容可以在单元格内上下或左右对齐。内容可以选择跨越多个单元格。您可以控制间隙间距和对齐方式。
请参阅上面提到的同一个 CSS-Tricks.com 站点的优秀教程。
听起来有点熟？GridLayoutCSS 网格布局提供与以前版本的 Vaadin相同的功能。该类GridLayout不再为 Vaadin Flow 构建，但您可以使用 VaadinDiv对象结合直接 CSS 命令获得大致相同的行为。
查看哪些浏览器支持 CSS Grid的版本。
AbsoluteLayout在相关的说明中，CSS 现在提供了动态的面向像素的布局。同样，这似乎在一致的问题上得到了跨浏览器的良好支持。所以在 Vaadin Flow 中，他们决定放弃AbsoluteLayout提供这种在 xy 坐标系中布局小部件的能力。
代替，您可以通过扩展新组件AbsoluteLayout来制作自己的简单小布局类。Div在该子类中，对于任何给定的小部件，您可以提取Element表示呈现网页中该小部件的 HTML 元素的对象。有了它Element，您可以指定要尊重的左和上 (xy) 坐标。
CSS 现在可以动态更新，因此您可以在运行时在此布局内动态更改定位或添加/删除小部件。
有关此类 CSS 布局子类的示例Div，请参阅在 Vaadin 10 Flow 中替换AbsoluteLayout来自 Vaadin 8 框架？.
新兴的Web Components技术改变了游戏规则，取代了GWT。它们允许将网页和 Web 应用程序组装为一组块，每个块都有自己的 HTML、CSS 和 DOM 小世界。这个封装的范围允许添加一个块而不影响其余的块。例如，在命名 CSS 类和标识符时没有命名空间冲突。
这意味着对 Vaadin 内部结构的巨大重写。所以我们必须要有耐心（或者继续使用 Vaadin 8），因为我们在之前的 Vaadin 中依赖的一些部分会逐渐添加到 Flow 中。有关v8 与 v10/11/12 组件的比较，请参阅Vaadin 10 组件手册中的页面。此页面已保持最新状态。例如MenuBar，在 Vaadin 14 中从计划外变为现在预期。
不利的一面是，以前的 Vaadin 的某些功能可能不会出现。但请仔细阅读该页面并进行研究。Vaadin 以前自己创建的一些部分现在直接表示为现在可靠的 HTML 或 CSS 功能。
和你一样，我对 Vaadin Flow 的感受很复杂。
Vaadin Ltd 最近关于“移动优先”的言论令人担忧。这似乎与他们构建严肃的商业应用程序、企业风格的发票/采购订单/应计类应用程序、我称之为“无聊”的软件（并以此为生）的传统相切，而不是初创公司-week 网络应用程序，设计严谨，界面古怪。
目前缺少一些对企业业务应用程序重要的部分，例如菜单栏，没有好的解决方法。Web Components 技术在行业中相对较新，在接下来的几年中可能会出现一些粗糙的边缘和问题。我喜欢的安全的 Vaadin-only 气泡现在是多孔的，应用程序开发可能需要涉及更多的 CSS 或其他 Web 技术。
另一方面，看起来企业/业务功能可能来自 Vaadin 内部或外部，作为包装为 Vaadin 对象的 Web 组件。Web Components 技术和它们的各种polyfills并不是什么新鲜事物，并且已经被许多人认真研究了几年，现在看来是可行的。至于泄漏到 Vaadin 的 CSS 或其他网络技术，我不介意了解更多关于它们的知识，因为它们现在是多么的健壮和精心设计，这意味着它们可能会带来更多的文档和稳定性，而 Vaadin 不必跨松鼠浏览器重新创建功能。
并且 CSS/HTML 泄漏的一些漏洞可能会在有意义的地方被关闭，并为 Vaadin 程序员提供便利。例如，我在Vaadin-12 Releases页面中注意到，有一个新的 Java API 用于从 Lumo 或 Material 主题中为任何具有变体的组件选择替代的内置组件样式，以及为命名这些变体。例如：primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;。这减轻了访问内部Element和操作 CSS 的需要。
我相信从长远来看，Vaadin 的未来是光明的。作为一个服务器端有状态应用程序服务器，能够从（大部分）非 Web 编程自动生成 Web 应用程序客户端，使其成为一个没有直接竞争的令人惊叹的工具（除了Xojo Web 版，使用类似的架构）。
Vaadin 10 保持与之前版本相同的理念：使用 Java 实现 UI。根本不需要使用 HTML 或 JavaScript。Vaadin 10 添加了一些对 HTML 模板的支持，但它是一个可选功能。
该视频可以帮助您了解 Vaadin 10：https ://www.youtube.com/watch?v=Un8zKzw6twM
Vaadin 的维基百科页面也很有用：https ://en.wikipedia.org/wiki/Vaadin
阅读有关从 Vaadin 8 迁移到 Vaadin 10的文档章节。