HarmonyOS UI框架概述

  UI即User Interface（用户接口，也称图形用户接口），用来显示可被用户查看的内容（如文字、图像、动画等可视化内容）以及可与用户交互的操作（如按钮点击、窗口滑动、手势触摸、图片缩放等），一般以页面（View）形式呈现。UI是人机之间传递、交换信息的接口；它实现了信息的内部形式与用户可接受形式之间的转换。UI具备两个主要的功能，一是可以显示数据信息给用户；二是可以捕获用户的动作，并在相应的事件中处理由此动作引发的业务逻辑。

一、 UI框架简介

  UI框架给View层提供强有力的技术支持，种类繁多，主要可以从对操作系统支持度以及应用实现（部署）方式两种角度进行区分。

1. 根据操作系统支持方式不同分类。

  根据操作系统平台应用的支持方式，UI框架一般可分为原生UI框架和跨平台UI框架两种。

  原生UI通常是一些系统内置的UI框架，如Android系统的View，IOS系统的UIKit等。原生UI框架的特点是只能运行在特定的操作系统上，与系统高度兼容，灵活性和扩展性相对有限。跨平台UI框架是指可以运行在2个或2个以上的操作系统上的UI框架，如HTML5前端框架React Native，Google框架Flutter等。

  跨平台UI框架可以只编写一次代码，经少量修改或不修改，而应用在不同操作系统上。由于跨平台UI不绝对依赖与某个特定的操作系统，所以其可可移植性强，灵活性、扩展性和复用性较好。跨平台UI框架的实现需屏蔽操作系统的差异，而提供给开发者统一的API，因此UI框架本身的实现难度较原生框架大。

2. 根据编程实现方式不同分类。

  根据编程实现方式不同，UI框架可分为命令式UI框架和声明式UI框架两种。

  命令式UI框架是一种“过程导向”式的实现方式，即告诉“机器”实现某种视图效果需要哪些具体步骤，每个步骤要如何做。典型的命令式UI框架如Android的View框架、IOS的UIKit框架等。框架本身提供了一系列的API可供开发者使用，从而通过命令式的语法描述设置UI组件的属性状态及状态改变、位移及缩放变换等，使开发者能够设计出高效、美观的界面效果。当然，这需要开发者提前了解学习大量API细节及实现方法，学习成本高；同时，具体实现效果的优劣与依赖于开发者本身的技能水平。

  声明式UI框架是一种“结果导向”式的实现方式，即只需告诉“机器”需要什么，而不用告诉“机器”怎么做。典型的声明式UI框架如Web前端框架Vue、IOS框架SwiftUI等。框架会根据开发者声明式的语法描述来渲染相应的UI，同时结合相应的编程模型及数据变化自动更新UI效果。声明式UI框架只需要开发者描述结果而不必关心具体的实现和优化，大大降低了学习成本。同时由于结果描述和具体实现分离，因此实现方式灵活，扩展性能佳。

  UI框架在应用开发中发挥着举足轻重的地位，其发展也在朝着跨平台、高性能、高复用性和强易用性的趋势发展。

1. 从命令式UI往声明式UI发展，方面更便捷、直观的进行UI设计与开发。如IOS的UI框架从UIKit到SwiftUI，Android中的UI框架从View到Jetpack Compose。
2. UI框架和语言运行时深度融合。SwiftUI，Jetpack Compose，Flutter都利用了各自的语言特性。比如在UI描述方面，SwiftUI中的Swift语言，Jetpack Compose中的Kotlin语言都精简了UI描述语法；在性能方面，Swift通过引入轻量化结构体等语言特性更好的实现内存快速分配和释放，Flutter中Dart语言则在运行时专门针对小对象内存管理做相应优化等。
3. 跨平台（OS）能力。跨平台（OS）能力可以让一套代码复用到不同的OS上，主要是为了提升开发效率，降低开发成本。当然运行在不同平台上的性能问题，能力和渲染效果的一致性问题等也给跨平台的实现带来了挑战。跨平台的实现主要有JS/Web方式、JS+Native混合方式、平台无关的UI自绘制能力+新的语言3种方式。

• JS/Web方案，比如HTML5利用JS/Web的标准化生态，通过相应的Web引擎实现跨平台目标；

• JS+Native混合方式，比如React Native、Weex等,结合JS桥接到原生UI组件的方式实现了一套应用代码能够运行到不同OS上；

• 平台无关的UI自绘制能力+新的语言，比如Flutter，整个UI基于底层画布由框架层来绘制，同时结合Dart语言实现完整的UI框架。Flutter从设计之初就是将跨平台能力作为重要的竞争力去吸引更多的开发者。

  随着智能设备的普及，多设备场景下，设备的形态差异（屏幕大小、分辨率，形状, 交互模式等），以及设备的能力差异（从百K级内存到G级内存设备等），以及应用需要在不同设备间协同，这些都对UI框架以及应用开发带来了新的挑战。

二、 HarmonyOS的ACE UI框架

  ACE全称是Ability Cross-platform Environment (元能力跨平台执行环境)。是华为设计的应用在HarmonyOS上的UI框架。ACE UI框架结合HarmonyOS的基础运行单元Ability、语言和运行时，以及各种平台（OS）能力API等共同构成HarmonyOS应用开发的基础，实现了跨设备分布式调度，以及原子化服务免安装等能力。

  ACE提供两种开发语言以供不同开发者进行选择，分别为Java语言和JavaScript语言。ACE UI框架以其独特的框架结构，很好的适配因类型、性能、内存大小、速度等差异较大的鸿蒙设备，如手机、大屏、智慧屏、穿戴设备、音箱、智能电饭煲等搭载了HarmonyOS的设备。

  ACE UI框架的设计思路是：

1. 建立分层机制，引入高效的UI基础后端，并能够与OS平台解耦，形成一致化的UI体验。
2. 通过多前端的方式扩展应用生态，并结合声明式UI，在开发效率上持续演进。
3. 框架层统一结合语言以及运行时，分布式，组件化设计等，围绕跨设备，进一步提升体验。

  ACE将应用的UI界面进行解析，通过创建后端具体UI组件、进行布局计算、资源加载等处理后生成具体绘制指令，并将绘制命令发送给渲染引擎，渲染引擎将绘制指令转换为具体屏幕像素，最终通过显示设备将应用程序转换为可见的界面效果展示给用户。

  ACE UI框架的整体架构如图1所示，主要由前端框架层、桥接层、引擎层和平台抽象层四大部分组成。

            图1 ACE UI框架架构图

1.前端框架层

  该层主要包括相应的开发范式（比如主流的类Web开发范式），组件/API，以及编程模型MVVM（Model-View-ViewModel）。其中Model是数据模型层，代表了从数据源读取到的数据；View是视图UI层，通过一定的形式把系统中的数据向用户呈现出来；ViewModel: 视图模型层，是数据和视图之间的桥梁。它双向绑定了视图和数据，使得数据的变更能够及时在视图上呈现，用户在视图上的修改也能够及时传递给后台数据，从而实现数据驱动的UI自动变更。开发范式可以扩展，来支持生态发展。不同的开发范式可以统一适配到底层的引擎层。

2.桥接层

  该层主要是作为一个中间层，实现前端开发范式到底层引擎（包括UI后端，语言&运行时）的对接。

3.引擎层

  该层主要包含两部分：UI后端引擎和语言执行引擎。

  （1）由C++构建的UI后端引擎，包括UI组件、布局视图、动画事件、自绘制渲染管线和渲染引擎 。

  在渲染方面，华为尽可能把这部分组件设计得小而灵活。这样的设计，为不同前端框架提供灵活的UI能力，这部分通过C++组件组合而成。通过底层组件的按需组合，布局计算和渲染并行化，并结合上层开发范式实现了视图变化最小化的局部更新机制，从而实现高效的UI渲染。

除此之外，引擎层还提供了组件的渲染管线、动画、主题、事件处理等基础能力。目前复用了Flutter引擎提供基础的图形渲染能力、字体管理、文字排版等能力，底层使用Skia或其他图形库实现，并通过OpenGL实现GPU硬件渲染加速。

  在多设备UI适配方面，通过多种原子化布局能力（自动折行、隐藏、等比缩放等），多态UI控件（描述统一，表现形式多样），以及统一交互框架（不同的交互方式归一到统一的事件处理）来满足不同设备的形态差异化需求。

  另外，引擎层也包含了能力扩展基础设施，来实现自定义组件以及系统API的能力扩展。

  （2）语言&运行时执行引擎。可根据需要切换到不同的运行时执行引擎，满足不同设备的能力差异化需求

4.平台抽象层

  该层主要是通过平台抽象，将平台依赖聚焦到底层画布，通用线程以及事件机制等少数必要的接口上，为跨平台打造了相应的基础设施，并能够实现一致化UI渲染体验。

  相应的，配套的开发者工具（HUAWEI DevEco Studio）结合ACE UI的跨平台渲染基础设施，以及自适应渲染，可做到和设备比较一致的渲染体验以及多设备上的UI实时预览。

  另外，ACE UI框架还设计了可伸缩的架构，即前端框架、语言运行时、UI后端等都做了解耦，可以有不同的实现。这样就具备可部署到百K级内存的轻量级设备的能力。

  ACE UI框架具备如下特点：

1. 支持主流的开发语言Java及JavaScript，分别对应命令式和声明式两种开发模式；
2. 支持类Web开发范式， MVVM机制。并在架构上可支持多前端开发范式，进一步简化开发；
3. 通过统一的UI后端，实现高性能以及跨平台一致化的渲染体验；
4. 通过多态UI、原子化布局、统一交互，以及可伸缩的运行时设计，进一步降低不同设备形态下的UI开发门槛，并能够通过统一的开发范式，实现一套代码跨设备部署（覆盖百K级到G级内存设备）；

  HarmonyOS提供的UI框架根据支持的语言不同，可以分为Java UI框架和JS UI框架两种。

  Java UI框架，命令式开发模式，相对来说都是细粒度的API，完全由开发者控制。开发者操纵UI实现具体变更，通过调用API来实现整个UI编程的目标。

  JavaScript UI框架，即JS UI 框架，声明式开发模式，开发者只要通过声明式语法描述好UI，以及明确什么样的数据状态改变，涉及什么样的UI变更，其余由框架层来具体实现。

1. Java UI框架

  Java UI框架是命令式UI框架，其整体架构分为五个部分（如图2所示）。

  （1）Java UI框架接口层。包括控件、布局、动效和JSON/XML描述。

  （2）多态控件、布局和动效实现。包括核心的C++层，有相应的多态控件布局，各种各样动效实现。

  （3）视图管理。生成UI控件对应的View对象，管理View对象的生命周期（更新，加载，卸载，删除)，维护View对象组成的UI hierarchies关系。

  （4）渲染树。维护View对象对应的Render Node, 维护UI组件变更引起的渲染树的变更，生成Render Node对应 Draw Command。

  （5）2D/3D渲染引擎。执行Draw Command, 生成UI控件所包含的线条、面、文本对象。

                图2 Java UI架构

  JavaUI渲染采用多线程设计，构建了UI线程、GPU线程以及IO线程，将渲染流程分为几个阶段：在应用框架部分，创建窗口，创建相应的Java UI接口。在资源加载之后，由相应的UI框架组件部分转化成Native视图，Native视图包括整个控件布局实现、动效实现、视图抽象、事件处理、渲染抽象等，同步UI线程，渲染树会交给UI框架渲染部分（GPU线程）来做相应的渲染以及最终的合成，这就是整个ACE Java的渲染过程（如图3所示）。

               图3 Java UI框架渲染流程

2. JS UI框架

   JS UI框架是声明式UI框架，总体架构主要分为前端和后端（如图4）。

  （1）前端主要是JavaScript的前端框架。这里采用的是类web的前端开发模式，开发相应的UI。

  （2）后端主要分为以下几个部分：

•   UI 引擎部分。即呈现的构建部分，包含JS执行引擎本身， 由C++构建的声明式UI后端引擎（包括UI组件实现、布局视图、动画事件）和渲染引擎，这些共同构建了整个UI的呈现。
•   中间转换层。通过中间转化层，把前面JS的UI描述，转化成声明式UI，让后端引擎去执行。
•   能力扩展。HarmonyOS提供“扩展API“包括各种各样的分布式能力、系统的基础能力。通过能力扩展基础设施，开发者可以调用JavaScript API来实现更丰富的逻辑功能。
•   跨平台的适配层。从设计上来说，HarmonyOS可以实现跨设备跨OS。主要是因为整个渲染路径是由后端完全自己绘制的，通过一个底层画布来实现UI功能，这样对OS的依赖相对较少，能达到跨平台的效果。
•   平台桥接层。HarmonyOS与其他OS内的基础设施以及基础能力通过桥接方式，从而达到应用跨平台运行以及能力扩展的目标。借助于IDE或其它工具链的帮助，实现通过JS开发后，部署到不同的设备上的目标。

  总的来说，通过声明式UI框架，借用类Web前端的简易开发能力，同时结合后端引擎的高性能能力，HarmonyOS帮助开发者达到易开发，高性能的目标。通过HarmonyOS的跨平台渲染基础设施，能够达到相对比较一致的跨平台的体验。如电视或手表上的预览路径、渲染路径基本保持一致，达到一个较好的实时预览效果，从而得到较一致的渲染体验。

              图4 JS UI架构图

​ JS UI框架运行流程（如图5所示。）当一个应用启动时，最早是从Ability（HarmonyOS运行的最基础单元）出发，Ability内有UI的框架部分。前端框架的整体职责就是加载解析和运行JS应用，并完成前端开发范式的组件树到声明式后端渲染框架层Component树的复杂对接。后端渲染框架是实现整个渲染流水线管理的核心部分，维护了三棵渲染相关的树：Component树、Element树和Render树，一些耗时的IO操作，例如图片相关的获取和加载放在了单独的IO线程，这些都纳入到了容器的统一管理之中，配合动画、事件等，完成UI线程的绘制，最终由渲染引擎负责光栅化以及合成上屏，构建了高效的渲染流水线。

  前端部分通过JS 线程、UI线程、以及IO线程的多线程设计实现并行化处理，从而达到较好的执行效率，以及较高的性能。

          图5 JS UI框架运行流程

3. JS UI框架为百K级设备提供轻量化框架

  Java UI框架适合于在内存较大的设备上使用，如大屏、手机、平板等设备，而JavaScript UI框架除可在大内存的富设备（至少有512MB以上）上使用外，还提供了轻量化的框架（如图6所示），支持在百K级设备上使用。

          图6 JS UI轻量化框架

  在轻量化框架实现中，HarmonyOS把前端C+ +核心框架下沉化，减小JS部分的内存占用，使用C++进行更为严格的内存分配与管理，并且采用更为轻量的JS引擎，UI部分采用轻量的UI Kit并结合轻量图形引擎，达到内存非常轻量占用的目标。接口能力保证是全量能力的子集，这样可以保证轻量化设备上可执行的应用，可以在更高等级的设备上执行，而无需重新开发。这也就是采用ACE JS开发范式的优势所在，采用统一的开发范式进行应用开发后，开发者无需关心具体运行时的前端框架、JS引擎与后端UI组件，根据运行平台不同，采用最佳的模块，保障了应用在不同平台都可具有最佳的运行性能。不过由于轻量级设备上的资源限制，所支持的API能力相对有限，但公共部分的API是完全共通的。

---

非原创，整理参考自：
https://harmonyos.51cto.com/posts/7518
https://harmonyos.51cto.com/posts/7521