了解Vaadin Flow/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视频时所获得的一些印象.虽然我没有引用下面每一点的技术证据,但这可能会帮助您确定Vaadin Flow的目的和新现实.

Web浏览器已经成熟

开发HTML5的这些年来现在获得了丰厚的回报.

WHATWG领导者的主要目标之一是从程序员试图真正构建真实浏览器的实际角度重写规范.因此,现代浏览器的行为比以往任何时候都多,而且"怪癖"要少得多.如今,Web应用程序在主要浏览器中表现得更加可预测.

因此,Vaadin之前版本6,7和7的主要负担,弥补了浏览器之间的行为差​​异,已经大大减轻了.Vaadin的内部设计现在可以更直接地使用Web自己的HTML/CSS/DOM模型,而无需创建自己的干预行为层.

CSS

CSS近年来得到了彻底的改进,CSS3终于得到了充实和广泛采用.

几十年来,专家们说"不要使用HTML table进行布局",但除了贫血float功能外,CSS中没有提供页面布局.最后,CSS 3提供了真正的布局,功能丰富且强大.更令人惊讶的是,显然浏览器通过非常兼容的实现广泛支持这些功能.这些新的布局技术是Flex-box和Grid-layout.

Flexbox的

将项目排列在一维水平行或垂直列中.控制拉伸 - 收缩,间距,左对中 - 右定位和相对对齐(包括基线).

请参阅此优秀的视觉指南和教程.

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

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

网格布局

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

请参阅上面提到的CSS-Tricks.com网站的优秀教程.

听起来有点熟？CSS网格布局提供与GridLayout以前版本的Vaadin 相同的功能.该GridLayout在课堂上不再建为Vaadin流量,但你可以使用Vaadin得到多少相同的行为Div对象与直接CSS命令相结合.

了解哪些浏览器支持CSS Grid的版本.

滚你自己 AbsoluteLayout

在相关的说明中,CSS现在提供了面向像素的布局.同样,这似乎在浏览器中得到了很好的支持.所以在Vaadin Flow中,他们决定放弃AbsoluteLayout提供这种能力来在xy坐标系中布局小部件.

代替AbsoluteLayout,您可以通过扩展新Div组件来创建自己的简单小布局类.在该子类中,对于任何给定的窗口小部件,您可以Element在呈现的网页中提取表示该窗口小部件的HTML元素的对象.有了这些Element,您可以指定要遵守的左侧和顶部(xy)坐标.

CSS现在可以动态更新,因此您可以在运行时期间动态更改此布局中的定位或添加/删除小部件.

有关此类CSS布局子类的示例Div,请参阅Vaadin 10 Flow中的Vaadin 8 Framework的替换AbsoluteLayout？.

Web组件

新兴的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最近关于"移动优先"的谈话令人担忧.这似乎与他们构建认真的商业应用程序,企业风格的发票/购买订单/应计类型的应用程序,我称之为"无聊"软件(并从中谋生)的遗产相反,而不是创业的 - 周围的Web应用程序,严谨的设计和古怪的界面.

对于企业业务应用程序(如菜单栏)重要的一些部分目前缺失,没有很好的解决方法.Web Components技术在业界是相对较新的,并且在未来几年内可能会有一些粗糙的边缘和问题.我喜欢的非常安全的Vaadin泡泡现在已经很多了,应用开发可能需要更多的CSS或其他网络技术.

另一方面,看起来企业/业务功能可能来自Vaadin内部或外部作为包含Vaadin对象的Web组件.Web Components技术及其各种polyfill并不是新的,并且已被许多人认真工作多年,现在似乎可行.至于CSS或其他网络技术泄漏到Vaadin,我不打算更多地了解这些,因为它们现在是多么强大和精心设计,以及这意味着更多的文档和稳定性可能随之而来,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,使用类似的架构) ).