控制台独立应用实践 TCFF5 笔记

http://tcff.pages.oa.com/#/

TCFF5（一个灵活可扩展的 Web 应用开发解决方案和最佳实践）

应用场景

• 含一个框架内核，可基于此创建自己的前端框架
• 含一套开箱即用的 React 前端开发最佳实践
• 基于社区当前最新（Hooks API）相对最优解，不重复造轮子
• 完美适配控制台 Tea 框架和其他各类应用框架
• 使用 Typescript 编写，包含完善的类型定义支持
• 轻量级代码，支持 Tree-Shaking

基础能力

## 应用实例

• ReactAppEntry 在根组件中初始化应用
• useApp 获取应用实例
• app.emit/app.use 发布/订阅事件，用于实现拦截和埋点处理
• usePlugin::error 捕获代码错误或业务逻辑错误，以免程序崩溃或进行统一处理
• beforeServiceCall 在每个异步调用发起前触发
• serviceCallDone 在每个异步调用完成后触发

## 状态管理

”极简状态管理设计“：我们的界面都是由数据驱动的，这种驱动界面的数据称为 状态。状态的分类可以从两个维度去思考，状态的 可访问范围 和状态的 生命周期。

• useControllableState 平滑升级，兼容 breaking change
• useServiceCall 异步状态在组件内部管理

## 异步调用

UI 编程是事件驱动的模型，存在各种异步调用，每种异步调用需要处理不同的体验问题。

TCFF 提供了一个统一的机制来规范和组织异步调用，这个机制称为：服务（Service）

• 如何复用公共的调用逻辑
• 如何规范调用结果
• 如何进行异常、错误处理
• 如何埋点
• 如何处理并发、竞态
• 如何缓存，如何同步数据等

对应上述问题提供的解决方案有，

• useServiceCall 核心API
• state.abort() 中止请求
• await Promise.all([call1(), call2()]) 竞态与并发
• 错误限制
• useTrigger/createTrigger/resetCall 重试与重置
• 创建服务定义组，注册服务调用（onBeforeStart）

## 类型推导

• useSelector 定义状态
• ServiceCall 定义服务

高级功能

## 底层设计

• 核心（Core）：@tencent/tcff-core
• 插件（Plugin）：@tencent/tcff-plugin-*
• 预设（Preset）：@tencent/tcff-preset-* 或 @tencent/tcff-*-app

## 使用经典状态管理

• 模型即插件
• 支持模型状态回收（useModel）
• 支持多副作用模型
  • Async
  • Saga
  • Observable
• 内置常用 Reducer
• 增强型  Dispatch

## 定制服务类型

• 服务（Service）对象
• 服务集合（Service Group）
• 服务调用（Service Call）