一、前言
在当今移动互联网时代，应用开发面临着一个普遍的挑战：如何高效地在 iOS、Android 和 Web 等多个平台上保持 UI 的一致性，并快速迭代更新？每次修改 UI 都需要发布新版本，这无疑增加了开发和维护成本。
今天，我将向大家介绍一个强大的解决方案——DivKit。它是一个开源的 Server-Driven UI (SDUI) 框架，旨在帮助开发者告别繁琐的多端开发，实现 UI 的动态更新和跨平台统一。
我将分几个部分来介绍：
-
引言：介绍 DivKit 是什么，以及它解决了什么问题。
-
DivKit 的使用方法：
- JSON 结构和基本元素。
- 如何使用模板。
- 如何使用动作实现交互。
- 如何利用沙盒和示例。
-
DivKit 的实现原理（浅析） ：
- SDUI 的概念。
- JSON Schema 的作用。
- 跨平台渲染的实现思路。
-
为什么选择 DivKit：总结其优势。
-
提供学习资源和建议。
二、什么是 DivKit？
简单来说，DivKit 允许你通过服务器下发一份 JSON 数据，就能在不同的客户端（iOS、Android、Web）上渲染出一致的用户界面。这意味着，你不再需要为每个平台单独编写 UI 代码，只需维护一份 JSON 配置，就能轻松实现 UI 的更新和迭代，而无需发布新的应用版本！
DivKit 的核心优势：
-
跨平台一致性：一份 JSON，多端渲染，保证 UI 体验的统一。
-
快速迭代：无需发版，通过修改服务器端的 JSON 即可实时更新 UI。
-
降低开发成本：减少多端 UI 代码的编写和维护工作量。
-
易于集成：可以作为一个独立的视图轻松嵌入到现有应用中。
三、DivKit 的使用方法：从入门到实践
DivKit 的使用非常直观，核心就是编写符合其规范的 JSON 数据。
1. 基础 JSON 结构与元素
一个典型的 DivKit JSON 结构包含 templates（可选）和 card（必需）两部分。card 部分定义了实际的 UI 布局。
{
"templates": {
// Div 元素模板 (可选)
},
"card": {
// div-data (必需)
}
}
DivKit 提供了丰富的内置元素，例如：
-
div-text：显示文本 -
div-image：显示图片 -
div-container：布局容器，用于组织其他元素 -
div-separator：分隔线 -
div-button：按钮 (注意：DivKit 并没有直接的div-button元素，通常通过div-text或div-container结合actions来实现类似按钮的功能) -
... 还有更多，如
div-gallery,div-pager,div-input等。
示例：一个简单的文本和图片布局
{
"card": {
"log_id": "simple_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"orientation": "vertical",
"items": [
{
"type": "text",
"text": "Hello, DivKit!",
"font_size": 20,
"text_color": "#333333"
},
{
"type": "image",
"image_url": "https://example.com/some_image.png",
"width": { "type": "fixed", "value": 100 },
"height": { "type": "fixed", "value": 100 }
}
]
}
}
]
}
}
重要提示： 编写 DivKit JSON 时，务必参考官方的 JSON Schema 文件。Schema 定义了每个元素的属性、类型、必需字段和可选字段，是确保 JSON 正确性的唯一标准。
2. 使用模板 (Templates) 提升复用性
当你的 UI 中有重复出现的元素结构时，可以使用模板来避免重复编写。在 templates 部分定义模板，然后在 card 中通过 type 引用。模板属性使用 $ 前缀。
例如这个效果：
可以通过这样的JSON实现，定义一个templates为tutorialCard，然后在type中通过
type 引用，在里面替换templates的值
{
"templates": {
"tutorialCard": {
"type": "container",
"items": [
{
"type": "text",
"font_size": 21,
"font_weight": "bold",
"margins": {
"bottom": 16
},
"$text": "title"
},
{
"type": "text",
"font_size": 16,
"margins": {
"bottom": 16
},
"$text": "body"
},
{
"type": "container",
"$items": "links"
}
],
"margins": {
"bottom": 6
},
"orientation": "vertical",
"paddings": {
"top": 10,
"bottom": 0,
"left": 30,
"right": 30
}
},
"link": {
"type": "text",
"action": {
"$url": "link",
"$log_id": "log"
},
"font_size": 14,
"margins": {
"bottom": 2
},
"text_color": "#0000ff",
"underline": "single",
"$text": "link_text"
}
},
"card": {
"log_id": "div2_sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "container",
"items": [
{
"type": "image",
"image_url": "https://yastatic.net/s3/home/divkit/logo.png",
"aspect": {
"ratio": 3.9
},
"margins": {
"top": 10,
"right": 60,
"bottom": 10,
"left": 60
}
},
{
"type": "tutorialCard",
"title": "DivKit",
"body": "What is DivKit and why did I get here?\n\nDivKit is a new Yandex open source framework that helps speed up mobile development.\n\niOS, Android, Web — update the interface of any applications directly from the server, without publishing updates.\n\nFor 5 years we have been using DivKit in the Yandex search app, Alice, Edadeal, Market, and now we are sharing it with you.\n\nThe source code is published on GitHub under the Apache 2.0 license.",
"links": [
{
"type": "link",
"link_text": "More about DivKit",
"link": "https://divkit.tech/",
"log": "landing"
},
{
"type": "link",
"link_text": "Documentation",
"link": "https://divkit.tech/doc/",
"log": "docs"
},
{
"type": "link",
"link_text": "EN Community chat",
"link": "https://t.me/divkit_community_en",
"log": "tg_en_chat"
},
{
"type": "link",
"link_text": "RU Community chat",
"link": "https://t.me/divkit_community_ru",
"log": "tg_ru_chat"
}
]
}
]
}
}
]
}
}
3. 添加交互：动作 (Actions)
DivKit 不仅仅是静态展示，它也支持丰富的交互。通过 actions 属性，你可以为元素添加点击、长按等事件，并触发相应的行为，例如跳转页面、改变状态、发送请求等。
{
"card": {
"log_id": "action_example",
"states": [
{
"state_id": 0,
"div": {
"type": "text",
"text": "点击我跳转到 DivKit 官网",
"font_size": 16,
"text_color": "#007bff",
"actions": [
{
"log_id": "open_divkit_website",
"url": "https://divkit.tech/" // 通过 URL 触发动作
}
]
}
}
]
}
}
更复杂的动作可以通过 typed 方式定义，例如 set_state 用于切换 UI 状态。
4. 实践：沙盒与示例
DivKit 提供了非常友好的开发体验：
- 在线沙盒 (Playground) ：访问 divkit.tech/playground，你可以在网页上实时编辑 JSON，并立即看到渲染效果。
- 演示应用：下载 Android 演示应用，结合沙盒，你可以体验到实时更新 UI 的强大功能。
这些工具是学习和调试 DivKit 的绝佳帮手。
四、DivKit 的实现原理：SDUI 浅析
理解 DivKit 的工作原理，有助于你更好地驾驭它。
1. Server-Driven UI (SDUI) 的核心思想
Server-Driven” 直译过来就是“服务器驱动”。在 DivKit 下，它的意思是 用户界面的展示和行为是由服务器端的数据来决定和控制的 。
SDUI 的核心在于将 UI 的描述从客户端代码中抽离出来，放到服务器端。客户端只负责解析服务器下发的 UI 描述（在 DivKit 中就是 JSON），并将其渲染成原生界面。
传统模式 vs. SDUI 模式：
-
传统模式：UI 逻辑和布局硬编码在客户端，每次 UI 变更都需要客户端发版。
-
SDUI 模式：UI 描述在服务器端，客户端根据描述动态渲染，UI 变更无需发版。
传统 UI 开发模式（客户端驱动）
在传统的移动应用或前端开发中，UI 的布局、样式、组件类型以及它们之间的交互逻辑，大部分都是 硬编码 在客户端应用程序（比如 iOS 的 Swift/Objective-C 代码，Android 的 Kotlin/Java 代码，或者 Web 的 HTML/CSS/JavaScript 代码）中的。
-
客户端负责一切 ：客户端代码决定了屏幕上会显示什么按钮、文本框，它们长什么样，点击后会发生什么。
-
更新依赖发版 ：如果产品经理想修改一个按钮的颜色，或者调整某个页面的布局，开发者就需要修改客户端代码，然后重新编译、打包，并发布一个新的应用版本到应用商店。用户必须下载并安装新版本才能看到这些变化。
Server-Driven UI (SDUI) 模式（服务器驱动）
而 Server-Driven UI 则改变了这种模式：
-
服务器定义 UI 结构 ：服务器不再只发送业务数据（比如商品列表、用户信息），它还会发送一份 描述 UI 结构和行为的数据 。在 DivKit 中，这份数据就是 JSON 。
-
客户端解析并渲染 ：客户端应用程序（DivKit 框架）接收到这份 JSON 数据后，它不会直接显示 JSON，而是会 解析这份 JSON，然后根据 JSON 中描述的组件类型、属性、布局等信息， 动态地构建出原生或 Web 的 UI 界面 。
-
更新无需发版 ：如果产品经理想修改 UI，只需要服务器端修改并下发新的 JSON 数据。客户端下次请求时，就会拿到新的 JSON 并渲染出新的 UI， 用户无需更新应用 就能看到最新的界面。
2. JSON Schema：UI 描述的“蓝图”
DivKit 使用 [JSON Schema]来严格定义其 JSON 数据的结构和规范。这就像是为 UI 描述文件提供了一份“蓝图”：
-
数据类型验证：确保每个属性的值都是正确的类型（字符串、数字、对象、数组等）。
-
必填字段检查：强制要求包含所有必要的属性。
-
枚举值限制：限制某些属性只能取预定义的值。
JSON Schema 的存在，极大地保证了 DivKit JSON 的健壮性和可预测性，避免了因格式错误导致的渲染问题。
3. 跨平台渲染：统一的解析与渲染引擎
DivKit 的客户端库（Android、iOS、Web）都内置了统一的 JSON 解析器和渲染引擎。当客户端接收到 DivKit JSON 后：
-
解析 JSON：将 JSON 数据解析成内部的 UI 对象模型。
-
根据 Schema 验证：确保 JSON 数据符合预期的结构和规范。
-
渲染原生组件：根据 UI 对象模型，动态创建并配置各个平台对应的原生 UI 组件（例如 Android 的
View、iOS 的UIView、Web 的 DOM 元素），最终呈现在用户面前。
这种统一的解析和渲染机制，是 DivKit 实现“一份 JSON，多端渲染”的关键。
五、总结
DivKit 为我们提供了一种全新的 UI 开发范式，它让 UI 变得更加灵活、高效。无论你是前端、移动端还是后端开发者，了解并掌握 DivKit 都将为你的开发工作带来巨大的便利。
1.为什么选择 DivKit？
-
业务灵活性：产品经理和运营人员可以更频繁、更灵活地调整 UI，快速响应市场变化。
-
开发效率：开发者可以专注于业务逻辑，减少 UI 适配的工作量。
-
用户体验：无需更新应用即可获得最新的 UI 体验。
-
开源社区：作为开源项目，拥有活跃的社区支持和持续的迭代。
2.DivKit 核心概念总结：
-
Server-Driven UI (SDUI) 框架：DivKit 的核心思想是通过服务器下发 JSON 数据来驱动客户端 UI 的渲染，从而实现动态更新和跨平台一致性。
-
跨平台支持：它支持 iOS、Android 和 Web 平台，这意味着开发者只需编写一次 UI 布局（JSON 格式），即可在多个平台上运行。
-
易于集成：DivKit 可以作为一个简单的视图集成到现有应用中，即使不依赖服务器，也可以在客户端本地使用 JSON 数据进行尝试。
-
沙盒环境：提供了在线沙盒（divkit.tech/playground）和演示应用，方便开发者进行实验和预览。
-
JSON Schema 驱动：UI 布局通过 JSON Schema 进行定义和验证，确保数据格式的正确性。
3.开启你的 DivKit 之旅
- 从沙盒开始：在 divkit.tech/playground 上动手尝试，这是最快的入门方式。
- 阅读官方文档：访问 divkit.tech/doc 获取详细的文档和教程。
- 探索示例代码：查看项目中的
test_data/samples目录，学习不同元素的用法。 - 深入理解 Schema：仔细研究
schema/目录下的 JSON Schema 文件，掌握每个元素的细节。
