How Rax Enables JavaScript Apps on Huawei HarmonyOS: A Cross‑Platform Deep Dive

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

Why Cross‑Platform?

In PC scenarios, browsers limit performance optimizations and containers are fixed. In wireless scenarios, three factors drive the need for cross‑platform solutions:

Significant device and network differences cause performance issues, especially for cost‑sensitive users.

The app container layer allows deeper customizations on wireless devices.

Major apps are building ecosystems around mini‑programs, making multi‑platform support essential.

Technical Approaches for Cross‑Platform

Two main strategies exist:

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

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‑platforms approach, while high‑stability scenarios may opt for separate codebases.

Community Solutions

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

What Is Rax?

Rax uses React‑like 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.

When Rax Meets HarmonyOS

HarmonyOS, Huawei's self‑developed OS, has surpassed 150 million installations and now supports JavaScript app development, a capability not easily available on Android or iOS.

HarmonyOS offers two JavaScript development modes: a web‑like paradigm and a declarative one. This makes Rax a viable solution for building HarmonyOS apps.

Business Requirements

Developing a dedicated HarmonyOS app is costly and lacks universality.

Creating a service card with traffic entry aligns with HarmonyOS's flow‑distribution features and meets business needs.

Advantages of Using Rax for HarmonyOS

Leverages React‑style syntax, avoiding new language learning.

One codebase serves multiple platforms, reducing development cost.

Integrates smoothly with the web ecosystem.

Technical Principles: Rax Integration with HarmonyOS

Multi‑End Rendering

The core is VDOM, a standard data structure that decouples from specific platforms, enabling cross‑platform rendering and data‑driven UI.

Rax employs a Driver adapter pattern: drivers for browsers (driver‑dom), Weex (driver‑weex), mini‑programs, and now HarmonyOS (driver‑harmony). The driver interface defines methods bound to platform APIs.

Driver‑harmony connects Rax to HarmonyOS's JS Framework rendering instructions, translating standard web‑like APIs to HarmonyOS equivalents.

Build System

Rax’s targets configuration now includes harmony, and a dedicated webpack plugin ( plugin-rax-harmony) handles HarmonyOS-specific build tasks and configuration.

Development Pipeline

HarmonyOS provides DevEco Studio for full‑stack development. Short‑term, Rax projects can be built with webpack and bundled into the HarmonyOS source directory. Long‑term, a seamless Rax‑to‑HarmonyOS workflow is being designed in collaboration with the HarmonyOS team.

Roadmap

Key milestones:

Aug 2021: First Rax‑HarmonyOS meeting.

Oct 2021: Demo with HarmonyOS rendering instructions.

Dec 2021: Complete rendering integration.

Feb 2022: Full IDE pipeline completed.

Mar 2022: Official release alongside HarmonyOS 3.0.

The chosen long‑term solution emphasizes performance and lightweight runtime, slated for the HarmonyOS 3.0 launch.