Ark development framework (ArkUI for short) provides a complete infrastructure for UI development of HarmonyOS applications, including concise UI syntax, rich UI functions (components, layout, animation and interactive events), and real-time interface preview tools, etc., which can support Developers develop visual interfaces.
basic concept
- UI: User interface. Developers can design the user interface of the application into multiple functional pages, each page is managed independently, and the page routing is completed through the Page RoutingAPI. Scheduling management such as jump, rollback and other operations to achieve functional decoupling within the application.
- Component: The smallest unit for UI construction and display, such as lists, grids, buttons, radio buttons, progress bars, text, etc. Developers use a combination of multiple components to build a complete interface that meets their own application requirements.
Two development paradigms
For different application scenarios and technical backgrounds, the Ark development framework provides two development paradigms, namelydeclarative development paradigm based on ArkTS (referred to as "declarative development paradigm") and JS-compatible Web-like development paradigm (referred to as "Web-like development paradigm").
- Declarative development paradigm: Using the ArkTS language extended based on TypeScript declarative UI syntaxArkTS language, from components, animation and state management Provides UI drawing capabilities in three dimensions.
- Web-like development paradigm: adopt the classic three-stage development method of HML, CSS, and JavaScript, that is, use HML tag files to build layouts, use CSS files to describe styles, and use JavaScript files to process logic. This paradigm is more in line with the usage habits of Web front-end developers, making it easy to quickly transform existing Web applications into Ark development framework applications.
When developing a new application, it is recommended to use the declarative development paradigm to build the UI, mainly based on the following considerations:
- Development efficiency: The declarative development paradigm is closer to the natural semantic programming method. Developers can describe the UI intuitively without having to worry about how to draw and render the UI, making development efficient and concise.
- Application performance: As shown in the figure below, the UI backend engine and language runtime of the two development paradigms are shared. However, compared with the Web-like development paradigm, the declarative development paradigm does not require a JS framework for page DOM management, and the rendering and update links are more complex. For simplicity, it takes up less memory and provides better application performance.
- Development trend: The declarative development paradigm will continue to evolve as the main development paradigm, providing developers with richer and more powerful capabilities.
Figure 1 Schematic diagram of Ark development framework
Development paradigms supported by different application types
According to the selected HarmonyOSapplication model (Stage model, FA model) and page form (ordinary page of application or service, card) Different, the corresponding supported UI development paradigms are also different, see the table below for details.
| application model | Page form | Supported UI development paradigms |
|---|---|---|
| Stage model (recommended) | App or service page | Declarative development paradigm (recommended) |
| card | Declarative development paradigm (recommended) Web development paradigm | |
| FA model | App or service page | Declarative Development Paradigm Web Development Paradigm |
| card | Web-like development paradigm |
ArkTS declarative development paradigm
The Ark development framework based on the declarative development paradigm of ArkTS is a minimalist, high-performance, cross-device UI development framework that provides the necessary capabilities to build HarmonyOS application UI, including:
- ArkTSArkTS is the preferred main application development language of HarmonyOS. It has been further expanded based on the TypeScript (abbreviated as TS) ecosystem around application development. Extension capabilities include declarative UI description, custom components, dynamically extended UI elements, state management and rendering control. As a feature of the declarative development paradigm based on ArkTS, state management provides developers with a clear page update rendering process and pipeline through decorators with different functions. State management includes UI component state and application state. Cooperation between the two allows developers to completely construct data updates and UI rendering for the entire application. For basic knowledge of ArkTS language, please refer to Learning ArkTS Language.
- Layout Layout is a necessary element of UI, which defines the position of components in the interface. The ArkUI framework provides a variety of layout methods. In addition to the basic linear layout, cascading layout, flexible layout, relative layout, and grid layout, it also provides relatively complex lists, grids, and carousels.
- Components Components are necessary elements of the UI and form the appearance in the interface. Those directly provided by the framework are called system components, and those defined by developers are called custom components. The built-in components of the system include buttons, radio buttons, progress bars, text, etc. Developers can set the rendering effects of system built-in components through chain calls. Developers can combine the system's built-in components into custom components. In this way, the page components are turned into independent UI units, enabling independent creation, development, and reuse of different units on the page, with stronger engineering capabilities.
- Page routing and component navigation applications may contain multiple pages, and page routing can be used to jump between pages. There may be navigation between components in a page, such as typical columns, and navigation between components can be achieved through navigation components.
- The Graphics Ark development framework provides the ability to display multiple types of pictures and a variety of custom drawing capabilities to meet developers' custom drawing needs. It supports drawing shapes, filling colors, drawing text, deformation and cropping, embedding pictures, etc.
- Animation Animation is one of the important elements of UI. Excellent animation design can greatly improve user experience. The framework provides rich animation capabilities. In addition to the built-in animation effects of components, it also includes attribute animation, explicit animation, custom transition animation, and animation API. Developers can encapsulate physical model or call the animation capability API to implement custom animation trajectories.
- Interaction events Interaction events are necessary elements for UI and user interaction. The Ark development framework provides a variety of interactive events. In addition to common events such as touch events, mouse events, keyboard key events, and focus events, it also includes gesture events for further recognition based on common events. Gesture events include single gestures such as click gestures, long press gestures, drag gestures, pinch gestures, rotation gestures, sliding gestures, and combined gesture events that are combined through a single gesture event.
Features
- High development efficiency and good development experience
- Code simplicity: Describe the UI in a way that is close to natural semantics, and you don’t have to worry about how the framework implements UI drawing and rendering.
- Data-driven UI changes: Allow developers to focus more on processing their own business logic. When the UI changes, developers do not need to write UI code to switch between different UIs. Developers only need to write the data that causes the interface to change. The specific how the UI changes is left to the framework.
- Good development experience: The interface is also code, which improves developers’ programming experience.
- Superior performance
- Declarative UI front-end and UI back-end layering: The UI back-end is built in C++ language and provides basic components, layout, animation, interactive events, component state management and rendering pipeline corresponding to the front-end.
- Language compiler and runtime optimization: unified bytecode, efficient FFI-Foreign Function Interface, AOT-Ahead Of Time, engine minimization, type optimization, etc.
- The ecology is easy to advance quickly. It can leverage the mainstream language ecology to advance quickly. The language is relatively neutral and friendly, and there are corresponding standards organizations that can gradually evolve.
Overall structure
Figure 1 Overall architecture diagram
- The declarative UI front-end provides the basic language specification of the UI development paradigm, provides built-in UI components, layout and animation, provides a variety of state management mechanisms, and provides a series of interface support for application developers.
- The language runtime uses the Ark language runtime, which provides parsing capabilities for UI paradigm syntax, cross-language call support capabilities, and a high-performance running environment for the TS language.
- Declarative UI backend engine The backend engine provides a UI rendering pipeline that is compatible with different development paradigms, provides a variety of basic components, layout calculations, dynamic effects, interactive events, and provides state management and drawing capabilities.
- The rendering engine provides efficient drawing capabilities and the ability to draw rendering instructions collected by the rendering pipeline to the screen.
- The platform adaptation layer provides an abstract interface to the system platform and has the ability to access different systems, such as system rendering pipeline, life cycle scheduling, etc.
Development Process
When developing applications using the UI development framework, the following development processes are mainly involved. Developers can first learn about the entire application UI development process through the First Getting Started example.
| Task | Introduction | Related guidance |
|---|---|---|
| Learn ArkTS | Introduces the basic syntax, state management and rendering control scenarios of ArkTS. | Basic syntax state management rendering control |
| development layout | Introduces several commonly used layout methods and how to improve layout performance. | Common layout layout performance |
| Add component | This article introduces several commonly used built-in components, custom components, and interface elements supported through APIs. | Commonly used components custom component bubbles and menus |
| Set up page routing and component navigation | Introduces how to set up page routing and navigation between components. | Page routing component navigation |
| display graphics | Describes how to display pictures, draw custom geometric shapes, and use the canvas to draw custom shapes. | Picture geometry canvas |
| Use animation | Introduces typical scenarios for using animations on components and pages. | Animation within a page Animation between pages |
| Binding events | Introduces the basic concepts of events and how to use general events and gesture events. | Universal events Gesture events |
- basic grammar
- Status management
- Rendering controls
Developing Layout introduces several commonly used layout methods and how to improve layout performance.
- Commonly used layouts
- layout performance
Adding Components introduces several commonly used built-in components, custom components, and interface elements supported through APIs.
- Common components
- Custom component
- Bubbles and menus
Setting up page routing and component navigation describes how to set up page routing and navigation between components.
- Page routing
- Component navigation
Displaying Shapes describes how to display pictures, draw custom geometric shapes, and use the canvas to draw custom shapes.
- picture
- Geometry
- canvas
Using Animations introduces typical scenarios for using animations on components and pages.
- Animation within the page
- animation between pages
Binding Events introduces the basic concepts of events and how to use general events and gesture events.
- common case
- Gesture event
This article mainly analyzes the UI technology in Hongmeng development and a brief overview of the development framework (ArkUI). For more Hongmeng advanced technology and UI development technology, you can view more categories on the home page, or find technical exchanges.
