Integrating Rax with HarmonyOS: Cross‑Platform Development Strategies

Since its launch, Huawei's HarmonyOS has attracted attention for its support of JavaScript‑based applications, offering a valuable opportunity for front‑end developers. The Rax team began collaborating with the HarmonyOS JS UI framework to enable Rax‑based HarmonyOS apps.

The presentation explains why cross‑platform solutions are needed in wireless scenarios: large device and network differences, customizable app containers, and the rise of super‑apps that require mini‑program support.

Two technical approaches are compared:

One‑code‑multiple‑targets (code‑share) – lower development cost but higher adaptation complexity.

Separate codebases per platform – higher cost but easier to meet special requirements.

For large‑scale front‑end projects, the code‑share model is usually preferred, while transaction‑critical scenarios may opt for separate implementations.

Rax is a React‑style framework that supports Web, mini‑programs, Weex, and now HarmonyOS. Its cross‑platform rendering relies on a virtual DOM (VDOM) that decouples UI description from the underlying platform, enabling driver adapters for each target.

The driver‑adapter pattern abstracts platform‑specific APIs (e.g., driver‑dom, driver‑weex, driver‑miniapp). For HarmonyOS, a driver‑harmony is introduced to map VDOM nodes to HarmonyOS rendering instructions.

Build integration adds a new "harmony" target to Rax’s multi‑target configuration and provides a dedicated Webpack task via the plugin‑rax‑harmony . This plugin registers a separate Webpack pipeline, customizes the configuration, and outputs HarmonyOS artifacts.

Three integration strategies are outlined:

Syntax compilation – compile Rax syntax to HarmonyOS mini‑program syntax using Babel (high cost, many constraints).

Mini‑program runtime – use Rax to drive data binding on top of HarmonyOS’s mini‑program runtime (short development cycle, but performance overhead).

Direct rendering – Rax directly invokes HarmonyOS rendering instructions via the driver (lightweight, high performance, longer implementation time).

The short‑term solution embeds Rax output into a HarmonyOS project built with DevEco Studio, while the long‑term plan aims for a seamless full‑stack workflow from Rax project creation to debugging and publishing within DevEco Studio.

A roadmap shows milestones from the first Rax‑HarmonyOS meeting in August 2021 to the planned release of the long‑term solution alongside Harmony 3.0 in March 2022.