Author: yuzhiqiang, chief technical expert of UI programming framework
Harmony 3.0.0 developer preview includes a new generation of declarative UI framework ArkUI 3.0, a multilingual cross-platform compiler ArkCompiler 3.0, cross-end development tool DevEco Studio3.0, and TS/JS based API 7. Improve the overall developer experience.
In this issue, we highlight ArkUI 3.0, HarmonyOS ‘new declarative UI framework.
UI programming framework
Before introducing ArkUI 3.0, let’s take a quick look at what a UI programming framework is.
UI programming framework, is the foundation of the development of the UI for application developers facilities, including UI controls (button/list, etc.), the view layout (put/arrange corresponding UI controls), animation, animation design and effect of present), interactive event processing (click/sliding, etc.), and the corresponding programming language and programming model. From the perspective of system operation, the UI programming framework also includes a runtime, which is responsible for the resource loading, UI rendering and event response required by the application when it is executed in the system.
In general, the UI programming framework provides the framework capabilities needed to develop and run THE UI interface, as shown in the following figure:
Figure 1 UI programming framework
- Development model: provide developers with development paradigms, UI controls/layouts/dynamic effects/interactions, programming languages, etc. It reflects the efficiency and difficulty of development.
- Running framework: basic ability framework of UI interface rendering and interaction, including corresponding layout engine, control mechanism, dynamic effect engine, event mechanism, rendering pipeline, etc., combined with language virtual machine and graphics engine, the developer’s program runs on the specific system platform. It represents the performance experience of application running.
- Platform adaptation: The specific operating system or platform adaptation layer that hosts the framework.
The key requirements of UI programming frameworks fall into the following two categories:
- Development efficiency: includes code volume, learning curve, tools, community, tripartite library completeness, etc.
- Performance experience: including startup speed, frame rate, response delay, cool effects, resource usage, etc.
In addition, with the rapid growth of smart devices, UI programming frameworks also need to consider how to better adapt to the differences of different devices, including differences in device morphology (such as screen shape, size, resolution, interaction mode, etc.) and differences in device capabilities (such as memory, CPU, GPU, etc.).
Ii. Evolution of ArkUI framework
To better meet the requirements related to development efficiency and performance experience, ArkUI 3.0 takes into account UI rendering as well as language and runtime, evolving further around minimalist development, high performance, and cross-device platforms. The following diagram depicts the evolution of ArkUI’s overall architecture:
Figure 2 ArkUI frame evolution
On the left is an architectural sketch of the JS UI framework released in 2020. It mainly supports the web-like front-end development paradigm, through the Domain-specific Language (DSL) transformation layer, cross-language connection to the declarative UI back-end engine, and combined with the JS engine to complete the overall UI rendering. On the right is the new ArkUI 3.0 framework with the following key changes:
(1) Introduced a new generation of declarative UI development paradigm to achieve a minimalist UI description syntax.
(2) A unified front and rear end flat rendering mechanism is designed to further improve the performance of UI rendering and reduce memory consumption.
(3) the ArkCompiler and ark runtime are deeply combined with ArkCompiler 3.0 to improve the execution performance and cross-language communication ability of the language.
(4) In terms of tools, we built a new compilation tool chain and preview engine for the new generation of declarative UI development paradigm, providing a WYSIWYG real-time preview mechanism.
In addition, in the ArkUI 3.0 framework, the Web-like paradigm will continue to be maintained, meaning that both the web-like paradigm and the new generation of declarative UI paradigm can be supported and can be used independently, but cannot be mixed.
Key features of ArkUI 3.0
Let’s expand on the key features of ArkUI 3.0.
1. A new generation of declarative UI development paradigm
Specifically, the new generation of declarative UI development paradigm in ArkUI 3.0 features the following:
(1) Typescript-based extended declarative UI description syntax, providing natural language-like UI description and composition.
(2) Polymorphic components out of the box. Polymorphism means that the UI description is uniform, and the UI presentation is different on different types of devices. For example, Button components have different styles and interactions on mobile phones and watches.
(3) Multi-dimensional state management mechanism, supporting flexible data-driven UI changes.
Let’s take a concrete example to illustrate the basic components of the new declarative UI development paradigm. In the code example shown in Figure 3, the UI displays a “Hello World” text and a “Click Me” button. When the user clicks on the “Click Me” button, the value of the string variable myText changes from “World” to “ACE,” and the text eventually appears as “Hello ACE.”
Figure 3 shows the basic concepts of the declarative UI development paradigm
The basic components of the declarative UI development paradigm included in the above example are described as follows:
- Decorators: Decorates classes, structures, methods, and variables, giving them special meaning, as in the example above @entry, @Component, and @state are decorators. @Component indicates that this is a custom Component; @entry means this is an Entry component; @State represents a State variable in the component that causes a UI change.
- Custom components: Reusable UI units that combine other components, such as struct Hello decorated with @Component above.
- UI Description: A declarative way to describe the structure of the UI, such as the code block inside the build() method above.
- Built-in components: The default built-in base and layout components in the framework that can be called directly by the developer, such as Column, Text, Divider, and Button in the example.
- Event methods: Used to add the component’s response logic to events, set uniformly through event methods, such as onClick() following Button.
- Property method: used for component property configuration, unified through the property method to set, such as fontSize(), width(), height(), color(), etc., through the chain call to set a number of properties.
In the example above, the variable myText, decorated with @state, contains a basic State management mechanism where changes in the value of myText cause UI changes (the Text component). ArkUI 3.0 also provides a multi-dimensional state management mechanism. The data associated with the UI is not only used within components, but can also be passed between different component hierarchies, such as parent-child components, parent-child components, globally, or across devices. In addition, from the data transmission form, can be divided into read-only one-way transmission and changeable two-way transmission. Developers can flexibly utilize these capabilities to achieve data and UI linkage.
ArkUI uses the form of Embedded Domain Specific Language (eDSL) to implement UI development in combination with host Language capabilities. Through eDSL, combined with syntactic sugar or language native metaprogramming ability, design a unified UI development paradigm, and can combine different languages to realize the logic processing part of the application.
2. Key rendering performance
Here is a simple example code to describe the overall rendering process from code to UI display. As figure 4 shows, this example displays a “Click Me” button on the UI, with the number of times the button has been clicked synchronously displayed below the button. When the user clicks the button, the number of clicks below increases accordingly.
FIG. 4 Overall rendering process
The rendering process is divided into two stages:
(1) Initial display process (Steps ① to ⑤)
① The source code through the corresponding tool chain, compiled into an object file with type flags, but also contains instructions on how to create UI structure information flow.
② the C++ layer Component tree (UI description layer) is generated through cross-language calls.
③ Generate the Element tree from the Component tree. Element is an instance of Component, representing a specific Component node. It forms an Element tree that maintains the tree structure of the interface at runtime, facilitates calculation of local update algorithms, and so on.
(4) A RenderNode is created for each displayable Element. RenderNode is responsible for displaying the information of a node. The Render tree formed by RenderNode maintains the information needed for the entire interface rendering, including position, size, drawing command, etc. The subsequent layout and rendering are done on the Render tree.
⑤ Implement real rendering and display the drawing results.
(2) Display procedure after the button is clicked (steps ⑥ to ⑪)
⑥ The click event is passed to the component, and the component’s onClick event method is triggered to execute.
Since the @state annotated variable in the onClick event method changes, the corresponding getter/setter function will be fired.
The status management module locates associated UI components.
⑨ State management module updates the corresponding Element tree information.
⑩ Update the rendering information of corresponding UI components.
However, it is similar to ⑤.
The key capabilities required for the entire rendering process, in addition to the minimalist development paradigm itself, consist of the following three components:
- Compilation optimization and cross-language invocation. Combined with the type information flags in the object file, ArkCompiler implements the corresponding code optimization. In addition, ArkCompiler also provides efficient JS/TS -> C++ cross-language invocation mechanism.
- Flat rendering mechanism and small object composition mechanism. The structure of component information is basically consistent at the front and back ends, which further reduces the conversion cost and achieves flat rendering. At the same time, the UI components are composed on demand through lightweight objects, and memory consumption is further reduced.
- Status management mechanism. By monitoring the access operation of variables, the automatic perception of data changes is realized and the corresponding minimum updating range of UI components is calculated to achieve efficient UI changes.
In addition, long list rendering is a typical application scenario, which can involve a large amount of data and, if not handled properly, can have a significant impact on performance and resource usage. ArkUI 3.0 provides a LazyForEach lazy loading mechanism for these commonly used scenarios, which automatically calculates the appropriate rendering data according to the specific situation and implements the data loading on demand, thus improving the UI refresh efficiency. LazyForEach works well with common list-like components such as lists and grids.
3. Advanced UI component library
Advanced UI component libraries can further facilitate efficient application development. Based on ArkUI 3.0, HarmonyOS ‘European development team has built examples of advanced components such as the commonly used diagram-like components and waterfall flow layout components. With just a few lines of code, developers can implement complex and cool UI effects, such as adaptive image additions and deletions, line changes, and corresponding cool flash effects.
The following is an example:
Figure 5 Diagram components
Figure 6. Waterfall flow layout components
4. Multi-device development
In addition to the UI development suite, ArkUI 3.0 revolves around multi-device development and also offers multi-dimensional solutions that further simplify development:
(1) Basic ability layer: including basic layered parameter configuration (such as color, font size, rounded corners, spacing, etc.), grid system, atomic layout ability (such as stretching, folding, hiding, etc.).
(2) Component layer: including polymorphic control, unified interaction ability, and component combination on this basis.
(3) For typical scenarios: provide classified page combination templates and sample codes.
We will have a more detailed article on multi-device development later, please keep an eye on it.
5. Real-time preview mechanism
Another important aspect of the development process is the preview capability, which means that the application can be rendered in real time through the IDE (Integrated Development Environment) on a PC, rather than being deployed and run on a specific device. Key requirements for preview include:
(1) Consistent rendering: UI rendering effect consistent with the target device.
(2) Real-time preview & two-way preview: change the corresponding code, real-time display of the corresponding UI effect. In addition, the code and UI can be two-way linkage, code changes at the same time the UI also real-time changes, UI changes at the same time the code changes accordingly.
(3) Multi-dimensional preview: page-level preview, component-level preview and multi-device preview.
All of these capabilities require the infrastructure of the UI programming framework. The overall architecture of the ArkUI 3.0 preview is shown below:
Figure 7 ArkUI 3.0 preview architecture
ArkUI 3.0’s underlying canvas allows for a consistent rendering experience across different platforms through self-rendering, and a cross-platform docking layer on the render side completes the overall rendering effect. In addition, ArkUI 3.0 implements real-time write preview through real-time code change detection and incremental compilation mechanisms, coupled with the efficient rendering performance mentioned earlier.
The ArkUI 3.0 infrastructure, combined with IDE visualization tools (i.e., the preview front end), enables the above real-time preview, two-way preview and other capabilities to further improve the developer’s development efficiency.
Fourth, concluding remarks
In general, UI programming frameworks play a crucial role in application development. ArkUI 3.0, a new generation of UI framework with a new development paradigm, has taken solid first steps and is already supporting more critical applications. Going forward, in addition to continued infrastructure improvements, we will focus on supporting ecological expansion, including advanced UI capabilities such as three-way maps, game integration, and Web enhancements. At the same time, we will continue to innovate around cross-device, performance experiences. Welcome the majority of developers to join in, explore together, improve together, and build the application ecology of the Internet of everything! The future, there are traces to follow!