作者：yuzhiqiang，UI编程框架首席技术专家
在Harmony 3.0.0开发者预览版中，蕴含了新一代的申明式UI框架ArkUI 3.0、多语言跨平台编译器ArkCompiler 3.0、跨端开发工具DevEco Studio3.0，以及基于TS/JS语言的API 7，全面晋升开发者体验。
本期，咱们要为大家重点介绍HarmonyOS新一代申明式UI框架ArkUI 3.0。
一、UI编程框架
在介绍ArkUI 3.0之前，咱们先来简要理解一下什么是UI编程框架。
UI编程框架，是为利用开发者提供的开发UI的基础设施，次要包含UI控件（按钮/列表等），视图布局（摆放/排列相应的UI控件），动画机制（动画设计以及成果出现），交互事件处理（点击/滑动等），以及相应的编程语言和编程模型等。从零碎运行的维度来看，UI编程框架也包含一个运行时，负责利用在零碎中执行时所需的资源加载、UI渲染和事件响应等。
总体而言，UI编程框架提供了开发以及运行UI界面所须要的框架能力，次要架构如下图所示：
1.jpg
图1 UI编程框架
开发模型：对开发者提供开发范式、UI控件/布局/动效/交互、编程语言等。它体现的是开发效率与难易水平。
运行框架：UI界面渲染及交互的根底能力框架，包含相应的布局引擎、控件机制、动效引擎、事件机制、渲染管线等，并联合语言虚拟机和图形引擎，将开发者的程序运行在具体零碎平台上。它体现的是利用运行的性能体验。
平台适配：承载框架的具体操作系统或平台适配层。
UI编程框架的要害需要，次要有以下两类：
开发效率：包含代码量、学习曲线、工具、社区、三方库齐备度等。
性能体验：包含启动速度、帧率、响应时延、酷炫成果、资源占用等。
另外，随着智能设施的急剧增长，UI编程框架还须要思考如何更好地适配不同设施的差异性，包含设施状态差别（比方屏幕形态、尺寸、分辨率、交互模式等），以及设施能力差异（比方内存、CPU、GPU等）。
二、ArkUI框架的演进
为了更好地满足开发效率和性能体验等相干的需要， ArkUI 3.0综合思考了UI渲染以及语言和运行时，围绕着极简开发、高性能、跨设施跨平台进一步演进。下图形容了ArkUI整体架构的演进：
2.jpg
图2 ArkUI框架演进
图的左侧是2020年公布的JS UI框架的架构示意图。它次要反对类Web的前端开发范式，通过DSL（domain-specific language，畛域特定语言）转换层，跨语言对接到申明式UI后端引擎，并联合JS引擎实现整体UI渲染。图的右侧是新的ArkUI 3.0框架，次要有以下几个要害的变动：
（1）引入了新一代的申明式UI开发范式，实现极简的UI形容语法。
（2）设计了对立的前后端扁平化渲染机制，进一步晋升UI渲染的性能并升高内存耗费。
（3）深度联合ArkCompiler 3.0的方舟编译器和方舟运行时，晋升语言的执行性能和跨语言通信能力。
（4）在工具方面，针对新一代的申明式UI开发范式构建了新的编译工具链和预览引擎，提供了所见即所得的实时预览机制。
另外，在ArkUI 3.0框架中，类Web范式会持续保留，即类Web范式和新一代的申明式UI范式都能够反对，能够各自独立应用，但不能混用。
三、ArkUI 3.0的要害个性
接下来咱们开展具体介绍一下ArkUI 3.0的要害个性。
- 新一代的申明式UI开发范式
具体而言，ArkUI 3.0中的新一代申明式UI开发范式，次要特色如下：
（1）基于TypeScript扩大的申明式UI形容语法，提供了类自然语言的UI形容和组合。
（2）开箱即用的多态组件。多态是指UI形容是对立的，UI出现在不同类型设施上会有所不同。比方Button组件在手机和手表会有不同的款式和交互方式。
（3）多维度的状态管理机制，反对灵便的数据驱动的UI变更。
上面咱们以一个具体的示例来阐明新一代申明式UI开发范式的根本组成。如图3所示的代码示例，UI界面会显示一个“Hello World”的文本和一个“Click me”按钮。当用户点击“Click me”按钮时，字符串变量myText的值会从“World”变为“ACE”，文本最终显示为“Hello ACE”。
3.jpg
图3 申明式UI开发范式的基本概念
以上示例中所蕴含的申明式UI开发范式的根本组成阐明如下：
装璜器：用来装璜类、构造体、办法以及变量，赋予其非凡的含意，如上述示例中@Entry、@Component、@State都是装璜器。@Component示意这是个自定义组件；@Entry则示意这是个入口组件；@State示意组件中的状态变量，这个状态变动会引起UI变更。
自定义组件：可复用的UI单元，可组合其它组件，如上述被@Component装璜的struct Hello。
UI形容：申明式的形式来形容UI的构造，如上述build()办法外部的代码块。
内置组件：框架中默认内置的根底和布局组件，可间接被开发者调用，比方示例中的Column、Text、Divider、Button。
事件办法：用于增加组件对事件的响应逻辑，对立通过事件办法进行设置，如追随在Button前面的onClick()。
属性办法：用于组件属性的配置，对立通过属性办法进行设置，如fontSize()、width()、height()、color()等，可通过链式调用的形式设置多项属性。
上述示例中，用@State装璜过的变量myText，蕴含了一个根底的状态管理机制，即myText的值的变动，会引起相应的UI变更（Text组件）。ArkUI 3.0还提供多维度的状态管理机制。和UI相关联的数据，不仅仅在组件内应用，还能够在不同组件层级间传递，比方父子组件之间，爷孙组件之间，也能够是全局范畴内的传递，还能够是跨设施传递。另外，从数据的传递模式来看，能够分为只读的单向传递和可变更的双向传递。开发者能够灵便的利用这些能力来实现数据和UI的联动。
ArkUI采纳嵌入式畛域特定语言（embedded Domain Specific Language， eDSL）的模式，联合宿主语言能力实现UI开发。通过eDSL，联合语法糖或者语言原生的元编程能力，设计了对立的UI开发范式，并可能联合不同语言来实现利用的逻辑解决局部。
- 要害渲染性能
上面通过一个简略的示例代码，为大家讲述从代码到UI显示的整体渲染流程。如图4所示，此示例会在UI界面显示一个“Click me”按钮，按钮上面同步显示按钮的点击次数。当用户点击按钮时，上面的点击次数会相应减少。
4.jpg
图4 整体渲染流程
整个渲染过程分为两个阶段：
（1）初始显示流程（步骤①~⑤）
① 源代码通过相应的工具链，编译为带有类型标记的指标文件，同时也蕴含了如何创立UI构造信息的指令流。
② 通过跨语言调用并生成了C++层Component树（UI形容层）。
③ 通过Component树进一步生成Element树。Element是Component的实例，示意一个具体的组件节点，它造成的Element树负责维持界面在整个运行时的树形构造，不便计算更新时的部分更新算法等。
④ 对于每个可显示的Element都会为其创立对应的RenderNode。RenderNode负责一个节点的显示信息，它造成的Render树保护着整个界面渲染须要用到的信息，包含地位、大小、绘制命令等。后续的布局、绘制都是在Render树上进行的。
⑤ 实现真正的渲染并显示绘制后果。
（2）按钮被点击后的显示流程（步骤⑥~⑪）
⑥ 点击事件传递到组件，组件的onClick事件办法被触发执行。
⑦ 因为onClick事件办法中@State注解过的变量扭转了，相应getter/setter函数会被触发。
⑧ 状态治理模块定位出关联的UI组件。
⑨ 状态治理模块更新相应的Element树的信息。
⑩ 更新相应的UI组件的渲染信息。
⑪ 界面显示，与⑤相似。
整个渲染过程中所需的要害能力，除了极简的开发范式自身，次要蕴含以下三个局部：
编译优化以及跨语言调用。联合指标文件中的类型信息标记，ArkCompiler会实现相应的代码优化。另外，ArkCompiler也提供了高效的JS/TS -> C++跨语言调用机制。
扁平化渲染机制以及小对象组合机制。组件信息的构造在前后端有基本一致的示意，进一步缩小了转换开销，实现了扁平化的渲染。同时，UI组件外部都是通过轻量化对象来按需组合，内存耗费也进一步升高。
状态管理机制。通过监听变量的存取操作，实现数据变动的自动化感知并计算出相应的最小化UI组件更新范畴，实现高效的UI变更。
除此之外，长列表渲染是一种典型的利用场景，外面可能会波及到大量的数据，如果处理不当，会引起极大影响性能以及资源占用。ArkUI 3.0针对这类罕用的场景，提供了一种LazyForEach懒加载机制，会主动依据具体情况计算出适合的渲染数据，实现数据的按需加载，从而晋升UI刷新效率。LazyForEach能够联合罕用的列表类组件（比方List、Grid等）灵便配合应用。
- 高级UI组件库
高级的UI组件库能够进一步助力高效的利用开发。HarmonyOS的欧洲研发团队基于ArkUI 3.0，构建了一些高阶组件示例，比方：罕用的图表类组件、瀑布流布局组件等。开发者能够通过几行代码就能够实现简单酷炫的UI成果，比方自适应的图片增删、行列变动，以及相应的酷炫动效成果。
示例如下：
https://v.qq.com/x/page/o3309...
图5 图表组件
https://v.qq.com/x/page/t3309...
图6 瀑布流布局组件
- 多设施开发
除了UI开发套件，ArkUI 3.0围绕着多设施开发，还提供了多维度的计划，进一步简化开发：
（1）根底能力层：包含根底的分层参数配置（比方色调、字号、圆角、间距等），栅格零碎，原子化布局能力（比方拉伸、折行、暗藏等）。
（2）零部件组件层：包含多态控件，对立交互能力，以及在此基础上的组件组合。
（3）面向典型场景：提供分类的页面组合模板以及示例代码。
对于多设施开发，前面咱们会有更具体的文章介绍，请大家继续关注。
- 实时预览机制
整个开发流程中还有一个很重要的方面——预览能力，即能够在PC上通过IDE（集成开发环境）就能够实时看到利用的渲染成果，而无需通过具体设施来部署运行。预览的要害需要次要包含：
（1）一致性渲染：和指标设施统一的UI出现成果。
（2）实时预览&双向预览：改变相应的代码，实时呈现出相应UI成果。另外，代码可能和UI双向联动，代码改变的同时UI也实时变更，UI改变的同时代码也相应地变更。
（3）多维度预览：页面级预览、组件级预览、多设施预览。
以上这些能力都须要UI编程框架具备相应的基础设施能力达成。ArkUI 3.0的预览器的整体架构如下图所示：
图7 ArkUI 3.0的预览器架构
ArkUI 3.0基于底层的画布通过自绘制实现了不同平台上统一化的渲染体验，并通过渲染侧的跨平台对接层实现了整体渲染成果。另外，ArkUI 3.0通过实时代码变化检测和增量编译机制，再配合后面所提到的高效渲染性能，实现了实时编写预览。
通过ArkUI 3.0的基础设施，联合IDE可视化工具（即预览器前端），就实现了下面的实时预览、双向预览等能力，进一步晋升了开发者的开发效率。
四、结束语
总体而言，UI编程框架在利用开发中起了至关重要的作用。目前，领有全新开发范式的新一代的UI框架——ArkUI 3.0走出了松软的第一步，并已开始撑持更多的要害利用。接下来，除了基础设施的继续欠缺，咱们会重点反对生态扩大，次要包含高级UI能力的晋升，比方三方地图，游戏的交融，以及Web能力加强等。同时，咱们也会围绕跨设施、性能体验继续地翻新。欢送宽广的开发者退出进来，一起摸索，一起改良，共建万物互联的利用生态！将来，有迹可循！