技术文档

开发者无需从零编写大量底层代码，而是通过直观易用的低代码平台，采用拖拽式组件的方式进行页面搭建。平台提供了丰富的UI组件库，开发者可以根据业务需求选择合适的组件，简单拖拽放置并配置属性即可生成页面布局，极大地提升了开发效率和设计自由度。

完成页面搭建后，通过集成DevOps（Development和Operations）的自动化流程，可以实现应用的持续集成与持续部署（CI/CD）。

这包括对源代码的自动构建、测试、打包和发布等环节，确保了应用的质量与稳定性。 最终，低代码平台会将这些可视化设计转化为高质量的React源代码。

React作为一款流行的JavaScript库，以其高效的组件化和虚拟DOM技术，特别适合构建动态、交互性强的前端应用。

因此，通过这种方式输出的React源代码，可以无缝对接到实际生产环境中运行，形成真正意义上的动态前端应用，既满足了企业级应用的复杂需求，也兼顾了开发迭代的速度与便利性。

  1. 生成的React源码可以直接导入到现有的开发环境中进行编译、打包和部署。用户或开发者可以根据需要继续在源码层面进行调整、优化或扩展，实现敏捷开发和持续迭代。
  2. 生成的React源码遵循最佳实践和编码规范，具备良好的结构、清晰的注释及合理的模块划分，使得专业开发者能够容易接手并进行后续的深度定制或优化
  3. 支持自定义组件、第三方库集成以及与现有企业架构的对接，确保生成的React应用不仅满足基本业务需求，还能适应复杂场景和未来扩展，保持技术栈的先进性和持久生命力

应用架构图

页面初始化层 - page/initializer.tsx

  1. 初始化接口数据
  2. 初始化页面和组件 settings 数据（设计态 schema 转换而成的最小化的配置和数据，profile 文件）
  3. 初始化组件状态
  4. 初始化页面资产

页面层 - page/view.tsx

  1. 初始化页面变量
  2. 渲染页面组件

组件层 - ComponentProxy

  1. 代理组件值状态
  2. 代理组件视图状态
  3. 处理组件校验状态
  4. 读取组件设置
  5. 订阅状态更新依赖
  6. 代理向前兼容逻辑

组合式开发

除了抽象 UI 组件的能力，对业务组件的良好抽象也是一个非常值得去培养的能力。

对业务的抽象代表的是页面的布局、应用的鉴权、产品的国际化等这些更高维度上的问题。 页面上所有的东西都是组件。 页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。

让我们先来看一段页面的伪代码： import * as React from 'react'; import { UdcPageProps, ComponentProxy, ReactFilberCommit, OpenModeChange, metricEvent, getTransaction, PrintTitle, isPopoverPage, EventActions, } from '@seeyon/udc-runtime-core';

const { useEffect, memo } = React;

const PageView: React.FC = (props) => { const { runtimeContext, onPageRender, onPageUnmount, udcSdk } = props;

const page = metricEvent( getTransaction(runtimeContext)!, 'page-update', () => { return ( <> {/* */} 

      <OpenModeChange runtimeContext={runtimeContext} />
      <ReactFilberCommit runtimeContext={runtimeContext} />
    </>
  );
},
{
  runtimeContext,
  reason: 'PAGE_UPDATE',
},

);

return page; };

PageView.displayName = 'PageView__biaozhun1xiangqing';

export default memo(PageView);

在上面的这段伪代码中，我们抽象出了个独立模块，可以根据需求添加或删除任意一个模块，而且添加或删除任意一个模块都不会对应用的其他部分产生不可接受的副作用。

这让我们对接下来要做的事情有了一个大体的认识，但在具体的实践中，如 props 如何传递、模块之间如何共享数据、如何灵活地让用户自定义某些特殊逻辑等都仍然面临着巨大的挑战。

我们需要时刻注意，在处理一个具体问题时哪些部分应当放在某个独立模块内部去处理，哪些部分应当暴露出接口供使用者自定义，模块与模块之间如何做到零耦合以至于使用者可以随意插拔任意一个模块去适应当前项目的需要。

代码生成流程

目录结构

页面渲染流程

本地调试流程

本地调试流程与其他前端工程别无二致

  1. 从git 拉取代码
  2. 安装npm依赖
  3. 配置 webpack 代理
  4. 本地启动
  5. 本地浏览器访问

从 GIT 仓库拉取代码 ...进入 应用源代码目录后， 就可以看到 pc/mobile 两个终端的代码。 比如我们进入 PC 目录中

安装依赖+本地启动

# 配置致远私有 npm 源

npm set registry http://10.255.1.230:9082/ yarn config set registry http://10.255.1.230:9082/

# 进入 pc/mobile 目录

yarn

# node18 以下

yarn start

# node18 以上

yarn start2

PC端本地访问:

  1. http://localhost:3000/login
  2. http://localhost:3000/main/portal/页面URI

Mobile端本地访问:

  1. http://localhost:3000/login?clientType=MOBILE
  2. http://localhost:3000/main-mobile/portal/页面URI

多语言支持

参考 前端应用国际化方案

编撰人：huhao

快速跳转

← V8 前端基座应用 →