Technical Overview of Taro on Harmony: Cross‑Platform Development for HarmonyOS

HarmonyOS has become the world’s third‑largest operating system, prompting a wave of native adaptation. JD.com, as a national‑level application, launched a pure‑Harmony version of its shopping app in September 2023, built with the Taro‑on‑Harmony solution and quickly earned Huawei’s S‑level certification.

The Taro‑Harmony approach lets developers use a React DSL to create high‑performance native Harmony apps, achieving a single codebase that runs on HarmonyOS, mini‑programs, H5, and React Native. This dramatically lowers the entry barrier for Harmony development and enables existing Taro projects to be ported to native Harmony with minimal effort.

Internally, the solution is built on Harmony’s C API, directly mapping the React‑generated virtual DOM to C++ rendering pipelines. This yields native‑level rendering performance and industry‑leading response latency.

Two architectural versions have been released:

Single‑thread version : All business logic and rendering run on the main thread, using ArkVM to produce a virtual DOM, which is then transformed via NAPI into native UI elements, CSSOM, and a render tree. This version powers JD’s homepage, search, cart, and checkout pages.

Multi‑thread version : Business logic, layout, and rendering are split across three threads, eliminating main‑thread blockage, enabling smooth animations, and supporting dynamic code updates. This version is currently being piloted.

Feature highlights include:

Support for React 18+, ~33 Taro components (View, Text, Image, Video, etc.), and full API coverage (system info, storage, selector queries, intersection observers) with C++‑level performance.

Comprehensive CSS capabilities: flex layout, pseudo‑classes/elements, absolute/fixed positioning, media queries, CSS variables, and a custom CSSOM implementation.

Integration of the Yoga layout engine for W3C‑compatible styling.

Optimized long‑list components with lazy loading, pre‑loading, and node reuse.

Hybrid rendering mode allowing native Harmony components to be mixed with Taro components.

Future work focuses on React‑C++ migration, a self‑developed layout engine, and developer tooling such as hot‑reload, source mapping, breakpoint debugging, and element inspection. The single‑thread version will soon be open‑sourced to contribute to the Harmony ecosystem.