Unlocking Native HarmonyOS Performance with Taro’s C‑API Framework

Taro is an open‑source cross‑platform solution initiated and maintained by JD, supporting development of mini‑programs, H5, and native apps using a web development paradigm. Since its open‑source launch in 2018, it has accumulated over 36,000 stars on GitHub.

Taro x Pure HarmonyOS

Over the past year, Taro has undergone significant evolution; the Taro on Harmony solution upgraded from ArkTS to C‑API, achieving full adaptation to pure HarmonyOS and expanding the compatible platform family to include H5, mini‑programs, RN, and native Harmony, enabling unified development across these platforms.

In September last year, JD’s pure HarmonyOS app launched in the HarmonyOS App Store. Core shopping flows—home, search, product details, cart, orders, checkout, and My JD—were developed with the Taro on Harmony C‑API version and immediately received Huawei’s S‑level app certification.

Today we officially open‑source the Taro on Harmony C‑API version, bringing richer style adaptation, more efficient rendering performance, and comprehensive component support, allowing developers to create applications with native‑level performance using a web paradigm, thereby strengthening the HarmonyOS app ecosystem.

For developers, the Taro on Harmony solution significantly lowers the entry barrier for HarmonyOS app development, allowing use of familiar web technology stacks to quickly build pure HarmonyOS apps. The C‑API‑based high‑performance rendering pipeline ensures native‑comparable performance while maintaining development efficiency. Moreover, existing Taro projects can be rapidly adapted to HarmonyOS, accelerating business deployment in the Harmony ecosystem.

Overall Technical Architecture

The Taro on Harmony solution supports developers using a React DSL to develop pure HarmonyOS apps. The architecture can be divided into three layers:

The top layer is the ArkVM layer where application business code runs, along with React core code and a small amount of Taro runtime code in the C‑API version.

The middle layer consists of Taro’s CSSOM and TaroElement tree, handling commands from the upper Taro runtime such as node creation, binding relationships, and property settings.

The bottom layer holds the TaroRenderNode virtual node tree, which maps one‑to‑one with the actual screen node tree and creates corresponding Yoga nodes within the TaroRenderNode tree.

Taro also leverages HarmonyOS’s VSync mechanism to set up a task processing pipeline that handles style matching, node measurement, layout, style setting, and screen rendering for the middle and lower node trees, ensuring task sequencing and correct final rendering results.

Key Features

Rich Capability Support

Common Components and API Support

In the C‑API version of Taro on Harmony, we fully support React 18+ and about 33 Taro components such as View, Text, Image, Video. Common APIs like getSystemInfo and getStorage are also fully supported. Complex APIs such as createSelectorQuery and createIntersectionObserver have been reimplemented in C++ to greatly improve execution performance.

Common Style Support

The C‑API version supports most common CSS capabilities:

Common CSS styles and layouts, including flex, pseudo‑classes, and pseudo‑elements

Common CSS positioning, such as absolute and fixed positioning

Common CSS selectors and media queries

Common CSS units like vh, vw, and calc

CSS variables and predefined variables such as safe‑area

We also implemented a CSSOM logic in C++ that mirrors browser CSSOM, covering style parsing, matching, composition, and application.

Taro integrates the Yoga layout engine to compute the position and size of render nodes, ensuring that the styling of Harmony apps built with Taro aligns with W3C specifications.

Performance Comparable to Native ArkTS

Runtime Logic Shifted to C++

In the C‑API version, the Taro runtime in the ArkVM layer is minimized, with most TaroElement logic moved to the C++ side and parent‑child bindings removed, greatly enhancing TaroElement performance.

On the C++ side, Taro imperatively calls the ArkUI C++ API to efficiently create nodes, set properties, bind events, and render to the screen.

Long List Component for Large Data Scenarios

Taro provides a long‑list component optimized for large data sets, offering lazy loading, preloading, and node reuse to solve performance issues and improve smoothness and user experience.

Support for Mixed Native Rendering Mode

Since Taro’s components and APIs are designed based on mini‑programs, some required components or APIs may be missing for HarmonyOS development. The C‑API version provides hybrid development capabilities, allowing native pages or components to be compiled together with Taro Harmony projects, enabling mixed use of Taro components and native Harmony components on the same page.

Installation and Usage

Installation and Usage

Install Harmony Plugin

<code># Use npm to install
npm i @tarojs/plugin-platform-harmony-cpp
# Use pnpm to install
pnpm i @tarojs/plugin-platform-harmony-cpp</code>

Add Plugin Configuration

<code>import os from 'os'
import path from 'path'
const config = {
  // ...
  plugins: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // Currently only Vite is supported for compiling Harmony apps
    compiler: 'vite',
    // Harmony project path, see Huawei documentation for creation guide
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Taro project compiles to the corresponding Harmony module name, default is entry
    hapName: 'entry',
  },
  // ...
}
</code>

Compile Project

<code># Compile Harmony app
taro build --type harmony_cpp
# Compile native Harmony components
taro build native-components --type harmony_cpp</code>

Page Configuration Example

<code>export default {
  navigationBarTitleText: 'Hello World',
  componentName: 'MyComponent',
  entryOption: false,
}
</code>

Summary and Outlook

The Taro on Harmony C‑API version, forged through JD’s HarmonyOS app practice, offers unparalleled performance, ecosystem integration, and developer experience, making it one of the best framework choices for developing HarmonyOS applications.

We continue to improve the Harmony adaptation, planning multi‑threaded architecture upgrades and a C++ implementation of React to further boost performance and reduce frame drops. These enhancements are currently in verification and testing phases.

We welcome the community to contribute; every suggestion and pull request drives Taro forward.

Scan the QR code to join the technical discussion group.