Frontend Development 7 min read

Introducing a HarmonyOS UI Scaffolding Tool and Development Preparation

After reviewing previous HarmonyOS articles that omitted UI, this piece explains the rationale for focusing on UI later, introduces ArkTS and the Stage model, and outlines the creation of a HarmonyOS UI scaffolding tool to streamline development across desktop and mobile platforms.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Introducing a HarmonyOS UI Scaffolding Tool and Development Preparation

Preface

Regarding HarmonyOS, I have summarized fourteen articles so far, and you may notice none of them cover UI. This is not because I lack the intention to share, but because the official documentation already provides extensive UI resources; duplicating them would be redundant. Therefore I have focused on other aspects, which are also indispensable in development.

After gaining sufficient understanding of HarmonyOS features, approaching UI becomes effortless, especially if you have experience with other declarative UI frameworks; you can quickly grasp HarmonyOS UI.

My goal is to present UI concepts in a simple, understandable way that is practical for developers, differentiating from official docs while meeting real needs; this will be the focus of my upcoming UI‑related sharing.

Initialization Preparation

All APIs discussed in previous articles and the upcoming content target version 9 and above, using the ArkTS language and the Stage model. If your environment differs from mine, I recommend aligning with mine for learning and project development, for the following reasons:

ArkTS Language

Although the ArkUI framework (HarmonyOS UI development framework) offers two paradigms—declarative development based on ArkTS and a class‑Web development paradigm—I strongly recommend choosing the declarative ArkTS approach as the first option.

The main reasons are official recommendation and better performance and development efficiency with ArkTS.

Stage Model

The Stage model is adopted because it will be the primary and long‑term evolving model; the diagram below is from official documentation.

Future HarmonyOS will inevitably abandon AOSP; therefore, transition to the new APIs for easier future project development.

Using Scaffolding as Output

To make learning HarmonyOS more convenient and allow immediate access to UI code, I created a HarmonyOS version of a scaffolding tool, inspired by previous Android and Flutter scaffolds.

Previous Android scaffolding

Previous Flutter scaffolding

On mobile, a scaffolding tool may be unfamiliar; essentially it is a utility that generates code to improve development efficiency. Unlike IDE plugins, it offers greater flexibility and can implement features that plugins cannot.

I will now develop a HarmonyOS scaffolding tool focused on UI, from 0 to 1. The tool is the final product, but the article will emphasize technical points to help both learning and future project development.

The first phase will focus on a desktop program; the second phase may extend to a DevEco Studio plugin.

Although ArkUI‑X extends ArkUI to multiple OS platforms, it currently does not support PC; therefore the desktop program will use another language. Initially I considered Flutter, but since HarmonyOS already provides Node.js, I switched to Electron for desktop development, and will migrate if PC support appears later.

Conclusion

In the coming period I will write about UI, which is essential for rendering data in HarmonyOS development, aiming to differentiate from official docs, align with real business needs, and embed into the scaffolding tool to help developers.

frontenduiHarmonyOSscaffoldingArkTSStage Model
Rare Earth Juejin Tech Community
Written by

Rare Earth Juejin Tech Community

Juejin, a tech community that helps developers grow.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.