Exploration and Practice of Visual‑Assisted Programming: The VE Tool at Beike

Introduction

Visual‑assisted programming is a new concept in the front‑end field that combines manual coding with visual UI operations to improve development efficiency. It sits between pro‑code and no‑code, offering a low‑code experience that retains flexibility while reducing repetitive work.

Current State and Problems

Existing visual tools such as Vue UI, Iceworks, and Umi UI either lock developers into a specific framework (React or Vue) or suffer from limited flexibility, fixed technology stacks, and difficult customizations.

VE Tool Overview

Beike developed the VE (Visual‑assisted Engineering) tool to address these issues. VE provides a one‑stop front‑end development experience covering project creation, configuration, development, running, deployment, and auxiliary functions, while remaining technology‑agnostic.

Core Features

Project creation via a plug‑in based scaffolding mechanism supporting any tech stack (React, Vue, Angular, jQuery, etc.).

Configuration management for Redskull (webpack‑based) and Hobber (Koa‑based) tools, with visual forms for session services, CDN, build paths, etc.

Development management that generates template code through a visual interface and supports custom code‑generation plugins.

Task management for running scripts and a web terminal to execute commands without leaving the UI.

Deployment management that integrates with CI platforms (e.g., Jenkins) to trigger builds directly from VE.

Additional utilities such as document management, dependency management, and quick project opening.

Architecture

VE consists of six layers: runtime environment, LowDB database, API layer, business layer, presentation layer, and front‑end UI layer (Vue + ElementUI). The system runs as an npm package on macOS, requiring Node.js.

Plugin Mechanism

VE allows developers to create scaffolding plugins packaged as npm modules. A typical plugin includes cli.js , config.js , and code.js . Example entry code:

module.exports = api => {
  // Use the API here...
};

Plugin registration example:

api.registerPluginInfo({
  name: '<%=meta.fullName%>', // display name
  pkgName: '@lianjia/<%=meta.fullName%>', // npm package name
  description: '<%=meta.desc%>', // description under the name
  link: '<%=meta.npmUrl%>', // "More info" link
  config: [] // inquirer‑style config items
});

Code generation registration example:

api.registerGenerate(async ({ pluginInfo, projectInfo, push }) => {
  try {
    // ... generate project files
  } catch (e) {
    throw e;
  }
});

These plugins are published to the internal npm registry (e.g., @lianjia/ve-cli-* ) and become available in VE’s scaffolding manager.

Future Outlook

Expand scaffolding types and material libraries.

Integrate with internal systems such as monitoring and code‑analysis platforms.

Provide migration tools for legacy front‑end projects (e.g., JS→TS, adding PWA/SSR support).

Develop a VSCode extension to enable full VE functionality within the IDE.

Conclusion

VE demonstrates a practical low‑code solution for front‑end teams, but adoption requires changing developer habits. The project is open‑source at https://github.com/LianjiaTech/ke-ve , inviting the community to experiment, contribute, and extend the platform.