ArkUI cross-platform design

scope

ArkUI is a UI development framework for all devices. It has been open sourced through the OpenHarmony code warehouse. Its key components include:

develop models;
Application interface & interaction;
Extension mechanism - enables third-party component & platform API extension mechanism.

ArkUI-X aims to extend the ArkUI development framework to other OS platforms (Android/iOS/Windows, etc.), allowing developers to reuse most of the application code (UI and main application logic) based on the ArkUI development framework. Deployed to different OS platforms.

Assumptions and Constraints

The cross-platform mentioned in this article refers to the cross-platform of the UI part, and its UI code can be reused. The ability of other applications to rely on the platform needs to be adapted at the application level, or implemented and exposed to JS through the JS API encapsulation mechanism (NAPI). layer.

Please refer to the definition in OpenHarmony for JS APIs involving platform capabilities (such as network, storage, etc.), which need to be encapsulated on different platforms to achieve reuse.

Overall view

From the beginning of the design, cross-platform has been one of the most basic design goals of ArkUI, and it currently supports a basic cross-platform architecture. The relevant design ideas are as follows:

Use C++ to write the overall back-end engine code to maintain portability across multiple platforms, minimize platform dependence, and reduce platform porting costs.
The overall drawing adopts a self-rendering mechanism to reduce platform dependence and further improve the consistency of the drawing effect.
Abstract the platform adaptation layer and platform bridging layer to facilitate the adaptation of different platforms

Module function introduction

ArkUI mainly includes the following modules:

The R&D model is compatible with the Stage development model of OpenHarmony applications, supports the declarative development paradigm based on ArkTS, and can be cross-platform.
Declarative UI back-end engine, including layout, rendering, C++ UI components, event mechanism, etc., can be cross-platform.
The API extension mechanism is based on the NAPI mechanism and can be cross-platform. Different platforms need to extend their own specific API implementation.
Tool chain/SDK, the tool chain can be cross-platform, but the SDK needs to be built on different platforms.

In addition, the ArkTS engine and graphics engine that ArkUI relies on are also cross-platform.

ArkUI declarative UI back-end engine mainly completes overall pipeline process control, view update, layout system, multi-page management, event distribution and callback, focus management, animation mechanism, theme mechanism, resource management/caching/provider, etc. Among them, the UI components are mainly composed of fine-grained display-related components and componentization of mechanisms such as animation, events, and focus to meet the flexibility required to adapt to different front-ends.

The overall cross-platform requirement is to extend the ArkUI development framework to other OS platforms to help developers reduce multi-platform application development costs.

By creating cross-platform application projects through the ACE Tools command line tool, developers can build beautiful, high-performance applications that support multiple platforms based on a set of master codes.

Design

Cross-platform application package structure design

The cross-platform application directory structure includes a set of application engineering templates for ArkUI-X developers, providing the ability to build OpenHarmony applications, Android applications, and iOS applications. The application engineering package structure design is as follows:

ArkUI-X应用工程
  ├── .arkui-x
  │   ├── android                 // Android平台相关代码
  │   └── ios                     // iOS平台相关代码
  ├── .hvigor
  ├── .idea
  ├── AppScope
  ├── entry
  ├── hvigor
  ├── oh_modules
  ├── build-profile.json5
  ├── hvigorfile.ts
  ├── local.properties
  └── oh-package.json5

The design idea of the ArkUI-X application directory structure is based on the native cross-platform support of the OpenHarmony application project. Android and iOS application projects are superimposed on the OpenHarmony application project. The ArkTS code and resources resource editing are still completed on the OpenHarmony side, and the Native code is on the respective platforms. Completed in application engineering. Detailed package structure design,

Cross-platform framework building system

ArkUI-X compilation and construction provides a set of compilation and construction frameworks based on GN and Ninja. The basic construction is based on the OpenHarmony build warehouse, and the Android and iOS compilation tool chains are added based on the OpenHarmony construction to support the ArkUI cross-platform SDK compilation output.

Cross-platform SDK structure design

The cross-platform SDK is mainly used to support ACE Tools command line cross-platform application construction and DevEco Studio\Android Studio\Xcode integrated cross-platform application development. The content scope mainly includes:

Provides ArkUI cross-platform development framework basic engine dynamic library and API plug-in dynamic library.
Provides ArkUI cross-platform application building command line tool.
Provide ArkUI component rendering consistency system resource package and application resource compilation tool.

The structure of ArkUI-X SDK is as follows:

arkui-x
  ├── engine                   // ArkUI-X的引擎库
  │   ├── lib                  // ArkUI-X的引擎库：包括Android平台及架构的动态库
  │   ├── framework            // ArkUI-X的引擎库：包括iOS平台及架构的Framework库
  │   ├── xcframework          // ArkUI-X的引擎库：包括iOS平台及架构的XCFramework库
  │   ├── ets                  // ArkUI-X增量接口，比如：@arkui-x.bridge
  │   ├── apiConfig.json       // engine库配置文件，用于IDE和ACE Tools解析，以支持应用构建按需打包。
  │   └── systemres            // ArkUI-X框架自带的资源
  ├── plugins                  // ArkUI-X官方提供的插件库
  │   ├── component            // ArkUI组件插件库，apiConfig.json
  │   └── api                  // @ohos接口插件库，apiConfig.json
  ├── toolchains               // ArkUI-X应用开发工具，比如：ACE Tools。
  ├── sdkConfig.json           // 增量d.ts路径和接口前缀配置
  ├── arkui-x.json             // SDK管理配置，流水线自动生成
  └── NOTICE.txt

operating system abstraction layer

The OS Abstract Layer (hereinafter abbreviated as OSAL) implemented based on C++ shields OS-related implementations of different platforms and mainly includes a function list:

Log, Trace abstraction layer
network interface abstraction layer
File/resource reading and writing abstraction layer
Basic thread abstraction layer
System resource management abstraction and implementation
System Prop configuration reading abstraction layer
Management capability abstraction layer

Taking the Log calling process as an example, the overall interaction process is as follows:

Cross-platform startup portal

The development framework corresponds to the entry implemented by the platform language, providing basic entry environments for different platforms, and a list of cross-platform startup entry functions:

Provide loading entrances for multiple platforms, such as an Ability on the OpenHarmony side and an Activity on the Android side.
Connect the life cycle, event input, and Vsync of different platforms.
Connect to window systems and hardware rendering acceleration of different platforms.
Connect application information from different platforms.
The native languages of different platforms are converted to a unified C++ backend, and common code is reused.

Under the Stage model, the entrance to the Ability claim cycle is StageAbility. The life cycle will always notify JsAbility and execute the user's life cycle callback method. The UI page is in the life cycle of , calling the onWindowStageCreatedWindow loadContentinterface to load, creating an instance of ArkUI and Initialize the rendering pipeline and render and display the page.

Cross-platform capability bridging

Cross-platform capability bridging includes different platform capability modules that need to be used within the framework, such as clipboard, input method, video, etc. It provides the definition of basic capability modules, and different platforms implement corresponding functional modules according to the definitions. function list:

Clipboard abstract interface and implementation on different platforms.
Input method abstract interface and implementation on different platforms.
Abstract interfaces such as video media and implementation on different platforms.
Different platform capability modules are needed within other frameworks.

API extension mechanism

1. JS API extension mechanism is used to expose Native interface capabilities to the JS layer. This mechanism directly reuses the unified encapsulation mechanism on OpenHarmony, extends the API (implemented in C++), and implements some built-in APIs. The overall structure of NAPI is as shown below.

For different platforms, JS API needs to follow OpenHarmony's API definition and be extended through the API extension mechanism on different platforms.

Cross-platform command line tool ACE Tools

ACE Tools command line tool, as ArkUI-X cross-platform application building tool, has the ability to create/compile/install/run and debug OpenHarmony, Android and iOS applications.

ACE Tools代码结构
 cli
  ├─node_modules
  ├─src
  │  ├─ace-build                 // 构建跨平台应用安装包
  │  │  ├─ace-compiler
  │  │  └─ace-packager
  │  ├─ace-check                 // 查验ArkUI跨平台应用开发依赖的的库和工具链是否完整
  │  ├─ace-clean                 // 清理跨平台应用编译结果
  │  ├─ace-config                // 配置ArkUI跨平台应用开发环境
  │  ├─ace-create                // 创建ArkUI跨平台应用工程
  │  │  ├─aar
  │  │  ├─ability
  │  │  ├─component
  │  │  ├─framework
  │  │  ├─module
  │  │  └─project
  │  ├─ace-devices               // 列出当前PC所链接的各平台设备
  │  ├─ace-install               // 将跨平台应用安装到连接的设备上
  │  ├─ace-launch                // 在设备上运行跨平台应用
  │  ├─ace-log                   // 滚动展示正在运行的跨平台应用的日志
  │  ├─ace-run                   // 运行跨平台应用包
  │  ├─ace-test                  // 执行测试代码
  │  ├─ace-uninstall             // 将跨平台应用从设备上卸载
  │  ├─bin                       // 命令行入口脚本
  │  └─util
  └─templates                    // 跨平台应用工程模板