【Vaadin flow 实战】第2讲-深入理解vaadin flow技术路线原理

vaadin flow技术路线揭秘

什么是flow

Vaadin Flow是一个允许开发人员完全用Java编写Web应用程序的框架。与编写HTML、CSS和JavaScript不同，用户界面是由Java中的UI组件构建的–类似于Swing和JavaFX。HTML代码、CSS样式表和JavaBean仍然存在，并且在需要时可以访问：它们被抽象在一个丰富的Java API后面。

Flow充当浏览器中HTML元素的远程控制。这些HTML元素可以是简单的div元素，也可以是更复杂的元素，如vaadin-grid Web组件。流控制属性、特性及其子项。它甚至可以执行自定义的JavaScript调用。

在服务器端，有开发人员与之交互的相应Java对象。Flow处理服务器端的Java对象和客户端的HTML元素。

flow是如何加载的

从浏览器加载的初始HTML代码只包含一些静态占位符元素沿着Flow的客户端呈现引擎脚本。此脚本获取初始视图的呈现指令。服务器以JSON格式发送指令。客户端呈现引擎解释这些指令，并在浏览器中构建或更新DOM树。

对事件做出反应

当你添加一个带有服务器端点击监听器的Vaadin Button到你的UI中时，Flow会在浏览器中创建一个带有DOM事件监听器的对应的vaadin-button元素。当用户单击该按钮时，Flow从事件中提取相关信息，并在HTTP POST请求中将其发送到服务器。框架的服务器端部分查找相应的Button对象，并调用已添加到其中的所有单击侦听器

更新UI

一旦点击监听器被调用，框架就会收集对服务器端组件所做的所有更改。从那里，它创建了一个新的JSON对象与渲染指令。此JSON对象作为对最初传递单击事件的HTTP POST请求的响应发送。客户端呈现引擎解释这些指令并更新浏览器中的DOM树。

路由导航

当用户单击浏览器中的链接时，Flow的客户端路由器会拦截单击事件，并阻止浏览器执行加载新页面的默认操作。相反，Flow将事件发送到服务器，由Flow的服务器端路由器处理。服务器端路由器查找对应于新视图的Java类，实例化它，并将它添加到服务器端组件树中，以代替先前的视图。由于服务器端组件树随后发生了更改，因此将带有渲染指令的新JSON对象发送回浏览器，客户端渲染引擎在浏览器中更新DOM树。

滚动和延迟加载

不仅点击从浏览器发送到服务器。Vaadin Grid组件支持延迟加载。当用户滚动网格时，会从服务器加载更多的数据。浏览器中有一个JavaScript回调函数，当网格数据用完时会调用它。这个回调向服务器端的Grid对象发送一条消息，该对象又调用其服务器端的数据提供程序来加载更多的项。
这个更新操作不能通过操作DOM树来完成。相反，客户端数据提供程序有一个函数，需要在新数据可用时调用。一旦服务器加载了这些项，它们就被转换为自定义的JavaScript函数调用。此函数调用将成为服务器发送回浏览器的JSON响应中的指令。然后，客户端呈现引擎解释该指令并调用JavaScript函数，让客户端数据提供程序知道有新的项可用。

vaadin flow运行逻辑

Vaadin Flow允许服务器端Java应用程序从Java组件构建用户界面。这些Java组件连接到浏览器中运行的Web组件。流管理用户交互返回到服务器端应用程序的中继，服务器端应用程序可以使用事件侦听器处理用户交互。

应用程序视图及其组件通常用于显示和接受应用程序数据的输入。这些数据通常存储在后端服务中，例如数据库。应用程序逻辑通常使用应用程序框架（如Spring）创建。

一图胜千言，vaadin flow技术架构图如下

vaadin flow的基本特性包括：

• 一个让你专注于UI的架构。不需要考虑客户端和服务器之间的通信。
• 一组高质量的UI组件，专注于最终用户和开发人员的体验。
• 强大的抽象层，可以使用Java或HTML模板构建自己的可重用UI组件。
• 数据绑定API，使用类型安全的Java将UI组件连接到任何后端。
• 路由器API，用于创建分层页面结构供用户导航。

案例:例如，您可以在Java中创建一个UI，如下所示：

// Create an H