1 -> Overview of the Ark Development Framework
ArkUI is a set of UI development frameworks for building HarmonyOS application interfaces, which provides simplified UI syntax and UI development infrastructure including UI components, animation mechanisms, and event interactions to meet the visual interface development needs of application developers.
1.1 -> Basic Concepts
Component: A component is the smallest unit for building and displaying the interface. Through the combination of multiple components, developers can build a complete interface that meets their application requirements.
Page :p age page is the smallest scheduling division unit of the Ark development framework. Developers can design an application as multiple function pages, each page manages its own files, and completes the scheduling and management between pages through the page routing API to achieve the decoupling of functions in the application.
1.2 -> Main features
UI components: The Ark development framework has a wealth of built-in polymorphic components, including basic components such as text, images, and buttons, container components that can contain one or more subcomponents, drawing components that meet the custom drawing needs of developers, and media components that provide video playback capabilities. "Polymorphism" refers to the fact that the component is designed for different types of devices and provides the ability to adapt styles on different platforms.
Layout: UI interface design is inseparable from the participation of layout. The Ark development framework provides a variety of layout methods, which not only retains the classic flexible layout capabilities, but also provides list, grid, grid layout, and atomic layout capabilities that adapt to multi-resolution scene development.
Animation: The Ark Development Framework beautifies the UI interface, in addition to the built-in animation effects of components, it also provides attribute animation, transition animation, and custom animation capabilities.
Drawing: The Ark development framework provides a variety of drawing capabilities to meet the custom drawing needs of developers, including drawing shapes, color fills, drawing text, transforming and cropping, embedding images, etc.
Interactive events: The Ark development framework provides a variety of interaction capabilities to meet the needs of applications on different platforms through different input devices for UI interactive response, and adapts touch gestures, remote control key input, keyboard and mouse input by default, and provides corresponding event callbacks for developers to add interaction logic.
Platform API channel: The Ark development framework provides an API extension mechanism, through which the platform capabilities can be encapsulated and a unified JS interface is provided.
Two development paradigms: The Ark Development Framework provides two development paradigms for developers with different application scenarios and different technical backgrounds, namely the ArkTS-based declarative development paradigm (referred to as the "declarative development paradigm") and the JS-compatible Web-like development paradigm (referred to as the "Web-like development paradigm").
1.3 -> Frame structure
As can be seen from the figure above, the UI backend engine and language runtime of the declarative development paradigm are shared, and the UI backend engine implements the six basic capabilities of the Ark development framework. The declarative development paradigm does not require JS Framework for page DOM management, and the rendering update link is more streamlined and occupies less memory, so it is recommended that developers choose the declarative development paradigm to build application UI interfaces.
2 -> An overview of the declarative development paradigm based on ArkTS
The ArkTS-based declarative development paradigm is a set of UI development frameworks for developing simplified, high-performance, and cross-device applications, which supports developers to efficiently build cross-device application UI interfaces.
2.1 -> Basic competencies
The Ark development framework, which uses the declarative development paradigm based on ArkTS, adopts a programming method closer to natural semantics, so that developers can intuitively describe the UI interface, without caring about how the framework implements UI drawing and rendering, and realizes minimalist and efficient development. The development framework not only provides UI capabilities from the three dimensions of components, animations, and state management, but also provides system capability interfaces to achieve simplified invocation of system capabilities.
Out-of-the-box components
The framework provides a wealth of preset system components, which can be set by chain calls. Developers can combine system components into custom components, and in this way, the page components can be turned into independent UI units, so that different units of the page can be created, developed, and reused independently, so that the page has stronger engineering.
Abundant animation interfaces
It provides SVG's standard drawing graphics capabilities, and opens up a wealth of animation interfaces, allowing developers to customize animation tracks by encapsulating the physical model or calling the animation capability interface.
Status & Data Management
As a feature of the ArkTS-based declarative development paradigm, state data 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, and the two work together to enable developers to build the entire application with data updates and UI rendering.
System capability interface
The Ark development framework, which uses the declarative development paradigm based on ArkTS, also encapsulates a wealth of system capability interfaces, allowing developers to achieve simplified development from UI design to system capability calls through simple interface calls.
2.2 -> Overall Architecture
Declarative UI front-end
It provides the basic language specifications of the UI development paradigm, provides built-in UI components, layouts and animations, provides a variety of state management mechanisms, and provides a series of interface support for application developers.
Language runtime
The Ark language runtime provides the ability to parse the UI paradigm syntax, the ability to support cross-language calls, and the high-performance runtime environment of the TS language.
Declarative UI backend engine
The back-end engine provides a UI rendering pipeline that is compatible with different development paradigms, provides a variety of basic components, layout calculations, animation effects, interactive events, and state management and drawing capabilities.
Rendering engine
Provides efficient drawing capabilities to draw the rendering instructions collected by the render pipeline to the screen.
Platform adaptation layer
It provides an abstract interface to the system platform and has the ability to access different systems, such as system rendering pipelines and lifecycle scheduling.
3-> Overview of the Web Development Paradigm
The Ark development framework, which is compatible with JS-like web development paradigm, adopts the classic three-stage development method of HML, CSS, and JavaScript. Use HML tag files for layout construction, CSS files for style descriptions, and JavaScript files for logical processing. The UI components are associated with data through one-way data binding, and when the data changes, the UI interface automatically triggers an update. This development method is closer to the usage habits of Web front-end developers, and quickly transforms existing Web applications into Ark development framework applications. It is mainly suitable for small and medium-sized application development with a simple interface.
3.1 -> Overall Architecture
The Ark development framework uses a JS-compatible web development paradigm, including the Application Layer, the Front-end Framework Layer, the Engine Layer, and the Porting Layer.
Application
The application layer refers to the FA application developed by the developer, and the FA application here refers to the JS FA application.
Framework
The front-end framework layer mainly completes front-end page parsing, and provides capabilities such as MVVM (Model-View-ViewModel) development mode, page routing mechanism, and custom components.
Engine
The engine layer mainly provides animation parsing, DOM (Document Object Model) tree construction, layout calculation, rendering command construction and drawing, event management, and other capabilities.
Porting Layer
The adaptation layer mainly completes the abstraction of the platform layer and provides an abstract interface, which can be connected to the system platform. For example, event docking, rendering pipeline docking, and system lifecycle docking.
Top comments (0)