欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

Vaadin Flow –奇妙的鹿

发布时间：2023/12/3 编程问答 96 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Vaadin Flow –奇妙的鹿 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

您可能知道，Vaadin是Java上最受欢迎的Web框架之一：

  • https://zeroturnaround.com/rebellabs/java-web-frameworks-index-by-rebellabs/
  • https://javapipe.com/hosting/blog/best-java-web-frameworks/

最近发布了该Web UI开发框架的新版本– Vaadin 10。

创作者称Vaadin Flow为现代Web应用程序和网站开发的新Java Web框架（我在这里不太相信它们）。 它是Vaadin平台的一部分，该平台替代了另一种产品– Vaadin Framework，它使您可以使用Java上的Web组件标准来开发Web应用程序（更准确地说是Web UI）。

在这一点上，所有这些东西，包括Vaadin Bla Bla，框架，平台等等，都必须在读者的脑海中融合在一起。 这是怎么回事？

我们已经将Vaadin用作UI Back-office系统的CUBA平台的一部分，并且在此期间已经积累了很多工作经验，这就是为什么我们不禁担心其命运的原因。 以下是我对Vaadin 10的推测。

Vaadin框架

Vaadin是一家芬兰公司，创建UI开发工具和库。 此外，他们还创建了一个同名的Java Web开发框架。

Vaadin Framework是具有服务器端编程模型的UI框架，其中所有UI逻辑及其状态都存在于服务器上，并且Web浏览器仅执行UI小部件的代码。 实际上，这是一种瘦客户端技术，其中的浏览器仅反映服务器的命令，所有事件都发送到服务器。

服务器端方法使我们忘记了开发是针对Web设计的，而是将UI开发为可直接访问服务器上的数据和服务的桌面Java应用程序。 同时，Vaadin将同时处理浏览器中的UI反射和浏览器与服务器之间的AJAX交互。 Vaadin引擎在浏览器中提供应用程序服务器端用户界面呈现，并封装客户端和服务器之间交换的所有详细信息。

这种方法有很多优点：

  • Java代码更易于编写和调试
  • 您可以使用众所周知的Java库和工具（IDE，编译器，测试）
  • 不必开发和公开Web服务
  • 解决方案更安全

缺点：

  • 需要大量服务器上的内存才能进行UI表示
  • 扩展解决方案比较困难
  • 开发小部件时，需要开发Java API

由于这些优点和缺点，Vaadin FW牢固地固定在企业开发中，在这种情况下，负载是可以预测的，并且开发速度和简便性比硬件和内存的成本更为重要。

Google Web Toolkit发生了什么

在Vaadin一直为广大读者所熟悉的时候，Vaadin FW的客户端始终与另一种著名产品Google Web Toolkit（GWT）紧密相连。 通过这种串联，用户可以使用相同的语言-Java，来为它们编写UI组件和服务器API。

过去几年Google Web Toolkit并没有发展壮大，自2015年以来，我们一直在等待GWT发布的GWT 3.0 / J2CL.Create 2015：

  • https://www.youtube.com/watch?v=XJYNCohpxU0
  • https://groups.google.com/forum/#!topic/google-web-toolkit-contributors/s_kX17Xs1S4
  • https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/9Zi4-C5gpxQ

在这个停滞时期（2015-2017年），发生了一个重要事件：新的Web组件规范和Google – Polymer的另一个Web框架出现了。 显然，这是GWT终结的开始。

应该提到的是，GWT 3是作为内部Google框架开发的，并且其开发保留在公司内部。 因此，社区无法以任何方式影响该过程或至少看不到该过程正在进行。

提到这种停滞，Vaadin团队做出了一个艰难的决定 ，即完全放弃GWT的开发，并重写其框架的客户端。 这些变化不能不引起人们的注意，并使已经在Vaadin上进行开发的每个人感到恐惧。

Web组件

Web组件是一组标准。 它是由Google提供并积极推广的，但该计划已在Mozilla中得到支持。 实际上，这些是用于创建Web UI组件的技术，以便它们可以支持行为和表示形式封装。 主要优势是可重用性。

参见https://www.webcomponents.org

基本概念：

  • 自定义元素–用于创建自己HTML元素的API
  • Shadow DOM – HTML组件封装的工具，其可视化表示与全局CSS规则隔离。 一言以蔽之，您可以制作一个组件，例如订单表单，并且不必担心表单样式会由于页面的全局CSS规则而被破坏。
  • HTML模板–在HTML文档中放置包含DOM草稿元素的被动块的机会。 这样的块由浏览器解析，但是不呈现并且不执行其代码。 建议将它们用作数据渲染的模板。
  • HTML导入–一种特殊语法，用于将任何HTML文档作为具有其所有布局，样式和JavaScript代码的模块导入。

例如，如果我们查看YouTube DOM树，则会注意到“自定义元素”和“影子DOM”的用法：

所有这些使您能够编写现代的Web UI组件。

在这里，我应该承认，浏览器的支持还远远不够完美，例如，对于Edge，您仍然需要polyfills 。

聚合物

Polymer是一个超出Web组件标准的很小的库，旨在简化其用法。 例：

// Import corresponding components import '@polymer/paper-checkbox/paper-checkbox.js'; import {PolymerElement, html} from '@polymer/polymer';// Determine new class class LikeableElement extends PolymerElement {// Here will be the component’s public featuresstatic get properties() { return { liked: Boolean }}// That’s how the DOM tree will look inside, CSS influences only the component itselfstatic get template() {return html`<style>.response { margin-top: 10px; } </style><paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox><div hidden$="[[!liked]]" class="response">Web components like you, too.</div>`;} }

参见https://www.polymer-project.org/

实际上，Polymer可以完成以前由GWT完成的所有工作，但与此同时，它可以与任何JS组件以及其他框架（如React和Angular）兼容。

Vaadin成分

让我们回到Vaadin。 一段时间以来，Vaadin公司一直在开发一种名为Vaadin Components的产品-用于前端开发人员的UI组件，可以将其集成到任何JS应用程序中。

这些组件基于Web组件和Polymer！

正如我们现在所看到的，这是Vaadin框架的备份计划，该计划帮助放弃了Google Web Toolkit，并开发了一个没有任何组件的新框架。 解决了鸡肉和鸡蛋的问题，Vaadin组件成为即将到来的Vaadin 10的前端。

Vaadin流

Vaadin 8包括UI状态同步机制和双向RPC协议（远程过程调用）支持。 只有由于GWT才有可能，因为服务器和客户端类的共享接口是用Java编写的。

通过放弃GWT，有必要实现一种新的机制，该机制将能够与JS前端和Java后端透明地集成。 Vaadin Flow发挥了这种机制的作用（很长一段时间以来，该名称也被称为Vaadin 10）。

Flow的文档中有以下方案： https : //vaadin.com/docs/v10/flow/introduction/introduction-overview.html

其要点是：

  • 支持从服务器到客户端的UI状态同步
  • 服务器端可以订阅UI组件事件，并执行该AJAX查询
  • 在服务器上执行业务逻辑，仅使用UI中反映的数据加载Web浏览器
  • 服务器端使用Java
  • 客户端可以使用HTML，CSS，JS和Polymer模板

对我而言，这意味着Vaadin将拥有更多的前端技术，而Java远远不够（对于Vaadin 8，您仅需要Java，而HTML / CSS则不是必需的）。 另一方面，现在可以进行简单的JS代码集成。

请参阅文档中的完整功能列表： https : //vaadin.com/docs/v10/flow/Overview.html

Vaadin平台

Vaadin 10的每个组件都是按照JS世界的最佳传统分别开发的-微型模块，彼此之间具有最大的独立性。 同时，组件的客户端部分以WebJARs格式打包在JAR中。

这有点令人恐惧，尤其是当您查看最小的项目关系时：

2为了以某种方式管理这种混乱，出现了BOM表（物料清单）项目，称为Vaadin平台 。

这不是一个自包含的产品，而只是以Maven BOM格式制作的一系列兼容组件和工具版本：
https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html

它通过以下方式连接到Maven： https : //vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html

<dependencyManagement><dependencies><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-bom</artifactId><version>${vaadin.platform.version}</version><type>pom</type><scope>import</scope></dependency></dependencies> </dependencyManagement>

从Vaadin FW 8迁移

该文档介绍了Vaadin 8的迁移选项：

https://vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

在这里，我有个坏消息：如果您在Vaadin 8上编写了一个大型项目，则必须在转换为Vaadin 10的过程中完全重写它。根本没有迁移路径！

Vaadin 10和Vaadin 8在几个方面相似：

  • 服务器端方法
  • 用于UI逻辑开发的Java
  • 相同的数据绑定方法

底线是： Vaadin 10是从头开始制作的新框架。

正如Vaadin开发人员承诺的那样 ，Vaadin 8将在2022年之前得到支持，可能会出现新的迁移方法。

结论

我认为重要的事实是，新的Vaadin网站是在Vaadin Flow上创建的。 以前，编程语言的成熟度被定义为其编译器是否使用相同的语言编码。 现在，事实上已成为前端技术的标准。

我希望现在您可以决定对Vaadin 10的总体看法。总体而言，这是一个足够好的框架，并且是未来的重要基础。 对我来说，这是一个用于UI构想的新思想和方法的绝佳实验空间。

翻译自: https://www.javacodegeeks.com/2018/07/vaadin-flow-marvelous-deer.html

总结

以上是生活随笔为你收集整理的Vaadin Flow –奇妙的鹿的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。