上一节介绍了HarmonyOS的一些概念，并简单介绍了ArkTS，以及怎么使用官方编辑器DevEco Studio创建加单的应用。从这一节开始，将开始介绍构建应用UI相关内容。

UI 设计目标

华为面临很多挑战，无论是技术方面的，还是来自其它方面的，所以要设计操作系统以及打造一个框架，一定是重新研发的，而不是在现有平台基础之上修改， UI 也是重新设计的，它的设计目标总结起来基本包含这么几个方面。

1. 能够实现跨多端，多设备，还有多尺寸的屏幕；

2. 能够实现一套代码适配多终端设备；

3. 一次开发多端部署，要能保证一致的设计和开发风格；

4. 不使用 Java，也不使用 ART，因为鸿蒙操作系统在去 Java 化，基本上不再使用 Java 了；

5. 能保证一致的事件和动效的处理机制；

6. 支持多语言和高效的语言运行时，而且还要支持在多种不同的设备上使用。

ArkUI架构

方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

基本概念

• UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。
• 组件：UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

架构

从 ArkUI 的整体架构图可以看到它实际上分为三层：

1. 底层基本是前后端分离的模式，即分为架构前端，也就是前端架构层，引擎层，可以认为是 ArkUI 的后端。

2. 中间一层桥接层，它专门用来连接 ArkUI 的前端，也就是方舟框架的前端和后端之间的一个连接层，这套框架是华为完全从 0 开始研发的一套端对端开发框架，可以看到 ArkUI 框架的前端包含三个部分：类 Web 范式的框架、声明式的 UI 框架、卡片 UI 框架。卡片框架就是华为现在手机上有很多卡片的显示，它使用的也是这套 Ark 框架，桥接层主要实现一些连接的功能，也就是把前端和后端进行连接，后端包含很多东西，比如说多态 UI 控件，即所有的组件都做成多态的形式，另外还有统一交互框架、布局引擎、API 能力扩展以及组件的一些扩展，还有语言及其运行时。

3. 下面还包括一个自绘制的渲染管线，最底层使用了一个统一的框架层渲染引擎，同时 ArkUI 也提供了一套完整的开发套件，包括多设备的实时预览、代码和 UI 的双向定位等。

两种开发范式

针对不同的应用场景及技术背景，方舟开发框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。

• 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。
• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用。

在开发一款新应用时，推荐采用声明式开发范式来构建UI，主要基于以下几点考虑：

• 开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。
• 应用性能：如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

方舟开发框架示意图

不同应用类型支持的开发范式

根据所选用HarmonyOS应用模型（Stage模型、FA模型）和页面形态（应用或服务的普通页面、卡片）的不同，对应支持的UI开发范式也有所差异，详见下表：

ArkUI JS

我们先看一看框架里一个小的方面，就是 ArkUI JS 这个轻量级开发框架，这套框架实际上是针对 Web 开发者的，它采用的是一种类小程序、类 Web 范式的开发框架，我们来看一看它的特征。这套框架是 ArcGIS 的框架，普通的 Web 开发人员基本上 0 成本就可以上手开发，它的开发模式就是 Web3 范式，基本上跟小程序有点类似，比如说界面层采用的是类似于标签的写法，整体的样式采用 CSS，整体逻辑方面使用 JS，整个框架的前端采用了标准的 MVVM 模式。这个和前端小伙伴熟知的像 Vue 类似的框架是很相似的，在布局方面它能做到很好的适配，这是因为采用了和 W3C 同样的标准实现了一套布局方案，基本上支持 Web 方面的布局，比如 CS3 里面的 Flexbox 以及 Grid 布局。它也很好支持了像 JavaScript 里面的 ES6 的模块化和异步编程。

我们看一下 ArkUI JS 的架构图，可以看到它是标准的前后端分离的架构模。整个 Ark 框架分为前端和后端，前端主要是 JavaScrip 的前端框架，它里面包含了一个轻量级的 MVVM 模式的前端框架以及一些组件库之类的东西，后端是使用 C++ 编写的，完全是华为自研的一套 ArkUI 后端体系。这个体系里包含的东西非常多，比如 JS 引擎，我们这幅图里使用的还是 JS 引擎，但现在已经换成了 ArkCompiler，也就是方舟编译器。它中间有一个中间转换层，以及声明式后端引擎，里面包含一些组件的布局和动画等东西。

还有统一的渲染引擎，它包括很多扩展能力，整个后端底层架构在跨平台的适配层上，这是整个鸿蒙分布式的一套框架叫做 ACE，跨平台的一套适配层上面有平台连接层，通过连接层去连接后端分布式的一些东西。

ArkUI JS 的设计目标就是要让开发者容易上手使用，基本上广大的 Web 开发者可以 0 成本转移到 ArkUI JS 上进行开发，因为它的开发模式都是前端比较熟悉的。第二点就是强调高性能，它整体的性能非常好的，能够达到秒开的效果，即两秒内能够打开。第三点要做到跨平台，即整体要能够适配 1+8+N 的设备，还有另外一点是有比较好的 PC 实时预览能力。

我们大致来看一下这个更为详细的 ArkUI JS 运行流程图。这幅图里白线的部分是整个 ArkUI JS 的启动初始化流程，黄线部分是 ArkUI JS 的页面加载渲染流程。首先 ArkUI JS 的启动是由平台对接层发起的，这里包含 ACE（ACE 是鸿蒙的一套跨平台框架，全称是 Ability Cross-platform Environment）还有 ACEView 和 PlatformWindow 来启动整个窗口，启动之后就会启动 ArkUI JS 的声明式后端引擎。声明式后端引擎里面主要包括几个主要线程，一个是基础管理的 UI 线程，另外一个是渲染构建的 UI 线程，另外还有 IO 线程和 GPU 线程，这是整个后端的结构。

后端引擎启动之后，由基础的管理 UI 线程调用整个框架的前端，可以看到前端框架里基本包含两个主要线程，一个是 JS 的运行时，它里面包含 JS 线程以及 DOM 类型的 UI 线程，最重要的是 JS Framework，它是一个大家比较熟悉的类似前端中 Vue 的框架，是一个轻量级的框架，它里面包含次数绑定、事件管理和生命周期相关的东西，这一层需要和 DOM 进行映射，整体的启动流程是由平台层发起，由后端的基础管理线程驱动。整个框架的前端启动之后，把整体的页面结构交给后端 UI 线程中的渲染构建线程，进行三个数的映射，即 Component 树、 Alignment 树和 Render 树映射，包括布局的计算，最终由 GPU 线程渲染到页面上，就是这样一个流程。

我们看一个官方的开发实例，比如说有一个音乐播放组件，这个组件是一个多态的组件，我们如图这样来使用它，大家应该都比较熟悉这种类似于标签的写法，把标签引入进来之后，设备会自动进行布局适配，这个代码非常简单。比如说我们要实现图中这个效果，首先通过标签的方式在它的标签文件里面进行声明，这种多态的布局支持媒体的查询，这里完整地重构了一套 W3C 的布局，整个开发过程中类似逻辑方面的实现，是使用 JavaScrip 进行编写的，最终的结果是我们这套代码能在多种终端上显示，这套方案相对来说还是比较简单的。

ArkUI eTS

iOS 和安卓的软件开发者的 ArkUI eTS 框架，它是华为研发的一套声明式 UI 框架。开发这套框架主要有几个目的，第一点是彻底删除 Java，第二点是要优化 ArkUI JS 的性能，第三点是要提升整体开发效率。

ArkUI eTS 在整体的设计方面，首先是使用了声明式的 DSL，也就是 Swift UI 的 DSL，如果熟悉 Swift UI 就可以直接上手这个框架的开发；另外一点是使用 TypeScript 这种强类型的开发语言，因为 ArkUI JS 是针对 Web 开发者的，它针对的是低端设备而不是富设备，而 ArkUI eTS 是主要针对大型项目，在高性能的富设备上运行的，它首次使用了强类型的开发语言 TypeScript，但是在 TypeScript 的基础上做了一些功能扩展，比如加入了 VC 的闭包；另外也同样采用了前后端解耦的模式，主要目的是让这套前端框架能适配到其它不同的平台上，比如说适配到 PC。另外 ArkUI eTS 使用了独立的渲染管线，目的是优化渲染效果，独立的渲染管线在应用端是一个独立的渲染线程，这个线程能通过并行的方式让 CPU 给 GPU 提供更多的渲染素材，以此提升框架整体的渲染效果，这也是 ArkUI eTS 非常重要的设计。

上图从整个 ArkUI 的结构上与 Flutter 做了一个比较，二者结构上有相似的地方，Flutter 使用的是 Skia，上面一层使用了 Flutter Framework，再上层是 Flutter UI 这个组件。

ArkUI 使用的是 Ark Framework，是华为重写的一套在 Skia 上层的框架，整体上跟 Flutter 很相似，因此 ArkUI 未来肯定能够同时支持 1+8+N 设备，也能支持 iOS 和安卓。

我们再来看一看 ArkUI eTS 的架构图，可以看到它和 ArkUI JS 的架构基本类似，也是由声明式前端以及声明式后端组成的，语言运行时使用的是华为自研的方舟编译器，包含了跨平台的调用，支持 JS、eTS 以及 C++ 的混合编程，自绘制的渲染管线用来提升整体的应用渲染效果。

底层使用了统一的渲染引擎，前面说到它底层使用的是 Skia，华为目前在自研新的渲染引擎，未来研发成功之后会替代 Skia，但是它也采用了整体统一的渲染引擎设计。这种设计的好处是能够避免重复渲染，所有终端里的渲染需求都会统一提交给到渲染引擎，使渲染效果得到提升。

可以看到整个 ArkUI eTS 框架在前端使用了新一代的声明式 UI 范式，编译器采用了方舟 3.0 编译器，使用这个编译器的好处是能够统一语言平台，为华为未来自研的开发语言，比如说仓颉语言留下空间，支持多语言混合开发的模式。另外无须使用 Java Framework，去掉了前端里的 JavaScript 引擎，直接采用前端 DOM 和后端 element-tree 的映射方案来提升整体性能。

我们来看一下方舟编译器，它是华为花了很大力气研发出的新一代编译器，方舟编译器的主要目标是把方舟开发框架的前端，像 Java、JS、TS 等其它 DSL 相关的东西通过方舟工具链编译成相应的 Binding Code，并交给方舟运行时运行，方舟编译器里实际还包含着一个编译器，就是端内的 JIT 和 AOT，然后再和方舟框架后端进行绑定。

这是新一代方舟编译器的整体效果，我们可以比较一下 JS 和 Ark 方舟框架的代码量，右边是新一代框架，左边是老的框架，也就是 JS 框架，Ark 框架的整体代码量有非常大的缩减，所以实际上提高了开发效率。

另外 Ark UI 除前端显示能力之外，还提供了一些非常强大的能力，比如说设备与网络的连接、应用管理的连接，除此之外还提出了分布式的理念，比如说能实现在框架的应用内启动远程设备，能够对远程设备里运行的应用进行连接、调度、迁移，以及进行数据库管理。

小结

本章节主要介绍了华为的UI设计目标，以及ArkUI架构，并通过开发语言、架构、编译等详细介绍了ArkUI JS和ArkUI eTS。当然未来我们如果真的要开发HarmonyOS相关应用的话，经过以上对比，以及官方的未来发展方向，推荐大家使用ArkUI eTS的方式进行开发。