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

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

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

项目结构

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/           ← 示例和测试数据

工作方式

DivKit 的 JSON 描述页面结构。服务端返回 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"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

客户端 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 支持表达式，用于动态数据绑定：

{
  "type": "text",
  "text": "@{getString('greeting')}, @{userName}!"
}

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

变量引用 @{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：divkit.tech/playground

# Web 端本地运行
cd client/web/divkit
npm install
npm start

总结

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

目录