基于TS扩展的声明式开发范式【鸿蒙开发24】

❝作者：坚果 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO专家博主，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

大家可能会有疑问，为什么我不去介绍类Web开发范式，而来介绍基于TS扩展的声明式开发范式。其实介绍这种开发方式主要是现在或许以后会成为一个趋势,我在这里提到了一个声明式UI，那么什么是声明式U?与命令式UI又有什么区别？

❝什么是命令式UI

UI的更新是由程序员使用代码主动刷新，UI与数据并无必然的映射关系，这种我们称之为命令式UI

❝什么是声明式UI

UI的更新并非由程序员使用代码来主动刷新，而是由后面隐藏机制来负责维护UI的刷新，UI与数据有映射关系，这种我们就称之为声明式UI

上面这种定义只是个人愚见，根据上述定义，区分是命令式UI还是声明式UI的两个核心点是：

1. 程序员是否要显式的去调用代码刷新UI
2. UI与数据是否存在映射关系

基于TS扩展的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用设计研发的UI开发框架，支持开发者高效的构建跨设备应用UI界面。

那么目前声明式

基础能力

使用基于TS扩展的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。从组件、动效和状态管理三个维度来提供UI能力，还提供了系统能力接口，实现系统能力的极简调用。

• 开箱即用的组件 框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。
• 丰富的动效接口 提供svg标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。
• 状态与数据管理 状态数据管理作为基于TS扩展的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。
• 系统能力接口 使用基于TS扩展的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。

整体架构

img

• 声明式UI前端 提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。
• 语言运行时 选用方舟语言运行时，提供了针对UI范式语法的解析能力，提供了跨语言调用支持，提供了TS语言高性能运行环境。
• 声明式UI后端引擎 后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。
• 渲染引擎 提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕能力。
• 平台适配层 提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。