Vaadin AdminUI 流程

语境

解决方案

替代方案

Vaadin Flow 是一个服务器驱动的 UI 框架，可以作为 React 或 Angular 的替代方案。其前端以独立的代码库形式存在，使用不同的编程语言编写，并具有清晰的数据管理（AJAX）边界。对于管理 UI，后端开发人员无需深入了解前端技术即可管理界面，这种方法简化了架构并减少了整体维护工作量。我想分享一下我采用这个框架的经验。

语境

我们专门处理管理 UI，通常并发用户较少，但每个 UI 可能都有长时间运行的会话。管理 UI 的一个例子是社交媒体版主室，其目标用户是公司员工，他们通常有长时间的会话。管理 UI 的另一个主要特点是 UI 复杂，业务逻辑丰富，这常常导致难以区分前端和后端的代码。

所有这些使我们能够：

• 由于我们可以为每个用户分配资源，因此可以在后端管理用户的 UI 状态。
• 将功能置于完美的用户体验之前，因为界面用户可以接受培训。
• 忽略初始加载时间，因为它对于管理 UI 来说并不重要。
• 将 UI 相关代码与后端放在一起，因为它们紧密耦合，并且没有其他消费者依赖相同的 API。

我们还更喜欢具有免费使用许可证的开源解决方案，因为它们提供了在需要时修复关键错误的灵活性。

解决方案

所有这些都促使我们考虑后端驱动的 UI 框架，例如 Vaadin Flow，这是一个用于服务器渲染 UI 的 Java 框架。大多数 UI 配置（包括布局和行为）都将像后端代码一样用 Java 编写。

对于 UI 页面，Vaadin Flow 提供了可直接与 Spring 服务交互的路由，无需控制器层。Vaadin Flow 路由中的所有状态都使用 Vaadin 内部机制传输到用户浏览器，无需额外的样板代码，例如 Ajax 请求和 React Subject。

对于需要与第三方库集成的特殊情况，可以使用 React 的桥接接口（详情）。
免费版本中的 UI 测试可以使用 Microsoft Playwright 或 Selenium 进行。

建筑学

企业应用程序通常具有相似的要求，这些要求使用通用的构建块来实现。由于 Vaadin 专为管理 UI 而设计，并且经过多次迭代，您可以在其官方文档中找到详尽的功能。虽然某些高级组件仅在付费版本中可用，但凭借经验和指导（甚至来自 ChatGPT 的指导），您可以自行构建它们。

• 构建（maven/gradle）
• 组装至容器（docker）
• 与 bean 管理框架 (Spring、Quarkus、JBoss CDI) 集成
• 使用 SSO (Authz) 进行安全保护
• 共享布局
• 显示数据网格（表格）
• 显示带有数据的表单

建造

Vaadin 支持 Maven 和 Gradle，但其文档仅针对 Maven 编写。在某些情况下，您可能会发现 Gradle 从 Groovy 迁移到 Kotlin 时出现的 bug。

集装箱化

Vaadin 提供开发模式和生产模式，前者可缩短构建时间，后者可压缩 JavaScript 包并集成用户自定义组件。务必测试生产版本，以便尽早发现任何潜在的构建相关错误。

本指南涵盖了此主题（https://vaadin.com/docs/latest/flow/production/production-build）

与 bean 管理框架集成

Vaadin 可以轻松与 Spring、Quarkus 和 CDI 等领先的 Java 框架集成。对于 Spring，Vaadin 路由可以视为具有类似 Web 会话作用域的 Spring 组件，这意味着每个用户会话都会创建一个 Bean，并在用户交互过程中保留状态。此作用域对于表单管理（下一节将介绍）尤其直观。

授权

虽然“SSO Kit”是付费版本的一部分，但您可以依赖提供类似功能的 Spring authz。例如，您可以使用 Keycloak 将此任务委托给 Spring Security。

spring.security.oauth2.client.registration.keycloak.client-id=${keycloak.client-id}
spring.security.oauth2.client.registration.keycloak.scope=openid,profile,email
spring.security.oauth2.client.registration.keycloak.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.keycloak.redirect-uri=${app.protocol}://${app.host} /login/oauth2/code/{registrationId}
spring.security.oauth2.client.provider.keycloak.issuer-uri=${keycloak.issuer-url}
spring.security.oauth2.client.provider.keycloak.jwk-set-uri=${keycloak.base-url}/protocol/openid-connect/certs

布局

作为实践经验的起点，您可以使用Vaadin Start，它提供在线 UI 设计器并生成相关代码。仔细查看生成的代码，以更好地理解 AppLayout（它充当其他视图的顶层占位符），以及一个扩展了 VerticalLayout 或 Horizo​​ntalLayout 的用户定义路由（视图）的示例。

您的 UI 主要使用两个关键布局组件构建：Horizo​​ntalLayout 和 VerticalLayout，它们都可以包含其他 UI 组件或嵌套布局。

数据网格

Vaadin 将其称为 com.vaadin.flow.component.grid.Grid ( https://vaadin.com/docs/latest/components/grid )。它包含排序、过滤和延迟加载功能。

表格

主要集成层是 com.vaadin.flow.data.binder.Binder，它将 Java Bean 与 UI 状态同步。它还提供了使用 withValidator 进行验证的 API。

// example
var binder = new Binder<>(BusinessPerson.class);

TextField nameField = new TextField();
binder.bind(nameField, BusinessPerson::getName, BusinessPerson::setName);

此主题涵盖于https://vaadin.com/docs/latest/flow/binding-data

奖励：长时间运行的任务

您可能会遇到这样的情况：每次用户与 Java 服务的交互（例如涉及长时间阻塞的数据库交互）都会阻塞用户界面。虽然对于短时间的交互来说这可能不成问题，但对于长时间运行的任务（例如批量导入或导出），应该将其卸载到非专用于渲染 UI 的线程中。这种方法类似于其他渲染框架（例如 Swing 或 AWT）中的做法。

更多详细信息请参阅 https://vaadin.com/docs/latest/building-apps/application-layer/background-jobs、https://vaadin.com/docs/latest/flow/advanced/long-running-tasks

替代方案

由于 Vaadin 专注于 Java，因此其主要优势最好在该生态系统中实现。如果您使用 .NET，Blazor可能更适合；而在 Python 世界中，Streamlit可能是一个轻量级的替代方案。

作者是 Mark Andreev，瑞典