====== DivKit：Yandex 开源的 Server-Driven UI 框架 ======

DivKit 是 Yandex 开源的 Server-Driven UI（SDUI）框架，[[https://github.com/divkit/divkit|GitHub 8600+ Star]]。它允许服务端下发 UI 布局，客户端渲染，一套 JSON 同时覆盖 Android、iOS、Web 三端。

与 Nop 平台的思路一致——**UI 由结构化数据驱动，而非手写代码**。区别在于 Nop 的 JSON 由后端 Excel 模型自动生成，DivKit 的 JSON 由服务端直接下发。

===== 项目结构 =====

<code>
divkit/
  client/              ← 客户端渲染引擎
    android/           ← Android（Kotlin）
    ios/               ← iOS（Swift）
    web/divkit         ← Web（TypeScript）
  json-builder/        ← 服务端 JSON 生成库
    typescript/
    kotlin/
    python/
  schema/              ← JSON Schema 定义
  api-generator/       ← 从 Schema 生成多端 API
  test-data/           ← 示例和测试数据
</code>

===== 工作方式 =====

DivKit 的 JSON 描述页面结构。服务端返回 JSON，客户端直接渲染：

<code json>
{
  "card": {
    "log_id": "hello_card",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "orientation": "vertical",
          "items": [
            {
              "type": "text",
              "text": "Hello, DivKit!",
              "font_size": 24,
              "font_weight": "bold",
              "alignment_h": "center"
            },
            {
              "type": "button",
              "text": "Click Me",
              "actions": [
                {
                  "type": "url",
                  "url": "https://divkit.tech"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
</code>

客户端 SDK 解析这个 JSON，映射到原生组件渲染。不需要 WebView，性能接近原生。

===== 三端覆盖 =====

^ 平台 ^ 语言 ^ 集成方式 ^
| Android | Kotlin | 作为 View 嵌入现有应用 |
| iOS | Swift | 作为 UIView 嵌入 |
| Web | TypeScript/React | 独立组件 |

DivKit 的核心理念是"嵌入式"——它不是一个独立的应用框架，而是一个可以嵌入到现有 App 任意页面的 UI 组件。这意味着可以渐进式采用，不需要重写整个应用。

===== 组件系统 =====

DivKit 内置丰富的 UI 组件：

  * **布局** — container、grid、column、row、overlay
  * **文本** — text（支持富文本和表达式）
  * **图片** — image（支持网络图、占位图）
  * **输入** — input（文本输入框）
  * **交互** — button、slider、switcher
  * **容器** — tabs、pager、gallery
  * **自定义** — custom 容器可以嵌入原生自定义组件

每个组件支持完整的状态管理：visibility、alpha、transition、transform。

===== 表达式系统 =====

DivKit 的 JSON 支持表达式，用于动态数据绑定：

<code json>
{
  "type": "text",
  "text": "@{getString('greeting')}, @{userName}!"
}
</code>

表达式在客户端求值，支持：

  * 变量引用 @{variable}
  * 函数调用 @{formatDate(date, 'dd.MM.yyyy')}
  * 条件 @{isVisible ? 'shown' : 'hidden'}
  * 本地化 @{localize('key')}
  * 算术运算 @{price * 1.2}

===== 与 Nop 前端的对比 =====

^ 对比维度 ^ DivKit ^ Nop 前端 ^
| 驱动方式 | 服务端下发 JSON | 后端模型生成 JSON |
| 跨平台 | Android + iOS + Web | 当前以 Web 为主 |
| 集成方式 | 嵌入原生 View | AMIS/Flux 框架渲染 |
| JSON 生成 | 手动或服务端代码生成 | 由 Delta 管线自动生成 |
| 表达式 | @{} 语法 | AMIS ${} / Flux expression |
| 开源协议 | Apache 2.0 | MIT |

共同点：都认为 UI 应该由结构化数据描述，而不是手写平台特定的代码。

===== 适用场景 =====

  * **动态页面** — 服务端控制布局和内容，无需发版
  * **A/B 测试** — 不同用户看到不同页面
  * **跨平台一致性** — 同一 JSON 三端渲染
  * **快速原型** — 在 Playground 中编辑 JSON 即可看到效果

===== 快速体验 =====

在线 Playground：[[https://divkit.tech/playground|divkit.tech/playground]]

<code bash>
# Web 端本地运行
cd client/web/divkit
npm install
npm start
</code>

===== 总结 =====

DivKit 和 Nop 平台代表了同一趋势的两条路径：DivKit 从客户端渲染出发，解决多端一致性问题；Nop 从后端模型出发，解决全栈自动化问题。两者都认为**结构化的 UI 描述**是下一代前端开发的基础。

===== 进一步阅读 =====

  * [[https://divkit.tech/doc|DivKit 官方文档]]
  * [[https://divkit.tech/playground|在线 Playground]]
  * 对比 Nop 前端的 [[../practical_guide/frontend/overview|前端项目总览]]