一、ArkTS簡介

ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。它在TypeScript（簡稱TS）的基礎(chǔ)上，匹配了鴻蒙的ArkUI框架，擴(kuò)展了聲明式UI、狀態(tài)管理等相應(yīng)的能力，讓開發(fā)者以更簡潔、更自然的方式開發(fā)跨端應(yīng)用。了解ArkTS之前，我們需要先了解下ArkTS、TypeScript和JavaScript之間的關(guān)系。

• JavaScript是一種屬于網(wǎng)絡(luò)的高級腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。
• TypeScript 是 JavaScript 的一個超集，它擴(kuò)展了 JavaScript 的語法，通過在JavaScript的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成，是一個開源的編程語言。
• ArkTS兼容TypeScript語言，拓展了聲明式UI、狀態(tài)管理、并發(fā)任務(wù)等能力，可以認(rèn)為是TypeScript的超集。
  由此可知，TypeScript是JavaScript的超集，ArkTS則是TypeScript的超集，他們的關(guān)系如下圖所示。

學(xué)習(xí)ArkTS聲明式的語法之前，需要對TypeScript語法有一個基本的了解，此處不過多的介紹，詳情參考：ArkTS開發(fā)語言簡介

二、ArkTS誕生背景

在語言運(yùn)行時方面，盡管TS有了類型的加持，但也只是用于編譯時檢查，然后通過TS Compiler轉(zhuǎn)成JS，運(yùn)行時引擎還是無法利用到基于類型系統(tǒng)的優(yōu)化。

在渲染方面，主流Web引擎由于本身復(fù)雜度以及歷史原因，性能、資源占用方面與常見OS原生框架都有一定的差距，尤其在移動平臺上。React Native通過渲染架構(gòu)的改進(jìn)一定程度上提升了性能體驗(yàn)，但在平臺渲染效果和能力的一致性，以及JS語言性能等方面還是存在一定的不足。

接著，Google在2018年底推出的Flutter則走了另外一條路，結(jié)合新的語言Dart，引入新的聲明式開發(fā)范式，基于Skia的自繪制引擎構(gòu)建可跨平臺的獨(dú)立的渲染能力。這是一種較為創(chuàng)新的方案，但是仍然有一些不足，比如Dart語言增加了學(xué)習(xí)成本。有意思的是，Google在2021年又推出了新的開發(fā)框架Jetpack Compose，結(jié)合了Kotlin的語言生態(tài)，設(shè)計(jì)了新的聲明式UI開發(fā)范式。

我們在思考如何構(gòu)建新的應(yīng)用開發(fā)框架的時候，從以下幾個維度進(jìn)行了重點(diǎn)考慮：

• 語言生態(tài)
• 開發(fā)效率
• 性能體驗(yàn)
• 跨設(shè)備/跨平臺能力

由于JS/TS有比較完善的開發(fā)者生態(tài)，語言也比較友好，有相應(yīng)的標(biāo)準(zhǔn)組織可以逐步演進(jìn)，JS/TS語言成了比較自然的選擇。以JS/TS為基礎(chǔ)，在開發(fā)框架的維度，我們做了如下的架構(gòu)演進(jìn)設(shè)計(jì)：

• 通過基于JS擴(kuò)展的類Web開發(fā)范式，來支持主流的前端開發(fā)方式。同時，在運(yùn)行時方面，通過渲染引擎的增強(qiáng)（平臺無關(guān)的自繪制機(jī)制、聲明式UI后端設(shè)計(jì)、動態(tài)布局/多態(tài)UI組件等），語言編譯器和運(yùn)行時的優(yōu)化增強(qiáng)（代碼預(yù)編譯、高效FFI-Foreign Function Interface、引擎極小化等），進(jìn)一步提升相關(guān)的性能體驗(yàn)，并可部署到不同設(shè)備上（包括百KB級內(nèi)存的輕量設(shè)備）。另外，通過平臺適配層的設(shè)計(jì)，構(gòu)建了跨OS平臺的基礎(chǔ)設(shè)施。
• 通過基于TS擴(kuò)展的聲明式UI開發(fā)范式，提供了更簡潔更自然的開發(fā)體驗(yàn)。在運(yùn)行時方面，在上述的基礎(chǔ)上，結(jié)合語言運(yùn)行時的類型優(yōu)化，以及渲染運(yùn)行時的扁平化流水線技術(shù)等，進(jìn)一步提升性能體驗(yàn)。

下圖描述了ArkUI開發(fā)框架的整體架構(gòu)：

可以看到，基于TS擴(kuò)展的聲明式UI范式中所用的語言就是ArkTS。下面結(jié)合一個具體示例，從應(yīng)用開發(fā)視角簡單介紹下基于ArkTS的全新聲明式開發(fā)范式。例如，下面代碼就是ArkTS聲明式開發(fā)范式（有點(diǎn)類似于Flutter的寫法）：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Column() {
      Text('Hello').fontSize(30)
      Text(this.message).fontSize(30)
      Button(){
        Text('Click Me').fontSize(30)
      }.onClick(()= >{
        this.message='ArkUI'
      })
      .width(200)
      .height(50)
    }
  }
}

這個示例中所包含的ArkTS聲明式開發(fā)范式的基本組成說明如下：

• 裝飾器
  用來裝飾類、結(jié)構(gòu)體、方法以及變量，賦予其特殊的含義，如上述示例中 @Entry 、 @Component 、 @State 都是裝飾器。具體而言， @Component 表示這是個自定義組件； @Entry 則表示這是個入口組件； @State 表示組件中的狀態(tài)變量，此狀態(tài)變化會引起 UI 變更。
• 自定義組件
  可復(fù)用的 UI 單元，可組合其它組件，如上述被 @Component 裝飾的 struct Hello。
• UI 描述
  聲明式的方式來描述 UI 的結(jié)構(gòu)，如上述 build() 方法內(nèi)部的代碼塊。
• 內(nèi)置組件
  框架中默認(rèn)內(nèi)置的基礎(chǔ)和布局組件，可直接被開發(fā)者調(diào)用，比如示例中的 Column、Text、Divider、Button。
• 事件方法
  用于添加組件對事件的響應(yīng)邏輯，統(tǒng)一通過事件方法進(jìn)行設(shè)置，如跟隨在Button后面的onClick()。
• 屬性方法

用于組件屬性的配置，統(tǒng)一通過屬性方法進(jìn)行設(shè)置，如fontSize()、width()、height()、color() 等，可通過鏈?zhǔn)秸{(diào)用的方式設(shè)置多項(xiàng)屬性。

總體而言，ArkUI開發(fā)框架通過擴(kuò)展成熟語言、結(jié)合語法糖或者語言原生的元編程能力、以及UI組件、狀態(tài)管理等方面設(shè)計(jì)了統(tǒng)一的UI開發(fā)范式，結(jié)合原生語言能力共同完成應(yīng)用開發(fā)。

三、ArkUI規(guī)劃和演進(jìn)

接下來，ArkUI會從以下兩個方面進(jìn)行一些改進(jìn)：

3.1 更完善的類型系統(tǒng)

已經(jīng)設(shè)計(jì)并實(shí)現(xiàn)了專門運(yùn)行時，利用ArkTS的類型輸入，在程序執(zhí)行一開始就獲得較高的運(yùn)行性能（不像其它傳統(tǒng)JS引擎需要預(yù)熱才能獲取高性能）。但是目前的類型系統(tǒng)在運(yùn)行時的設(shè)計(jì)上仍然考慮了兼容模式，即在運(yùn)行時，當(dāng)對象類型發(fā)生變化時會走Bailout機(jī)制，以使程序在類型不匹配時仍能正常運(yùn)行。一種更極致的方式是：引入一種特定模式來支持確定類型的表達(dá)，當(dāng)開發(fā)者可以明確類型時，提供相應(yīng)的信息，這樣運(yùn)行時可以通過針對性設(shè)計(jì)，進(jìn)一步提升性能體驗(yàn)。另外，ArkTS將來也會在類型系統(tǒng)中拓展一些新的類型，在與運(yùn)行時結(jié)合的優(yōu)化中會提供更好的性能體驗(yàn)。

3.2 更靈活的并行化處理

目前的移動設(shè)備基本都是多核設(shè)備（包括同一配置的多核以及不同配置的大小核），有些設(shè)備還會攜帶多種計(jì)算芯片（CPU/GPU/NPU/...）。語言在并發(fā)特性上如何充分應(yīng)用多核設(shè)備甚至異構(gòu)芯片是一個重要的課題。目前我們采用的仍然是業(yè)界常見的類Actor模型的并發(fā)接口——Worker，它彌補(bǔ)了Actor模型的些許劣勢，即允許用戶轉(zhuǎn)移和共享大量的Buffer以避免通信時拷貝的開銷。

但是開發(fā)者仍需自己去管理Worker的生命周期，利用Worker也不能非常方便地觸發(fā)一個異步并行任務(wù)。我們已經(jīng)在嘗試在Actor模型上封裝一種任務(wù)接口，方便用戶更容易利用多核觸發(fā)異步并行任務(wù)。我們也一直在關(guān)注Swift、Dart、Kotlin、Go這些語言并發(fā)特性的發(fā)展和運(yùn)行時的實(shí)現(xiàn)，ArkTS的特定模式中靜態(tài)類型模型的引入也會給并發(fā)機(jī)制帶來更多高性能實(shí)現(xiàn)的可能性，比如對象的凍結(jié)、所有權(quán)轉(zhuǎn)移、值語義等等。我們將持續(xù)致力于提供簡潔高效的并發(fā)API，幫助應(yīng)用開發(fā)者更容易開發(fā)出高性能的應(yīng)用。

當(dāng)然，ArkTS以及ArkUI開發(fā)框架還很年輕，還有很多其它方面也會持續(xù)演進(jìn)，比如UI自定義能力的進(jìn)一步完善，語言運(yùn)行時以及跨語言交互的進(jìn)一步優(yōu)化，跨OS平臺能力的擴(kuò)展，分布式開發(fā)范式等等。

四、ArkTS開發(fā)實(shí)踐

4.1 聲明式UI基本概念

應(yīng)用界面是由一個個頁面組成，ArkTS是由ArkUI框架提供，用于以聲明式開發(fā)范式開發(fā)界面的語言。聲明式UI構(gòu)建頁面的過程，其實(shí)是組合組件的過程，聲明式UI的思想，主要體現(xiàn)在兩個方面：

• 描述UI的呈現(xiàn)結(jié)果，不需要關(guān)心過程；
• 狀態(tài)驅(qū)動視圖更新；

類似蘋果的SwiftUI中通過組合視圖View，安卓Jetpack Compose中通過組合@Composable函數(shù)，ArkUI作為HarmonyOS應(yīng)用開發(fā)的UI開發(fā)框架，其使用ArkTS語言構(gòu)建自定義組件，通過組合自定義組件完成頁面的構(gòu)建。

4.2 自定義組件

ArkTS通過struct聲明組件名，并通過@Component和@Entry裝飾器，來構(gòu)成一個自定義組件。并且，使用@Entry和@Component裝飾的自定義組件作為頁面的入口，會在頁面加載時首先進(jìn)行渲染。比如：

@Entry
@Component
struct Index {
  ...
}

在自定義組件內(nèi)需要使用build方法來進(jìn)行UI描述。

@Entry
@Component
 struct Index
   ...
   build() {
   ...
  } 
}

同時，build方法內(nèi)可以容納內(nèi)置組件和其他自定義組件，里面渲染的內(nèi)容就是最后頁面顯示的內(nèi)容。

4.3 配置屬性與布局

自定義組件通常使用的是基礎(chǔ)組件和容器組件等內(nèi)置組件進(jìn)行的組合。但有時內(nèi)置組件的樣式并不能滿足我們的需求，ArkTS提供了屬性方法用于描述界面的樣式。屬性方法支持以下使用方式：

• 常量傳遞：使用fontSize(50)來配置字體大小

Text('Hello World').fontSize(50)

• 變量傳遞：在組件內(nèi)定義了相應(yīng)的變量后，可以使用this.變量的方式使用該變量

Text('Hello World').fontSize(this.size)

• 鏈?zhǔn)秸{(diào)用：在配置多個屬性時，ArkTS提供了鏈?zhǔn)秸{(diào)用的方式，通過'.'方式連續(xù)配置

Text('Hello World').fontSize(this.size).width(100).height(100)

• 內(nèi)置枚舉類型：ArkTS內(nèi)置了很多的枚舉類型，如Color，F(xiàn)ontWeight等。

Text('Hello World').fontColor(Color.Red).fontWeight(FontWeight.Bold)

4.4 狀態(tài)改變

實(shí)際開發(fā)中頁面的內(nèi)容并不是一層不變的，頁面的內(nèi)容可能需要產(chǎn)生變化，此時就需要用到狀態(tài)管理，類似于前端的setState。不過，ArkTS改變后會自動刷新。

聲明式UI的特點(diǎn)就是UI是隨數(shù)據(jù)更改而自動刷新的，我們這里定義了一個類型為boolean的變量isComplete，其被@State裝飾后，框架內(nèi)建立了數(shù)據(jù)和視圖之間的綁定，其值的改變影響UI的顯示。

@State isComplete : boolean = false；

@State裝飾器的作用如下圖。

4.5 循環(huán)渲染列表

當(dāng)我們有多條待辦數(shù)據(jù)需要顯示在頁面時，就可以使用到ForEach循環(huán)渲染語法。例如，有下面一組數(shù)據(jù)：

total_Tasks:Array< string > = [
  '早起晨練',
  '準(zhǔn)備早餐',
  '閱讀名著',
  '學(xué)習(xí)ArkTS',
  '看劇放松'
]

下面是一段完整的代碼：

@Entry
@Component
struct ToDoList {
   ...
   build() {
     Row() {
       Column() {
         Text(...)
           ...
         ForEach(this.totalTasks,(item) = > {
           TodoItem({content:item})
         },...)
       }
       .width('100%')
     }
     .height('100%')
   }
 }

審核編輯 黃宇