Can One Toolchain Simplify Multi‑Platform Business Component Development?

Background

Since the early jQuery/YUI era, component reuse has been essential for front‑end efficiency. Modern UI libraries such as React and Vue continue this trend, and component libraries like AntDesign and Fusion have largely solved the basic component problem.

Challenges

Developing business components that work on PC, mini‑programs and visual designers still requires multiple toolchains (Iceworks, Deep, Rax, vdev) and leads to duplicated packages, confusing documentation and high maintenance cost.

Fusion Development Approach

We created a “fusion” package that combines React and Rax in a single toolchain (vdev). The package uses a unified directory layout, TypeScript, SCSS, and custom build‑plugins (build‑plugin‑component and build‑plugin‑vdev‑component) to produce ES5, ES‑module, and demo files for all targets.

During the build we analyse each source file’s AST to apply the appropriate Babel configuration for React or Rax, and generate separate prototypeView files for the visual designer.

Toolchain and Scripts

start

: launch visual‑designer debugging startPC: launch PC debugging startMobile: launch mobile web debugging startMiniapp: launch mini‑app debugging build: produce all build artifacts

Automation

We generate prototype.tsx automatically from component props, sync published packages to the material center, and integrate the @ali/mini WebIDE for one‑click mini‑app debugging.

Future Work

Further optimisation of build speed, deeper business integration, low‑code generation, and model‑driven UI are planned.