ArkUI

ArkUI 3.0 is declarative in eTS (extended TypeScript) in HarmonyOS 3.0, followed by main ArkTS programming language in HarmonyOS 3.1, contrasting with the imperative syntax used in Java development in earlier versions of HarmonyOS in HarmonyOS 1.0 and 2.0. ArkUI allows for 2D drawing as well as 3D drawing, animations, event handling, Service Card widgets, and data binding. ArkUI automatically synchronizes between UI views and data.

ArkUI integrates with DevEco Studio IDE to provide for real-time previews during editing,{{Cite journal |author=范承宇 |last2=李竞择 |last3=欧阳迪 |date=2024-03-28 |year=2024 |title=基于方舟开发框架的智能装备监控应用研究 |url=http://jdcpkfycx.izhengao.com/lunwen/itemid-244693.shtml |journal=机电产品开发与创新 |publication-place=Mianyang |volume=37 |issue=2 |pages=114–117 |via=CNKI}} alongside support for debugging and other development features.{{cite web |last1=Sarkar |first1=Amy |title=HarmonyOS 3.0 ArkUI 3.0: Declarative User Interface framework |url=https://www.huaweicentral.com/harmonyos-3-0-arkui-3-0-declarative-user-interface-framework/ |website=HC Newsroom |date=26 October 2021 |access-date=12 February 2024 |archive-date=2 March 2024 |archive-url=https://web.archive.org/web/20240302002317/https://www.huaweicentral.com/harmonyos-3-0-arkui-3-0-declarative-user-interface-framework/ |url-status=live }}

ArkJS is designed for web development with a Vue 2-like syntax, providing a familiar environment for web developers using JS and CSS. ArkJS incorporates the HarmonyOS Markup Language (HML), which allows attributes prefixed with @ for MVVM architectural pattern.{{cite web |last1=Kapuściak |first1=Kacper |last2=Wajgelt |first2=Juliusz |last3=Schmidt |first3=Stefan |title=Bringing Graphical Applications to Oniro on the Example of React Native |url=https://www.youtube.com/watch?v=1JwetgKCsrI |website=YouTube |date=8 November 2023 |publisher=Eclipse Foundation |access-date=29 February 2024 |archive-date=29 February 2024 |archive-url=https://web.archive.org/web/20240229224152/https://www.youtube.com/watch?v=1JwetgKCsrI |url-status=live }}{{Cite book |last=徐 |first=礼文 |title= |publisher=Tsinghua University Press |isbn=9787302600312 |script-title=zh:HarmonyOS操作系统应用开发实战（JavaScript版） |trans-title=Hands-on Application Development with the HarmonyOS Operating System (JavaScript Edition)}}{{Cite book |author=褚洪波 |url=https://books.google.com/books?id=xesJ0AEACAAJ |title= | date=2022 |publisher={{ill|机械工业出版社|lt=|zh|机械工业出版社}} |isbn=9787111714910 |language=zh-CN |script-title=zh:鸿蒙App开发全流程实战 |trans-title=Hands-On Full-Process Development of HarmonyOS Apps}}

During HDC 2021 on October 22, 2021, the HarmonyOS 3.0 developer preview introduced ArkUI 3.0 for eTS, JS programming languages with ArkCompiler. Compared to previous versions of ArkUI 1.0 and 2.0 under imperative development with Java in earlier versions of HarmonyOS.{{cite web |title=New release of HarmonyOS 3.0.0 developer preview |url=https://segmentfault.com/a/1190000040853621/en |website=SegmentFault |access-date=12 February 2024}}

During HDC 2022 HarmonyOS 3.1 in November 2022, Huawei ArkUI evolved into full declarative development featuring declarative UI capabilities, improved layout ability, component capability improvement and others. In April 2023, HarmonyOS 3.1 Beta 1 build included ArkUI declarative 2D and 3D drawing capabilities. The upgrade also improves layout, component, and app state management capabilities.{{cite web |last1=Sarkar |first1=Amy |title=HarmonyOS 3.1 Beta 2 rolling out |url=https://www.huaweicentral.com/harmonyos-3-1-beta-2/ |website=HC Newsroom |date=25 April 2023 |access-date=12 February 2024 |archive-date=24 September 2023 |archive-url=https://web.archive.org/web/20230924044747/https://www.huaweicentral.com/harmonyos-3-1-beta-2/ |url-status=live }}

During HDC 2023, August 2023, Huawei announced HarmonyOS 4.0 improvements of ArkUI with ArkTS alongside native HarmonyOS NEXT software development using Ark Engine with ArkGraphics 2D and ArkGraphics 3D. Also, the company announced a cross platform extension of ArkUI called ArkUI-X which would allow developers to run applications across Android, iOS and HarmonyOS under one project using DevEco Studio IDE and Visual Studio Code plugins. On January 18, 2024, during HarmonyOS Ecology Conference, Huawei revealed the HarmonyOS NEXT software stack, that included ArkUI/ArkUI-X programming framework with the Ark Compiler/BiSheng Compiler/Ark Runtime compiler & runtime, for both ArkTS and incoming Cangjie programming language.{{cite web |last1=Bhati |first1=Kamlesh |title=Huawei HarmonyOS NEXT Official Now: Bring Spatial Design and Vivid Color Concepts |url=https://sparrowsnews.com/2024/01/18/huawei-harmonyos-next-official-now/ |website=Sparrownews.com |access-date=12 February 2024 |archive-date=13 February 2024 |archive-url=https://web.archive.org/web/20240213153921/https://sparrowsnews.com/2024/01/18/huawei-harmonyos-next-official-now/ |url-status=dead }}

{{Infobox software

| logo =

| logo size = 85px

| name = ArkUI-X

| developer = Huawei

| released = December 8, 2023

| operating system = Android, iOS, OpenHarmony, Oniro, HarmonyOS, Web platform (ArkJS)

| genre = Application framework

| license = Apache License

| website = https://developer.harmonyos.com/en/develop/arkUI

}}

ArkUI-X is an open-source UI software development kit which is the extension of ArkUI created for building cross platform applications, including Android, iOS targets additionally.{{Cite journal |last=连志安 |first= |date=2023 |title= |script-title=zh:OpenHarmony当前进展和未来趋势 |trans-title=Current progress and future trends of OpenHarmony |url= |journal=单片机与嵌入式系统应用 |volume=23 |issue=11 |pages=4–9+13 |issn=1009-623X}} Web platform support with ArkJS was released on December 8, 2023.{{cite web |title=ArkUI-X Release Notes |url=https://github.com/arkui-x/docs/blob/master/zh-cn/release-notes/README.md |website=ArkUI-X GitHub |access-date=12 February 2024 |archive-date=12 February 2024 |archive-url=https://web.archive.org/web/20240212234530/https://github.com/arkui-x/docs/blob/master/zh-cn/release-notes/README.md |url-status=live }} ArkUI-X consists of both a UI language and a rendering engine.{{Cite web |title=ArkUI-X 预览版正式开源 |url=https://zhuanlan.zhihu.com/p/649261115 |access-date=2024-05-21 |website=知乎专栏 |language=zh}}

The ArkUI architecture is divided into three layers: the top layer offers a declarative UI paradigm; the middle layer consists of the Ark Compiler and runtime, the UI backend engine, and the rendering engine; and the bottom layer serves as the platform adaptation and bridging layer.

System components are built-in components within the ArkUI framework, categorized into container components and basic components. For example, Row and Column are container components that can hold other components, while Text and Button are basic components.{{Cite book |author=刘玥 |script-title=zh:鸿蒙原生应用开发：ArkTS语言快速上手|trans-title=Developing Native Applications on HarmonyOS: A Quick Start with ArkTS Language |author2=张荣超 |date=2024-07-01 |publisher={{ill|Posts & Telecommunications Press|lt=|zh|人民邮电出版社}} |isbn=9787115642509}}

The following is an example of a simple Hello World program. It is standard practice in ArkUI to separate the application struct and views into different structs, with the main view named Index.{{cite web |title=Getting Started with ArkTS in Stage Model - Implementing Page Redirection |url=https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/start-with-ets-stage-0000001477980905-V3 |website=HarmonyOS |access-date=12 February 2024 |archive-date=12 February 2024 |archive-url=https://web.archive.org/web/20240212234530/https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/start-with-ets-stage-0000001477980905-V3 |url-status=live }}

import ArkTS

// Index.ets

import router from '@ohos.router';

@Entry

@Component

struct Index {

@State message: string = 'Hello World'

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

// Add a button to respond to user clicks.

Button() {

Text('Next')

.fontSize(30)

.fontWeight(FontWeight.Bold)

}

.type(ButtonType.Capsule)

.margin({

top: 20

})

.backgroundColor('#0D9FFB')

.width('40%')

.height('5%')

// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.

.onClick(() => {

router.pushUrl({ url: 'pages/Second' })

})

}

.width('100%')

}

.height('100%')

}

}

The @ohos.router routing library implements page transitions, which must be declared in the main_pages.json file before being invoked.{{cite journal |last1=张 |first1=欧亚 |last2=黄 |first2=涛 |last3=曾 |first3=超 |last4=叶 |first4=荣涛 |year=2024 |title=鸿蒙OS智能终端适老化软件研发探索 |journal=信息技术与工程学院学报 |language=zh-CN |publisher=广州商学院 |volume= |issue=13 |pages= |doi=10.19850/j.cnki.2096-4706.2024.13.031 |via=CNKI}}

• Taobao claims that the ArkUI version of its app achieves checkout page performance 1.5 times faster than the Android version.{{Cite web |author=IT之家 |date=2024-07-22 |title=启动时间 1 秒内，淘宝鸿蒙原生版上线 HarmonyOS NEXT |url=https://news.qq.com/rain/a/20240722A0ACXF00 |access-date=2024-11-25 |website=Tencent News |publisher= |language=zh-CN}}

• SwiftUI
• Flutter
• .NET Multi-platform App UI
• React Native
• Qt (software)
• Jetpack Compose

{{Reflist}}

• [https://developer.harmonyos.com/en/develop/arkUI ArkUI] at HarmonyOS Developer and Huawei Developer
• [https://developer.harmonyos.com/en/documentation/Samples/ ArkUI Example]

{{Huawei|phones=yes|tablets=yes|laptops=yes|wearables=yes|cpu=yes|os=yes|services=yes|people=yes|other=yes|below=yes}}

Category:2021 software

Category:Gesture recognition

Category:HarmonyOS

Category:Proprietary software

Category:Huawei products

Category:Mobile software development

Category:Software development

Category:Programming tools

Category:Software frameworks