■ 开发模型:对开发者提供的开发范式、UI组件/API能力、编程语言等,重点体现的是开发效率与难易程度;
■ 运行框架:UI界面渲染及交互的基础能力框架,将开发者的程序运行在具体系统平台上,包括应用整体渲染处理流程,语言逻辑执行流程,以及平台能力扩展机制,重点体现的是应用运行的性能体验;
■ 平台适配:承载框架的具体操作系统或平台的适配层。
一般而言,应用框架中的包管理、生命周期/权限管理,和具体的操作系统关联较紧,并相对稳定;能力API则是操作系统对设备能力的封装,主要影响应用使用设备的能力。UI框架以及相应的编程语言则是影响用户体验(包括开发和运行体验)的关键要素,尤其随着移动平台的不断普及以及移动设备的差异,移动平台上的UI框架(含编程语言)是业界不断演进的重点领域。
近十年来,业界UI编程框架围绕着更好的开发效率,更好的运行体验以及适应更多的平台不断发展演进。其中有三个关键的时间节点:
1. 2013年,Facebook发布的React.js第一次综合的将数据绑定,虚拟DOM(Document Object Model)等机制引入前端开发框架设计中。开发者只需声明好相应的数据和UI的绑定,之后由框架来跟踪数据的变化,并通过虚拟DOM树的对比找出变化点,从而实现界面的自动更新,而无需开发者手动基于DOM 编程。
2. 2018年,Google发布的Flutter则是个重要的分界点。Flutter融合了Dart语言,是第一个深度融合了语言的较为完整的声明式开发框架,实现了完全通过数据驱动的UI变更。另外,Flutter通过基于Skia的自绘制引擎实现了高性能的跨平台的平台一致性的渲染能力,并提供了Hot Reload机制提升开发测试体验。不过,Flutter的整体设计哲学偏向底层的灵活性 – 主要通过底层的细粒度的能力供开发者自由组合,另外,Google对Dart语言的简洁度的改进较少,整体上开发的简洁度以及对用户的友好度不足。
3. 2019年,Apple SwiftUI的推出,意味着主流OS的原生应用框架开始逐步往声明式开发方式迁移。SwiftUI推动了Swift语言特性扩展实现了更加简洁自然的UI描述,并通过XCode开发工具的所见即所得的高效预览能力进一步提升开发效率。同时,SwiftUI也是真正意义上开始通过一套框架,逐步统一Apple生态中的不同的设备/OS上的应用开发。另外,2019年Google将更简洁的Kotlin语言升级为Android首选的编程语言,并在2021年推出基于Kotlin的应用框架Jetpack Compose, 同时结合开发工具Android Studio逐步往多设备以及跨平台演进。
■ 总体而言,移动端应用框架的演进包含以下几个关键特征:从命令式UI开发逐步演进到声明式UI开发;
■ UI和编程语言的融合从相对松散演进到逐步紧密;
■ 开发范围从单设备演进到多设备,从单平台演进到多平台。
02►万物智联下的应用框架的架构设计思考
目前,在万物智联的新场景下,智能设备的数量和种类越来越多,场景也越来越复杂,存在着新需求和新挑战:1.设备间具有不同形态:各设备的屏幕不同,其分辨率、长宽、形状、尺寸等均不相同;2.设备自身的交互方式不同:存在触控、键鼠、遥控、语音、3D手势等多种形式;3.设备间具有不同的能力:各设备的CPU、GPU、NPU、蓝牙等处理能力不同,且RAM、ROM的规格也不相同;4.设备之间的交互方式也不相同:例如无缝流转、协同等。此外,跨OS平台,动态内容部署能力也是重要的需求。
如何设计相应的应用框架来应对挑战呢?以下将从语言选型和框架设计两个维度来讨论。
2.1►►语言选型
如图所示的排行榜显示了在2012年至2022年的区间里,最活跃、热度最高的前20名编程语言,由图可以看出JavaScript和TypeScript的排名是遥遥领先的,本身拥有非常好的生态基础。但是,JavaScript和TypeScript也有一定的缺陷,比如缺失基于类型系统的运行时优化,AOT能力,精细化类型以及细粒度的并行化等。
2.2►►框架设计
相应的,现有框架如Web引擎、React Native、Flutter等在各自领域都具备一定的优势,但也存在性能体验及其与生态难平衡、HTML+CSS+JS三段式开发方式和业界领先的声明式开发(SwiftUI)相比有较大差距的问题。
2.3►►设计思考
尽管业界在语言、框架等各领域都持续进行了相关改进,但始终缺乏系统性的跨越。对于单平台应用框架来说,需要解决开发效率(开发范式、语言、基础库、三方库、调试调优、预览等)、性能体验(性能、内存、功耗、能力完备度等)以及跨设备(不同设备的UI适配和能力适配)等核心问题;对于跨平台应用框架来说,需要解决不同平台的代码复用度、性能和体验不一致等核心问题。此外,还需要考虑动态化内容部署机制和应用部署等因素。
03►ArkUI的创新和实践
OpenHarmony应用框架围绕如何解决上述问题,设计了ArkTS开发语言以及ArkUI开发框架,下面将从语言和框架两个维度进行介绍。
3.1►►OpenHarmony生态开发语言-ArkTS
OpenHarmony生态开发语言ArkTS在JavaScript和TypeScript的基础上,围绕着极简表达、极致性能的最终目标进一步演进。改进了JavaScript和TypeScript的运行时,优化了类型信息,扩展了声明式UI语法,以及轻量级并行能力。后续会持续演进分布式、严格类型等相关能力。
3.2►►ArkUI开发框架
ArkUI整体架构如图所示。最上层提供了自研声明式UI范式,也支持类Web范式;中间层为方舟编译器和运行时、声明式UI后端引擎以及渲染引擎,下层为平台适配层和平台桥接层。此外,ArkUI开发框架还配套了相应的IDE开发工具以及工具链,提升开发体验。
ArkUI的声明式范式通过语法扩展方法,提供了装饰器、自定义组件、UI描述、状态管理、内置组件、属性方法以及事件方法等模块,可以根据用户需求灵活组合,从而形成定制化界面。ArkUI的声明式范式具备简洁自然声明式语法,统一UI表达;多态组件/动态布局,简化多设备UI适配;多维度状态管理,简化数据传递&UI变更等关键特征。其中,多维度状态管理包括组件、页面、全局以及分布式等多个维度,数据与UI间的传递方式也支持单向以及双向传递,以满足应用开发的相关诉求。
ArkUI的运行机制如图所示。其中,以ArkTS语言开发的源代码,经过编译工具链和ArkUI框架API编译,形成中间代码,再通过方舟运行时形成ArkUI框架运行时。在整个渲染设计上,ArkUI提供了扁平化渲染管线、按需渲染、数据绑定以及基于PGO的AOT等创新能力,提升用户体验以及渲染效率。在跨设备的设计上,ArkUI提供了响应式组件+响应式能力的响应式布局能力以及自适应组件+自适应能力的自适应布局能力,并且在视觉交互侧也通过分层参数和主题风格、多态组件以及交互归一等进行了交互能力的增强。此外,ArkUI支持部署至百K级、M级的轻量化设备,通过引擎轻量化改造以及基于目标平台进一步轻量化定制,实现跨设备能力适配。
3.3►►ArkUI生态
衡量一个应用框架最终是否成功,关键还是要看它对应用开发者生态影响的深度和广度。下图描述了ArkUI生态构建思路概览。
如图所示,自底向上,整体生态构建分为四个维度。
1. 框架。这层主要是框架本身的特性完备度以及竞争力,并能够满足关键应用的需求(包括关键自研应用和关键三方应用)。尤其是要通过关键垂类应用(比如电商,地图,游戏等)的突破来进一步完善框架本身。另外,当多个主流OS平台会长时间并存的情况下,跨OS平台是核心竞争力诉求。框架必须具备相应的能力来进一步提升开发效率。
2. 工具。这层主要是配套开发工具的完备度以及三方主流开发工具的支持度。DevEco作为ArkUI的核心配套工具,需要在整体开发工作流进一步完善,同步,也需逐步推进和三方开发工具的整合,包括VSCode, 基于Chrome浏览器的调试等,进一步方便开发者。
3. 社区。这层主要是通过相应的开源社区(开放原子开源基金会等),以及三方开源库,组件仓库等建设,以及结合主流的组件仓库NPM(Node Package Manager)等推动ArkUI的三方组件的进一步完善。
4. 标准。这层主要是通过标准化的参与,来构建中长线影响力。包括W3C相关的标准组织(ArkUI类Web范式的进一步标准化,WebAssembly的融合探索等),ECMAScript标准组织(ArkTS的增强语言特性的进一步标准化等),软件绿色联盟(应用质量标准,原子化服务标准的完善/互通等)。
总之,ArkUI的整体生态推进策略是以关键应用为牵引,逐步夯实相应能力构建,通过工具、社区协同,并布局标准培育中长线影响力。
04►未来规划
在未来的工作中,ArkUI开发框架团队将持续围绕生态和竞争力逐步演进,包括跨平台能力、分层对接能力、跨设备适配能力、渲染能力、并行化/资源调度能力等进行增强,不断提高用户体验。期待大家一起助力鸿蒙生态,持续创新,使其能够更好地赋能万物智联新场景。