How Rax Enables Seamless Cross‑Platform Development on HarmonyOS

Why Cross‑Platform Development?

In PC scenarios, browsers limit performance optimizations and containers are fixed, whereas wireless scenarios face three major challenges: large device and network performance gaps, customizable app container layers, and the rise of super‑apps and mini‑program ecosystems, leading to complex cross‑platform issues.

Technical Approaches for Cross‑Platform

Two main strategies exist:

One‑code‑many‑devices: a single codebase runs on multiple platforms.

Separate codebases: each platform has its own code, typical for native mobile apps.

Comparing development cost, adaptation cost, functional consistency, and hiring cost shows that large‑scale front‑end projects usually prefer the one‑code‑many‑devices approach, while high‑stability scenarios may opt for separate codebases.

Community Solutions

Popular one‑code‑many‑devices frameworks include Rax, Remax, uni‑app, and Taro.

What Is Rax?

Rax uses React syntax to build web applications and provides a comprehensive engineering framework. It supports Web, various mini‑programs, and Weex, serving over 80% of Alibaba’s wireless business.

HarmonyOS Overview

HarmonyOS is Huawei’s self‑developed OS with over 150 million installations, compatible with Android but also supporting JavaScript for system apps, offering a unique opportunity for front‑end developers.

Integrating Rax with HarmonyOS

HarmonyOS provides two JavaScript development models: a web‑like paradigm and a declarative one. Because JavaScript is a first‑class citizen, Rax can theoretically target HarmonyOS.

Business Requirements

Develop a dedicated HarmonyOS app – costly and not universal.

Create a service card with traffic entry – aligns with HarmonyOS’s flow distribution and solves traffic scarcity.

Advantages of Using Rax for HarmonyOS

React‑like syntax requires no new language learning.

Single codebase across multiple platforms reduces development cost.

Leverages the existing web ecosystem in the build chain.

Technical Principles: Rax ↔ HarmonyOS

Rax’s integration consists of three parts: rendering capability, build system, and development workflow.

Multi‑Device Rendering

VDOM Cross‑Platform Capability – VDOM’s standard data structure decouples from specific platforms, enabling data‑driven UI.

Rax Driver Adapter – Abstract drivers (driver‑dom, driver‑weex, driver‑miniapp, etc.) map VDOM operations to each platform.

Driver interface defines methods bound to platform APIs, as illustrated below.

Driver Ecosystem – Includes driver‑web, driver‑server, driver‑miniapp, etc. A simple driver‑server demo shows clear separation between server logic and platform.

Integration Approach

HarmonyOS uses a three‑file structure (index.hml, index.css, index.js) similar to mini‑programs/Vue.

Three integration strategies:

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

Mini‑program‑like runtime – Rax renders templates via setData (short development cycle, but runtime overhead).

Directly map to HarmonyOS rendering instructions – lightweight and high performance, but longer implementation time.

Build System

Rax’s targets configuration now includes a harmony target, and a dedicated plugin handles HarmonyOS-specific webpack configuration and output.

Multiple webpack tasks allow separate builds for each platform, adapting configurations as needed.

The plugin-rax-harmony registers an independent webpack task, customizes configuration, and generates HarmonyOS artifacts.

Development Workflow

HarmonyOS provides DevEco Studio for full‑stack development, debugging, and packaging. Short‑term integration keeps the IDE workflow while embedding Rax output into the HarmonyOS source. Long‑term plans aim for a seamless Rax‑to‑HarmonyOS pipeline within DevEco Studio.

Roadmap of Rax ↔ HarmonyOS Collaboration

Aug 2021 – First meeting between Rax and HarmonyOS teams.

Oct 2021 – Demo using HarmonyOS rendering instructions.

Dec 2021 – Complete rendering integration; discuss full‑stack solution.

Feb 2022 – Full IDE workflow completed; Rax components and APIs adapted.

Mar 2022 – Harmony 3.0 released; final lightweight integration prepared for launch.