3.7. 前端用户界面

在 CUBA 平台中，除了 通用 UI之外，我们还提供 Frontend UI。通用 UI 主要设计为后台用户（内部维护管理人员等）使用，而 Frontend UI 的目标用户则是外部用户，因此 Frontend UI 在布局自定义方面更加灵活。并且与通用 UI 使用的技术不同，更适合前端开发人员，非常容易集成 JavaScript 生态内的 UI 库和组件。但是，要求开发人员对现代前端技术栈理解更深。

Frontend UI 可使用下列技术之一：

  • React

  • React Native

  • Polymer（废弃）

  • 您喜欢的其他框架（Angular 或 Vue）：可以使用与框架无关的 Typescript SDK

我们提供了几个工具和库，为了方便您构建 Frontend UI 应用程序（或称之为 frontend client - 前端客户端）：

Frontend Generator

The Frontend Generator 是一个脚手架工具，可以用来加速前端客户端的开发。可以在 Studio 中使用，也可以作为单独的 CLI 工具使用。用这个工具可以生成初始化 app 项目，也可以用来添加组件，比如实体浏览和编辑界面。还可以用来生成 Typescript SDK。

React 和 React Native 适用的组件和工具库

对于由 Frontend Generator 生成的 React 和 React Native 客户端，代码中用到了两个库，这两个库也可以独立使用。一个是 CUBA React Core ，这个库主要负责一些核心功能，比如操作 CUBA 实体。这个库在 React 和 React Native 都用到了。另一个是 CUBA React UI ，这个库包含了 UI 组件。使用 Ant Design UI 套件开发，在 React 端使用。

CUBA REST JS 库

CUBA REST JS 是一个用来与 后台通用 REST API 交互的库。前端客户端通过 REST API 与中间件通信。但是，不需要手动在代码里发送这些请求。如果您的客户端是用 React 或者 React Native 开发，那么 CUBA React Core 组件会在底层使用 CUBA REST JS 与后台通信。如果您使用其他前端框架，或者希望更加灵活的处理这些请求，那么可以直接使用 CUBA REST JS。

TypeScript SDK

TypeScript SDK 是由 Frontend Generator 生成，主要包含项目中实体、视图以及其他用于访问 REST 服务的 TypeScript 代码。SDK 可以用在任何您喜欢的前端框架中（如果您选择的框架并不是 CUBA 开箱即支持的话），也可以用在基于 Node.js 的 BFF（Backend for Frontend - 服务前端的后端） 开发中。

如需学习关于这些工具的更多内容，请参阅 Frontend UI manual 。