了解Vaadin流程/ Vaadin 10

Question

序言：我是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真的很奇怪。

我希望我只是错过了重点，你们中的一些人可以帮助我清除想法。

Answer 1

我同意您对Vaadin Flow的关注。在学习Vaadin，研究文档，阅读论坛，观看Vaadin Ltd YouTube videos方面，我得到了一些印象。尽管我在以下各点均未引用技术证明，但这可能有助于您适应Vaadin Flow的目的和新现实。

Web浏览器已经成熟

开发HTML5的岁月现在正在获得丰厚的回报。

WHATWG领导者的主要目标之一是从试图实际构建真正的浏览器的程序员的实际角度重写规范。结果，现代浏览器的共同行为比以往任何时候都多，“quirks”少得多。如今，Web应用程序在主要浏览器中的行为更具可预测性。

此外，请注意，网络浏览器制造商已经在使用引擎方面进行了整合。每个主流浏览器都放弃了自己的引擎，以使用Apple WebCore / WebKit或其衍生产品Blink / Chromium。甚至Microsoft也放弃了自己的 Microsoft Edge 浏览器产品线的浏览器引擎Trident / EdgeHTML和has switched to Chromium。因此，Safari，Edge，Chrome，Opera，Brave，Vivaldi等现在都使用了几乎相同的引擎，更接近的行为。仅Mozilla Firefox会继续使用其自己的Web浏览器引擎Gecko（iOS的Firefox（根据Apple的策略使用WebKit的除外））。

因此，弥补了浏览器之间行为差异的Vaadin先前版本6、7和7的主要负担已大大减轻。 Vaadin的内部设计现在可以更直接地与网络自己的HTML / CSS / DOM模型一起使用，而不必创建自己的中间行为层。

CSS

CSS近年来得到了显着改善，CSS3终于得到充实并被广泛采用。

几十年来，专家们说“不要使用HTML table进行布局”，但CSS float缺乏特色，却没有提供页面布局。 最后，CSS 3提供了真实的布局，功能丰富且健壮。更令人惊讶的是，显然浏览器已经通过非常兼容的实现广泛支持了这些功能。这些新的布局技术是 Flex-box 和 Grid-layout 。

Flexbox

将项目排列在一维的水平行或垂直列中。控制拉伸收缩，间距，左右居中和左右对齐以及包括基线在内的相对对齐。

请参见this excellent visual guide and tutorial。

听起来很熟悉吗？ CSS flex-box提供了与Vaadin HorizontalLayout和VerticalLayout类相同的功能。实际上，在Vaadin Flow中，这些类已被重建为直接使用此CSS功能，而不是在Vaadin中重新创建该行为。 Vaadin Flow已更改其术语以与CSS标准相匹配，例如setExpandRatio变成setFlexGrow。

查看what browsers support Flexbox的版本。

Grid Layout

在行和列的二维网格中排列项目。功能类似于在HTML表格的单元格中排列数据。内容可以在单元格中上下或左右对齐。内容可以选择跨多个单元格。您可以控制差距和理由。

请参见上述CSS-Tricks.com网站上的excellent tutorial。

听起来很熟悉吗？ CSS网格布局提供与Vaadin早期版本中的GridLayout相同的功能。 GridLayout类不再为Vaadin Flow构建，但是使用Vaadin Div对象和直接CSS命令相结合，您可以获得几乎相同的行为。

查看what browsers support CSS Grid的版本。

自己动手AbsoluteLayout

在相关说明中，CSS现在提供了动态的面向像素的布局。再次，这似乎是well-supported across browsers，始终如一。因此，在Vaadin Flow中，他们决定放弃AbsoluteLayout，该功能提供了在x-y坐标系中布局小部件的功能。

可以代替AbsoluteLayout，通过扩展新的Div组件来制作自己的简单小布局类。在该子类中，对于任何给定的窗口小部件，您都可以提取Element对象，该对象表示呈现的网页中该窗口小部件的HTML元素。手持Element，您可以指定要遵守的左和上（x-y）坐标。

CSS可以立即动态更新，因此您可以在运行时动态更改此布局中的位置或在此布局中添加/放置小部件。

有关Div的CSS布局子类的示例，请参见Replacement for AbsoluteLayout from Vaadin 8 Framework in Vaadin 10 Flow?。

Web组件

新兴的Web Components技术已经改变了GWT，改变了游戏规则。它们允许将网页和Web应用程序组装成块的集合，每个块都有自己的HTML，CSS和DOM小世界。这种封装的作用域允许添加一个块，而不会影响其余的块。例如，在命名CSS类和标识符时，没有名称空间冲突。

这意味着需要对Vaadin内部进行大量重写。因此，我们必须有耐心（或者只是继续使用Vaadin 8），因为我们在以前的Vaadin中依赖的某些部分会逐渐添加到Flow中。有关v8与v10 / 11/12组件的比较，请参见Components in Vaadin 10上的手册页。此页面已更新。例如，MenuBar从计划外变为现在在Vaadin 14中可以预期。

不利的一面是，以前的Vaadin的某些功能可能不会出现。但是请仔细阅读该页面并进行研究。 Vaadin以前自己创建的某些部分现在直接表示为现在可靠的HTML或CSS功能。

结论

像您一样，我对Vaadin Flow充满了困惑。

Vaadin Ltd最近关于“移动优先”的谈话令人担忧。这与他们构建严肃的业务应用程序，企业风格的发票/购买订单/应计类应用程序，我称之为（并以此为生）的“无聊”软件（而不是启动）的遗产相切。周的Web应用程序，具有严格的设计和古怪的界面。

对于企业业务应用程序而言重要的某些部分（如菜单栏）目前尚无很好的解决方法。 Web组件技术在行业中是相对较新的技术，在接下来的几年中可能会遇到一些粗糙的边缘和问题。我喜欢的一个非常安全的纯Vaadin泡泡现在是多孔的，应用程序开发可能需要涉及一些CSS或其他网络技术。

另一方面，似乎企业/业务功能可能来自Vaadin内部，也可能来自外部，它们是作为Vaadin对象包装的Web组件。 Web组件技术及其各种polyfills并不是什么新技术，并且已经被许多人认真研究了几年，并且现在似乎可以使用。至于泄漏到Vaadin的CSS或其他网络技术，我不介意对其进行更多了解，因为它们现在功能强大且设计精良，这意味着它们将带来更多的文档和稳定性，而Vaadin不必在各种浏览器中重新创建功能。

CSS / HTML泄漏的某些漏洞可能会在合理的地方关闭，并为Vaadin程序员提供了便利。例如，我在Vaadin-12 Releases页面中注意到，有一个新的Java API，用于从Lumo或Material主题中为具有变体的任何组件选择替代的内置组件样式，以及定义的便捷Java常量用于命名这些变体。例如：primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;。这减轻了访问内部Element和操作CSS的需要。

从长远来看，我相信Vaadin的未来是光明的。作为服务器端状态应用服务器，它能够（大部分情况下）通过非Web编程自动生成Web应用客户端，从而使其在无直接竞争的情况下成为令人惊叹的工具（保存Xojo Web Edition，使用类似的架构）。

Answer 2

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

阅读migrating from Vaadin 8 to Vaadin 10上的文档章节。