了解瓦丁流/瓦丁10

Question

前言：我是一个高级Vaadin开发人员（我已经使用了6,7，现在我所有的项目都迁移到了Vaadin 8）。

我开始研究瓦丁10/Flow，但我发现自己陷入了困境。

我真正纠结的是“项目”本身。我越深入，就越觉得这个框架正在进入一个基于css/html的框架，这需要比java更多的css/html知识。我的意思是，如果你不完全知道css和html是如何工作的，你就不能再轻松地使用这个框架了。

问题是，我不知道我是否完全错过了这里的要点，我正在掉进一杯水里，或者这是否真的是一个完全不同的框架。这里是我向你们征求意见的地方，还有一些对抗。

我发现了一些非常好的东西，比如@Router和所有新的导航模式以及新的mobilefirst组件，但在这个例子中，我真的无法找到一种不使用css和html就能快速构建美观布局的方法。

用Vaadin 8做的简单的事情现在对我来说很难理解。。。比如模板：与Vaadin 10 Designer合作真的很奇怪。

我希望我只是没有抓住要点，你们中的一些人可以帮助我理清思路。

Answer 1

Vaadin10保持了与以前版本相同的理念：用Java实现UI。根本不需要使用HTML或JavaScript。Vaadin10增加了对HTML模板的一些支持，但这是一个可选功能。

本视频可帮助您了解Vaadin 10：https://www.youtube.com/watch?v=Un8zKzw6twM

Vaadin的维基百科页面也很有用：https://en.wikipedia.org/wiki/Vaadin

阅读关于从Vaadin 8迁移到Vaadin 10的留档章节。

Answer 2

我同意你对Vaadin Flow的担忧。以下是我在了解Vaadin 6-14、研究文档、阅读论坛、观看Vaadin LtdYouTube视频时收集的一些印象。虽然我没有为下面的每一点引用技术证据，但这可能有助于您了解瓦丁流的目的和新现实。

多年来开发HTML5的努力现在得到了巨大的回报。

WHATWG领导人的主要目标之一是从程序员试图实际构建真正浏览器的实际角度重写规范。因此，现代浏览器比以往任何时候都有更多的共同行为，而“怪癖”则少得多。如今，网络应用在主流浏览器中的表现更具可预测性。

另外，请注意，网络浏览器制造商在使用引擎方面进行了整合。每个主流浏览器都放弃了自己的引擎，转而使用Apple WebCore/WebKit或其衍生产品Blink/Chromium。甚至微软也放弃了自己的浏览器引擎Trident/EdgeHTML，转而使用Chromium作为他们的微软边缘浏览器系列。因此，Safari、Edge、Chrome、Opera、Brave、Vivaldi等现在都在使用几乎相同的引擎，以实现更密切的行为。只有Mozilla Firefox继续使用自己的web浏览器引擎Gecko（除了Firefox for iOS，它根据苹果的政策使用WebKit）。因此，我们主要使用两种浏览器引擎：WebKit/Chromium

这意味着先前版本6、7和7的Vaadin的主要负担已经大大减轻，弥补了浏览器之间的行为差异。Vaadin的内部设计现在可以更直接地使用web自己的HTML/CSS/DOM模型，而无需创建自己的中间行为层。

近年来，CSS有了根本性的改进，CSS3终于充实并被广泛采用。

几十年来，专家们一直说“不要使用HTML表格进行布局”，但CSS中没有提供任何页面布局，只是缺少了浮动功能。最后，css3提供了真实的布局、丰富的功能和强大的功能。更令人惊讶的是，很明显，浏览器已经广泛支持这些功能，并且实现非常兼容。这些新的布局技术是Flex-box和Grid-layout。

顺便说一下，不会有“CSS 4”。包含CSS 3的每个功能区域现在都是自己的项目，有自己的开发和版本控制。这是解释很好的一个优秀的视频由珍西蒙斯在YouTube频道LayoutLand虽然我无法找到它。

在一维水平行或垂直列中排列项目。控制拉伸-收缩、行间距、左居中-右定位和相对对准，包括基线。

请参阅本优秀的视觉指南和教程。

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

查看哪些浏览器支持Flexbox的版本。

在由行和列组成的二维网格中排列项目。这些特性类似于在HTML表格的单元格中排列数据。内容可以在单元格内上下或左右对齐。内容可以选择性地跨越多个单元格。可以控制间隙间距和对正。

请参阅相同CSS技巧的优秀教程。com网站，如上所述。

听起来熟悉吗？CSS grid layout提供了与以前版本的Vaadin中的GridLayout相同的功能。中的GridLayout类不再是为Vaadin流构建的，但是使用VaadinDiv对象和直接CSS命令可以获得大致相同的行为。

查看哪些版本的浏览器支持CSS网格。

另一方面，CSS现在提供了动态的面向像素的布局。同样，这似乎得到了跨浏览器的一致支持。因此，在Vaadin Flow中，他们决定删除绝对布局，它提供了在x-y坐标系中布局小部件的能力。

代替AbsolteLayout，您可以通过扩展新的Div组件来创建自己的简单小布局类。在该子类中，对于任何给定的小部件，您可以提取表示呈现的网页中该小部件的超文本标记语言元素的Element对象。使用Element，您可以指定左侧

CSS现在可以动态更新，所以您可以在运行时动态更改布局中的位置，或添加/删除小部件。

有关Div的此类CSS布局子类的示例，请参阅Vaadin 10 Flow？中Vaadin 8框架中的AbsolteLayout的替换。

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

这意味着对瓦丁内部的巨大重写。所以我们必须有耐心（或者继续使用Vaadin 8），因为我们在之前的Vaadin中依赖的一些部分会逐渐添加到流程中。有关v8与v10/11/12部件的比较，请参阅手册中关于Vaadin 10部件的页面。这一页一直是最新的。例如，MenuBar在Vaadin 14中从计划外更改为现在的预期。

不利的一面是，以前的Vaadin的一些功能可能不会出现。但是仔细阅读那一页并进行研究。Vaadin以前自己创建的一些部分现在直接表示为现在可靠的超文本标记语言或CSS功能。

和你一样，我对瓦丁流也有复杂的感觉。

瓦丁有限公司最近关于“移动第一”的言论令人担忧。这似乎与他们创建严肃的商业html" target="_blank">应用程序、企业风格的发票/采购订单/应计类应用程序的传统背道而驰，我称之为“无聊”软件（并以此为生），而不是启动设计严谨、界面古怪的每周web应用程序。

一些对企业业务应用程序很重要的部分，如菜单栏，目前没有很好的解决办法。Web组件技术在业界是相对较新的技术，在未来几年内可能会遇到一些困难和问题。我喜欢的安全的Vaadin-only泡泡现在是多孔的，应用程序开发可能需要更多的CSS或其他网络技术。

另一方面，看起来企业/业务功能可能来自Vaadin内部，也可能来自外部，作为Vaadin对象包装的网络组件。Web组件技术及其各种多边形填充并不新鲜，许多人已经认真研究了几年，现在似乎是可行的。至于CSS或其他网络技术泄露到Vaadin，我不介意学习更多关于这些的知识，因为它们现在是多么健壮和设计良好，这意味着它们可能会有更多的留档和稳定性，而Vaadin不必重新创建跨古怪浏览器的功能。

CSS/HTML的一些漏洞可能会在有意义的地方被关闭，并为Vaadin程序员提供便利。例如，我注意到在Vaadin-12发行版页面中，有一个新的Java API，用于从Lumo或Material主题中为任何具有变体的组件选择替代内置组件样式，以及为命名这些变体定义的方便Java常量。例如：primaryButton。添加变量（按钮variant.LUMO_PRIMARY） 。这减少了访问内部html" target="_blank">元素和操作CSS的需要。

我相信从长远来看，瓦丁的未来是光明的。作为一个服务器端有状态应用程序服务器，它能够从（大部分情况下）非web编程自动生成web应用程序客户端，因此它是一个令人惊叹的工具，没有直接竞争（使用类似的体系结构保存Xojo web Edition）。

• 你应该升级到瓦丁14吗
• V8与V10-两个维护的Vaadin版本，选择哪一个<玛蒂·塔沃宁于2018年6月13日在瓦丁拍摄。com博客