純血鴻蒙即將到來

在今年 8 月的「2023年華為開發者大會（HDC.Together）」上，華為正式官宣「鴻蒙Next」，這個更新的版本將移除所有的 AOSP 代碼，徹底與 Android 切割，使其成為一個完全自主研發的操作系統，這將去掉 40%左右多餘的代碼，使系統變得更加簡潔、流暢。同時，會上也預告了將在明年 1 月份發佈面向所有開發者的預覽版，意味著還有一個多月純血的鴻蒙就要與所有開發者見面了，這不禁令人熱血沸騰，分外期待。

圖一·鴻蒙 Next 計劃

而近期關於鴻蒙的消息不斷，各大互聯網廠商，如阿裡、美團、去哪兒、小紅書等等，都已經官宣開展了開發 ArkUI 版原生鴻蒙應用的消息，同時也都在各個招聘渠道公開高薪招聘鴻蒙工程師和專家，仿佛偌大的鴻蒙生態即將全面鋪開，這對於對鴻蒙適配呈觀望態度的開發者來說無疑是巨大的強心劑，鴻蒙應用開發，似乎真的行了。

圖二·業界多家互聯網公司渲染開發鴻蒙原生應用

鴻蒙 ArkUI 是怎麼個事兒

好了，吹了一波鴻蒙的彩虹屁，讓我們來看看，鴻蒙應用開發是個怎麼個事兒。

從鴻蒙官網我們可以瞭解到，鴻蒙應用開發使用方舟框架，即 ArkUI 框架，它支持兩種方式，一種是使用 ArkTS，也就是聲明式的開發範式，另一種是使用 JS，即類 Web 的開發範式，讓我們來看看這兩種開發範式的區別。

• 聲明式開發範式：採用基於 TypeScript 聲明式UI語法擴展而來的 ArkTS 語言，從組件、動畫和狀態管理三個維度提供 UI 繪製能力。
• 類Web開發範式：採用經典的 HML、CSS、JavaScript 三段式開發方式，即使用 HML 標簽文件搭建佈局、使用 CSS 文件描述樣式、使用 JavaScript 文件處理邏輯。該範式更符合於 Web 前端開發者的使用習慣，便於快速將已有的 Web 應用改造成方舟開發框架應用。

圖三·ArkUI 兩種開發範式區別

可以看出，顯然，Web式的開發範式較貼近Web前端開發者的習慣，不過，它更適用於開發簡單的卡片應用，Taro框架已經提供了對這種開發範式的支持，可以查看 Taro && 鴻蒙、OpenHarmony開發文檔，然而，對於大型應用的開發，聲明式開發範式可能更為合適。

你會在下文的語法介紹中發現，聲明式開發範式類似於 Flutter 和 Compose 的開發方式，它對 Web前端開發者來說可能需要一定的學習成本。但鑒於其適用於構建更高複雜度的應用，並且理論上的性能優於Web 式開發範式，鴻蒙將主要推廣這種開發範式。

因此，對於我們這些有志於前端開發的青年來說，更應該關註鴻蒙的ArkTS——即聲明式開發範式。

圖四·ArkTS 架構

從聲明式範式的架構圖中可以看出，該架構主要採用了前後端分離的形式。在這個體系中，前端主要負責處理語法基礎規範和 UI 組件等內容，這部分主要體現在 DSL 層。另一方面，後端則使用 C++ 進行開發，主要負責支持前端的語法範式、組件以及渲染管線。

此外，語言運行時則使用了華為自研的方舟編譯器，支持 JS、ArkTS 和 C++ 的混寫。值得註意的是，方舟編譯器具備 AOT（Ahead-Of-Time，即預編譯）處理能力，這使得它能夠將應用代碼轉化為統一的位元組碼，然後再通過 AOT 轉化為機器碼，從而提升應用的性能。

在架構的下一層，系統會對接基於 Skia 的自繪渲染引擎。在這個過程中，終端的所有渲染需求都會統一提交給渲染引擎，從而使得渲染效果得到提升，這種設計理念不僅使系統在處理渲染任務時更加高效，同時也保證了渲染結果的高質量。

前面提到，聲明式範式與類 Web 的開發範式大有不同，我們可以從下麵這段代碼感受一下。

圖五· ArkTS 基礎語法

熟悉 Flutter 和 Compose 的朋友們可以發現，聲明式範式的 ArkTS 在 UI 描述上的寫法與他們非常相似，而這段 ArkTS 代碼也體現出與 Web 前端熟悉的 JS/TS 語言的不同，如定義自定義組件的 struct 關鍵字等等，在官方的解釋中，ArkTS 是基於 TS 進行擴展的超集，所以這不就是最熟悉的陌生人麽，這不禁讓我們前端覺得”我又行了“。

Taro 與 ArkTS 的聯動

由於聲明式範式與類 Web 範式天然的不同，對 Web 前端來說學習成本還是有的，而且，相應的研發生態也得從零開始建設，之前我們沉澱的大量 Web 生態肯定是沒法直接使用了，這對於前端轉型 ArkTS 開發來說還是存在挑戰的，那麼有沒有辦法可以使用 Web 的開發範式，來開發 ArkTS 應用呢？這似乎就進入了 Taro 最熟悉的領域了，以 Web 的開發範式來統一各端開發。

圖六·Taro 支持的平臺

前文提到，當前 Taro 已經支持了ArkUI 類 Web 的開發範式，這為我們沉澱了很多的經驗，當然，ArkTS 是一種全新的語法，為了實現對它的適配，我還是有不少的工作需要去做。

經過對 ArkTS 語法的分析，其 UI 描述結構讓人聯想到 Flutter 三棵樹中的 Widget Tree，那麼我們首先想到的解決方案就是，將 React/Vue 運行時產生的虛擬 DOM，以某種形式遞歸映射為 ArkTS 的自定義組件樹。基於 Taro 3.0 中適配小程式的經驗，我們想到可以在 ArkTS 環境中模擬 DOM/BOM API，將虛擬 DOM 基於 DOM/BOM API 構建為 Taro DOM 樹，然後再遞歸映射為自定義組件樹，接著再走鴻蒙渲染。

圖七·Taro 適配小程式/鴻蒙原理

在今年 8 月的「2023年華為開發者大會（HDC.Together）」上，Taro 團隊受邀分享了 Taro 適配鴻蒙 ArkUI 的技術方案，整體技術路線是受到認可的，同時在後續的適配過程中也得到了來自華為的技術支持，讓我們的適配工作得以順利進行。

圖八·Taro 在 HDC 上技術分享

目前，基於上述思路，Taro React 適配鴻蒙 ArkTS 的工作已經進入收尾階段，預計將在 12 月下旬發佈可用版本，想要瞭解進展的朋友可以查看這篇文檔，根據相應分支來 follow 我們的進展，有條件的朋友也可以自行嘗試調試。

圖九·使用 Taro 開發的應用 DEMO 編譯後的代碼

總結與展望

是不是有種突然結束，戛然而止的感覺？哈哈哈，本文是 「Taro 適配鴻蒙 ArkTS」系列文章的第一篇，算是先導預告片，在後續我們會陸續釋出其他文章，例如詳解 Taro 適配鴻蒙 ArkTS 原理、Taro 開發 ArkTS 應用最佳實踐、Taro 性能優化利器-半編譯技術介紹等等，向社區介紹 Taro 的最新成果。

鴻蒙 ArkUI 的整體設計筆者覺得是超前的，聲明式範式、自繪渲染等等，吸收了近幾年業界移動端技術的優點，如果開發調試、研發生態等配套設施能夠跟上業界領先的移動端開發解決方案，還是大有可為的，期待鴻蒙 Next 為國產操作系統書寫新的篇章。

作者：京東零售 李偉濤

來源：京東雲開發者社區 轉載請註明來源